Designing Android App UI for Tab and mobile

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"?>

<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"
android:padding="30dp"
tools:context=".MainActivity">

<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>

</RelativeLayout>]

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......

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.