Question

I want to design a login screen. The content should be horizontally and vertically alinged center. So far I have created this:

Currently I have given marginTop to my top element i.e. the icon. But I don’t think it’s a proper way. I want the username field to be in the vertical center of the screen. This will move the whole content in the middle of the screen.

Here is my layout code so far:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity" 
    android:background="#d1d6df">

    <ImageView 
        android:id="@+id/imgIcon"
        android:src="@drawable/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="Icon"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="120dp"
        android:layout_centerHorizontal="true"/>

    <EditText
        android:id="@+id/txtUsername"
        android:hint="Username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/imgIcon"
        android:ems="10"
        android:inputType="text">

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/txtPassword"
        android:hint="@string/passwordHint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/txtUsername"
        android:ems="10"
        android:inputType="textPassword">
    </EditText>

    <Button
        android:text="@string/loginButtonText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/txtPassword"
        />

</RelativeLayout>

Also I want Login button to get width from its upper sibling, i.e. Password field. Is that possible?

Answer 1

1. Remove the marginTop and add android:gravity="center" on your relativeLayout
2. Add android:layout_alignLeft="@+id/txtPassword" and android:layout_alignRight="@+id/txtPassword" to your button

Hope this will help you 🙂