Designing Android App UI for Tab and mobile

Question

I am working on new app in which I have to take care of design over mobile devices and tablets.I already read on SO that for this thing I need to create several buckets for sizes to avoid bad look of app on larger or smaller screen at the same time. here is the code I am working on

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_margin="35dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/lblLogo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:autoSizeTextType="uniform"
        android:gravity="center"
        android:padding="15dp"
        android:text="My App Name"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="32sp" />


    <!-- Email Label -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilLoginEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etLoginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>


    <!-- Password Label -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilLoginPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etLoginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:padding="12dp"
        android:text="@string/btnLogin" />
</LinearLayout>

]

This is how the above code looks like on mobile phone (i.e Nexus 6)

**This is how the above code looks like on tablet (i.e Nexus 10)

Notice that on tablet is looking so bad. I know how to handle design in different design buckets. but I want to check if there is any other solution without replicating the same design file in different screen sizes buckets

Thanks in advance......

Answer 1

Instead of duplicate the layout try to:

• avoid to hardcode the dimension in the layout.
• use a ConstraintLayout
• use the different qualifiers

For example the margin in your root view:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/login_layout_margin"
    android:layout_marginEnd="@dimen/login_layout_margin"
    android:layout_gravity="center"
    android:orientation="vertical">
    
           <TextView
            android:id="@+id/lblLogo"
            ..>
    
</LinearLayout>

Then create different dimension in different folder:

res/values/dimens.xml:

<dimen name="login_layout_margin">35dp</dimen>

res/values-sw600dp/dimens.xml:

<dimen name="login_layout_margin">350dp</dimen>

More details here.