Search code examples
androidandroid-layoutandroid-widget

Android: Align LinearLayout center for all screen sizes

I want to design a layout for my login screen, I tried the following codes. Using some hardcoded values I got my center green color layout center for some screen sizes. I know using hardcoded values wont work on different screen sizes. I tried numerous stuffs on SO. Please provide me the best way enter image description here

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background" >

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/register_header"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/title_image"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:src="@drawable/logo_blue" />


    </RelativeLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
         android:layout_marginLeft="150dp"
        android:layout_marginRight="150dp"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="50dp"
        android:orientation="vertical" >

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/UserInfo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/WelcomeInfo"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/user"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="User Name"
                android:textColor="#000000"
                android:textSize="10pt"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/username"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:hint="Enter username"
                android:singleLine="true"
                android:textColor="#000000" >
            </EditText>
        </LinearLayout>

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/PassInfo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/UserInfo"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/pwd"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Password"
                android:textColor="#000000"
                android:textSize="10pt"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/password"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:hint="Enterpassword"
                android:singleLine="true"
                android:textColor="#000000" />
        </LinearLayout>

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/StoreNumInfo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/WelcomeInfo"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/num"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Store Number"
                android:textColor="#000000"
                android:textSize="10pt"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/store_num"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:hint="Enter the Store number"
                android:imeOptions="actionDone"
                  android:password="true"

                android:textColor="#000000" >
            </EditText>
        </LinearLayout>

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/Options"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/PassInfo"
            android:orientation="horizontal" >

            <CheckBox
                android:id="@+id/signed_in"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Stay Signed-in"
                android:textColor="#000000" />


            <Button
                android:id="@+id/login"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Login"
                android:textSize="28dp"
                android:textStyle="bold" />
        </LinearLayout>


    </LinearLayout>
</LinearLayout> </ScrollView>
Solution

  • Use your cover of your green layout as RelativeLayout. and then define your greenLayout like this. android:layout_centerHorizontal="true" android:layout_centerVertical="true"

    Look at my xml it can center all screen

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/lin_all"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:orientation="vertical" >
</LinearLayout>

</RelativeLayout>