Responsive UI Design in Android

Nowadays every Android UI designer is very serious about his UI design. The path of every project goes through UI design. UI design is the face of every project and every website, app & desktop application. UI is the wall between the User & Back-end where users can interact with the server through the UI design. There is a various aspect where UI designer need to consider while designing any software product, Such as What is the theme of the project? Which is the target audience? either it’s 18+ or Old age audience, Does this UI support all types of screens or not?, and many more question arises in UI designer’s mind. In this article, we will talk about the future of UI in Android.

In Android, there have various platforms where developers developed their Android application, such as Android Studio, Eclipse, React Native, etc. The Majority of the developer preferred. To make the android app responsive we need to make every individual screen for every type of screen size, Such as Large, X-large, Normal. Let’s see these images.

Normal Screen

Large Screen Size

X-Large Screen Size

Small Screen Size

These are very troubling steps for every designer to redesign for every individual screen. Due to this time of the project will also be increased. To Overcome this type of issue google introduces the Material Component for android design, It Overcomes the responsiveness as much as possible. Material Components supports all screen sizes. 

Using Material Component in Android Apps

Adding a material component you need to simply add this dependency in your Gradle file

implementation ‘com.google.android.material:material:1.2.1’

After adding this dependency you will able to use the material component in your android project.

XML

<com.google.android.material.button.MaterialButton
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:backgroundTint="#5874FF"
            android:layout_below="@id/desc"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            app:cornerRadius="0dp"
            android:textSize="16sp"
            android:padding="10dp"
            android:id="@+id/btn1"
            android:fontFamily="@font/ubuntu_m"
            android:text="Learn More"
            android:textAllCaps="false"/>

To make our design more stylish and attractive as well as responsive you need to use Material Card View in your layout.

XML

<com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/card1"
        android:backgroundTint="@color/bottom"/>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/card2"
        android:layout_below="@id/card1"
        android:layout_marginTop="20dp"
        android:backgroundTint="@color/bottom">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="40sp"
                android:layout_centerInParent="true"
                android:textAlignment="center"
                android:textColor="#fff"
                android:textStyle="bold"
                android:text="Text"/>

        </RelativeLayout>

</com.google.android.material.card.MaterialCardView>

Material Card View automatically manages the padding and margin as well as sizes sometimes. You can add gradient color inside the card by using a third-party library its looks so awesome. You can add a menu inside the card block, you can add a slider in the card.

Example

Let’s Take One Example with android studio. Now we can design an android layout using XML. We can design a material card view component first. Material Card View with parent padding.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    android:background="#fff"
    android:padding="30dp"
    tools:context=".customer.Find_Farmer">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardCornerRadius="20dp"
        android:elevation="8dp"
        android:backgroundTint="@color/bottom">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Here"
                android:textStyle="bold"
                android:layout_centerInParent="true"
                android:textColor="#fff"
                android:textSize="28sp"/>

        </RelativeLayout>

    </com.google.android.material.card.MaterialCardView>

</RelativeLayout>

Output UI:

Material Card View without padding:

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    android:background="#fff"
    tools:context=".customer.Find_Farmer">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardCornerRadius="20dp"
        android:elevation="8dp"
        android:backgroundTint="@color/bottom">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Here"
                android:textStyle="bold"
                android:layout_centerInParent="true"
                android:textColor="#fff"
                android:textSize="28sp"/>

        </RelativeLayout>

    </com.google.android.material.card.MaterialCardView>

</RelativeLayout>

If you use the material card view without padding then the material component can automatically add default padding and color. This can also be helpful for responsive UI design. 

If you use the normal card view then it can not provide any responsiveness in layout. Also, the normal components do not look as stylish as other material components.

There are many aspects that were material component is easier & flexible than normal components such as shadow, border, etc.

Advantages of Material Component

• Material components are lightweight.
• The material component looks great as compared to others.
• Material component very much as responsive.

Disadvantages of material component

• Some times component does not work properly in a real device.