Sign Up layout in android

Question

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>

Answer 1

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.