1
\$\begingroup\$

I have created a sign up layout as image below.

enter image description here

Does this part of code looked bad since the dp I used for the floating button are quite large.

   android:layout_marginTop="110dp"
   android:layout_marginLeft="70dp"

If yes, how can I change it ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical">

    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center">

        <de.hdodenhof.circleimageview.CircleImageView
                android:layout_marginTop="25dp"
                android:id="@+id/imgProfilePicture"
                android:layout_width="110dp"
                android:layout_height="130dp"
                app:civ_border_width="1dp"
                app:civ_border_color="@color/colorPrimary"/>


        <android.support.design.widget.FloatingActionButton
                app:fabSize="mini"
                android:layout_marginTop="110dp"
                android:layout_marginLeft="70dp"
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:elevation="2dp"
                android:src="@drawable/camera" android:layout_alignRight="@+id/imgProfilePicture"/>

    </RelativeLayout>


    <TextView
            android:layout_marginLeft="35dp"
            android:backgroundTint="@color/colorPrimary"
            android:layout_marginTop="30dp"
            android:id="@+id/textViewUserId"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="USER ID "/>

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content"
              android:layout_marginLeft="30dp"
              android:layout_marginRight="30dp"
              android:id="@+id/editTextUserId"
    />

    <TextView
            android:layout_marginLeft="30dp"
            android:backgroundTint="@color/colorPrimary"
            android:layout_marginTop="25dp"
            android:id="@+id/textViewUserName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="USERNAME "/>

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content"
              android:layout_marginLeft="30dp"
              android:layout_marginRight="30dp"
              android:id="@+id/editTextUsername"
    />


    <TextView
            android:layout_marginLeft="30dp"
            android:backgroundTint="@color/colorPrimary"
            android:layout_marginTop="25dp"
            android:id="@+id/textViewPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="PASSWORD "/>

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content"
              android:layout_marginLeft="30dp"
              android:layout_marginRight="30dp"
              android:id="@+id/editTextUserPassword"
    />

    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                  android:orientation="horizontal"
    >

        <TextView
                android:layout_marginLeft="30dp"
                android:backgroundTint="@color/colorPrimary"
                android:layout_marginTop="25dp"
                android:id="@+id/textViewCourse"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="COURSE "/>

        <TextView
                android:layout_marginLeft="65dp"
                android:layout_marginRight="30dp"
                android:backgroundTint="@color/colorPrimary"
                android:layout_marginTop="25dp"
                android:id="@+id/textViewPhoneNum"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="PHONE NUMBER "/>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
                  android:orientation="horizontal">

        <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content"
                 android:layout_marginLeft="30dp"
                 android:layout_marginRight="30dp"
                 android:id="@+id/spinner"/>


        <EditText android:layout_width="match_parent" android:layout_height="wrap_content"
                  android:layout_marginRight="30dp"
                  android:id="@+id/editTextPhoneNum"/>

    </LinearLayout>


</LinearLayout>
\$\endgroup\$
1
+50
\$\begingroup\$

Its not that bad, but in this case you might have to test it in different screen sizes Android devices, to see if it fits exactly where you want.

In my opinion, better approach is to use FrameLayout instead of using relative layout. By using frame layout, you can use gravity center | bottom and thereby removing marginTop.

The code goes like this:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <de.hdodenhof.circleimageview.CircleImageView
         android:layout_marginTop="25dp"
         android:id="@+id/imgProfilePicture"
         android:layout_width="110dp"
         android:layout_height="130dp"
         app:civ_border_width="1dp"
         app:civ_border_color="@color/colorPrimary"
         android:layout_gravity="center"/>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/imgProfilePicture"
        android:src="@mipmap/ic_launcher"
        app:elevation="2dp"
        app:fabSize="mini"
        android:layout_gravity="center|bottom"
        android:layout_marginLeft="50dp"
        />

</FrameLayout>

And this marginLeft 50dp is because , width if your circleImageView is 110, so 50 is approximately half where you want it.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.