How to support Responsive UI in android

Android devices come with different screen sizes and resolutions. You cant create layout for each screen size. You need to create flexible layout or responsive ui to support all screen sizes in android.

Responsive UI is a design approach used to create design that adjusts to different screen sizes. There are two solutions in android for responsive ui. first you need to create multiple versions of design and second you need to create flexible design that would stretch or shrink to the amount of available space.

Before constraint layout, We create multiple layouts for different screens like layout-small, layout, layout-large, layout-xlarge. Using constraint layout, You can support all screen sizes from single layout. But you need to define different dimensions in different values folders.

To save time for this, I am using custom library that defines SDP and SSP to support responsive ui. SDP means scalable dp. This size unit scales with screen size. SSP means scalable sp. This size unit scales screen size based on sp unit.

Add below dependencies in your build.gradle file

implementation ‘com.intuit.sdp:sdp-android:1.0.6’
implementation ‘com.intuit.ssp:ssp-android:1.0.6’

I created login screen ui with constraint layout, SSP and SDP in this example. There are two edittexts for email and password in this ui. There are three textviews for header, forgot password and create account if user is not already registered. There is single button in this ui for submit details. This is just demo for responsive ui so i did not add any click on views.

XML Layout

<?xml version=”1.0″ encoding=”utf-8″?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:app=”http://schemas.android.com/apk/res-auto”
    xmlns:tools=”http://schemas.android.com/tools”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”>

    <TextView
        android:id=”@+id/txt_header_login”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Login”
        android:textSize=”@dimen/_50ssp”
        app:layout_constraintLeft_toLeftOf=”parent”
        app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toTopOf=”parent”
        android:layout_marginTop=”@dimen/_60sdp”
        android:textColor=”@android:color/holo_red_dark”/>

    <EditText
        android:id=”@+id/edt_email_login”
        android:layout_width=”0dp”
        android:layout_height=”wrap_content”
        app:layout_constraintStart_toStartOf=”parent”
        app:layout_constraintEnd_toEndOf=”parent”
        app:layout_constraintTop_toBottomOf=”@+id/txt_header_login”
        android:layout_marginTop=”@dimen/_50sdp”
        android:layout_marginStart=”@dimen/_30sdp”
        android:layout_marginEnd=”@dimen/_30sdp”
        android:hint=”Email”
        android:textSize=”@dimen/_20ssp”/>

    <EditText
        android:id=”@+id/edt_password_login”
        android:layout_width=”0dp”
        android:layout_height=”wrap_content”
        app:layout_constraintStart_toStartOf=”@+id/edt_email_login”
        app:layout_constraintEnd_toEndOf=”@+id/edt_email_login”
        app:layout_constraintTop_toBottomOf=”@+id/edt_email_login”
        android:layout_marginTop=”@dimen/_15sdp”
        android:hint=”Password”
        android:textSize=”@dimen/_20ssp”/>

    <Button
        android:id=”@+id/btn_login_login”
        android:layout_width=”0dp”
        android:layout_height=”@dimen/_55sdp”
        android:text=”Submit”
        app:layout_constraintStart_toStartOf=”@+id/edt_email_login”
        app:layout_constraintEnd_toEndOf=”@+id/edt_email_login”
        android:layout_marginTop=”@dimen/_40sdp”
        android:textSize=”@dimen/_20ssp”
        android:background=”@android:color/holo_red_dark”
        android:textColor=”@android:color/white”
        app:layout_constraintTop_toBottomOf=”@+id/edt_password_login”/>

    <TextView
        android:id=”@+id/txt_forgot_password”
        android:layout_width=”0dp”
        android:layout_height=”wrap_content”
        app:layout_constraintStart_toStartOf=”@+id/edt_email_login”
        app:layout_constraintEnd_toEndOf=”@+id/edt_email_login”
        android:text=”Forgot Password?”
        android:layout_marginTop=”@dimen/_20sdp”
        android:textSize=”@dimen/_18ssp”
        app:layout_constraintTop_toBottomOf=”@+id/btn_login_login”
        android:gravity=”center”/>

    <TextView
        android:layout_width=”0dp”
        android:layout_height=”wrap_content”
        app:layout_constraintStart_toStartOf=”@+id/edt_email_login”
        app:layout_constraintEnd_toEndOf=”@+id/edt_email_login”
        android:text=”No account yet? Create one”
        android:layout_marginTop=”@dimen/_35sdp”
        android:textSize=”@dimen/_18ssp”
        app:layout_constraintTop_toBottomOf=”@+id/txt_forgot_password”
        android:gravity=”center”/>


</androidx.constraintlayout.widget.ConstraintLayout>