How to make a Responsive App in Android Studio?

The primary aim of creating a responsive app is to make it adaptive for all screen sizes. Every user has devices with different screen sizes; thus, enabling your app for individual screen sizes increases the number of consumers and leverages your app’s profitability. 

A respons ive app provides user experience throughout different screen sizes of phones, tablets, and other OS devices and includes both portrait and landscape orientations. 

There are three types of display areas available for your devices. They are ‘compact’, ‘medium’, and ‘expanded’. Each type has been further classified by specific ‘height’ and ‘weight’.

Now, from this tutorial, you can learn how this can be possible using Android Studio. So, let’s get started. 

Strategies to create a Responsive App in Android Studio

Breakpoints

Breakpoints are the most important elements to making your app. Material Design guidelines provide the breakpoints for certain widths and heights to refer to the ‘window size classes’ for your app. These classes ensure how much area of the screen is required for your app. Sometimes the app needs the full screen or a portion of the screen.

Most apps consider the width size classes because of the vertical scrolling. As a result, most of the apps are fitted for all screen sizes. You can handle those different screen sizes with a few breakpoints.

Persistent UI elements

The key regions of your Android apps are content, navigation, and app bar. The navigation and app bar can be ‘persistent UI elements’. That means the elements appear either visible or invisible. It’s not compulsory that they should be visible at all times until they are present. 

Only their visibility is off. You can use these elements for responsive design. They manipulate your screen by taking either full width or full height. Ex. Scrollbar. You can control them by using size classes.

Content

The first thing you should take care of when working with the content is that all the data becomes available on different screen sizes. You can design an adaptive screen layout by using ViewModel. 

The Android Jetpack provides View Models. These models help to show, hide or change the position of your content. 

Here are a few tips for doing that –

1. Use a large container to show more content. A scrolling container would be beneficial for this purpose. Use ‘RecyclerView’ or ‘ScrollView’ to enable such a container.
2. Use ‘ConstraintLayout’ to highlight an important element like an image, video, graph, etc.
3. Expand the margins to reduce unnecessary space in your UI.
4. Use ‘DrawerLayout’ and ‘BottomSheetBehavior’ to create a supportive panel.

Testing

There is different testing types involved in checking your responsive Android app. You can run your tests on physical Android devices and emulators, also. Also, local testing is applicable for this purpose. Accessibility testing is another essential part of your UI testing.

Creating a Responsive App in Android Studio

The first and most effective rule to create a responsive Android app is to use ConstraintLayout. It creates the base layout and specifies the size and position of each view in your UI. 

Also, maintain the spatial relationship between every view of the layout. Later these views can be resized as per the required screen sizes.

Now start building your responsive app –

1. Go to start and create a new ‘Android Studio Project’.
2. Next, select the empty activity and click on ‘Next’.
3. Select the project name as ‘Responsive design layout’.
4. Choose Language: Kotlin/Java.
5. Finally, click on ‘Finish’.
6. Now your project is built, and it’s ready to make an Android app.
7. Create portrait and landscape screens for your app.
8. Android Studio provides a portrait screen by default but doesn’t provide a landscape screen. So you have to create it manually under the ‘res’ folder. The steps are-
9. Go to app > src > main > res > right-click > New > Android Resource Directory
10. Select Resource type as layout then go to Orientation and then click on the ‘>>’ icon.
11. Select Landscape in the Screen orientation and the directory name automatically changes to layout-land. Don’t change the Directory name. Stay with the name as layout-land.
12. Go to the layout-land > right-click > New > XML > Layout XML File and give a name to the file.

• Now cut the layout.xml file and paste it under the layout-land folder.
• Open the XML file. Then you will get the Landscape mode.

After that, make both the portrait and landscape screen layouts.

Portrait Layout

Go to res>activity_main.xml. Then paste the below code-

<?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"
tools:context=".MainActivity">

<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/imageView2"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/img1" />

<ImageView
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/imageView3"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@id/guideline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:srcCompat="@drawable/img2" />

<ImageView
android:id="@+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/imageView4"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@id/guideline"
app:layout_constraintTop_toBottomOf="@+id/imageView2"
app:srcCompat="@drawable/img3" />

<ImageView
android:id="@+id/imageView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@id/guideline"
app:layout_constraintTop_toBottomOf="@+id/imageView3"
app:srcCompat="@drawable/img4" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.35" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.65" />

</androidx.constraintlayout.widget.ConstraintLayout>

Landscape Layout

Go to res>activity_main.xml. Then paste the below code-

<?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"
tools:context=".MainActivity">

<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline"
app:srcCompat="@drawable/img1" />

<ImageView
android:id="@+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/guideline"
app:srcCompat="@drawable/img2" />

<ImageView
android:id="@+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@+id/imageView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/guideline"
app:srcCompat="@drawable/img3" />

<ImageView
android:id="@+id/imageView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView3"
app:layout_constraintTop_toTopOf="@+id/guideline"
app:srcCompat="@drawable/img4" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.60" />

</androidx.constraintlayout.widget.ConstraintLayout>

Finally, your Responsive app is ready. Now you can run and test it. 

Material Component for the Responsive App in the Android studio

It’s impossible to create different screen layouts for different screen sizes. Hence Google introduced material components for responsive android app designing. You can create a view with material components with padding and without padding, and both will give a responsive design UI layout. 

But if you use standard components, that will not provide any responsive layout. Thus it’s recommended to use material components for responsive Android app making.

Here is the code for making apps with those components (material card view) with padding in Android studio-

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

Tools for Responsive Android App Testing

• JUnit: It is the default testing framework for Android, where Unit stands for ‘Unit testing’. It helps to run native tests. JUnit uses annotations like @Test, @Before, and @After to write test cases. You can use Java and Kotlin to write tests on this framework.
• Appium: It supports cross-browser testing. So, you can test both native and hybrid apps with the help of Appium. As it uses Selenium WebDriver, thus supports different languages (Java, Python, C#, etc.) provided by the Selenium client library.

• Espresso: It is the default UI framework for Android. You can perform accessibility testing with the help of Espresso. But it supports Java and Kotlin languages only.

Here’s why you should choose BrowserStack Live

• Live supports local testing. You can perform local testing from your private networks to check your Android app. It’s easier to test work-in-progress web and mobile apps at scale without hosting them on public staging environments.
• Perform accessibility testing with the help of Live as it provides ‘ScreenReader’ to provide a pin-pointed result of your test.
• Provide a large number of real Android devices for testing.

Closing Notes

Testing is a crucial part of your app development process. You have to check your app through end-to-end testing activities to ensure that, ultimately it can meet the end-users requirements. BrowserStack is the go-to infrastructure to test your Android apps. You can easily find bugs and report them by accessing  3000+ devices and browsers for Android testing.