Responsive UI Design in Android

29 Dec, 2020
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.
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. 
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.
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.
Material components are lightweight.
The material component looks great as compared to others.
Material component very much as responsive.
Some times component does not work properly in a real device.
android
Technical Scripter 2020
Android
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Flutter - Stack Widget
Introduction to Android Development
Activity Lifecycle in Android with Demo App
Fragment Lifecycle in Android