Param Classes – Android Studio & Java Tutorial Series

1. Introduction

When we develop an Android application, we cannot assume that every user has the same mobile screen size.

Some users have small smartphones, while others have large smartphones or tablets. Screen resolutions and pixel densities can also be different.

If we design an application for only one screen size, its UI may look incorrect on other devices.

For example:

• Text may become too small or too large.

• Buttons may go outside the screen.

• Images may appear stretched.

• Content may become difficult to read.

• Some UI components may overlap.

To avoid these problems, we use responsive UI design.

In this tutorial, we will learn how to create Android screens that adjust properly to different mobile screen sizes using XML and Java.

2. What Is Responsive UI Design?

Responsive UI design means creating an application interface that adjusts to different screen sizes, screen densities, and available space.

A responsive Android screen should:

• Display content properly on small and large devices.

• Adjust component sizes according to available space.

• Maintain readable text.

• Prevent UI components from overlapping.

• Support different screen orientations.

• Provide a consistent user experience.

For example, a login screen should remain usable on both a small smartphone and a large smartphone.

3. Understanding Screen Size and Screen Resolution

Before designing responsive screens, we need to understand two important concepts.

Screen Size

Screen size refers to the physical diagonal measurement of a device's display.

It is commonly measured in inches.

For example:

• A small smartphone may have a 5-inch display.

• A larger smartphone may have a 6.7-inch display.

• A tablet may have a 10-inch display.

Screen Resolution

Screen resolution refers to the number of pixels displayed on the screen.

For example:

• 720 × 1600 pixels

• 1080 × 2400 pixels

• 1440 × 3200 pixels

A higher resolution means the screen can display more physical pixels. However, resolution alone does not determine how much layout space an Android app receives.

For responsive Android design, density-independent dimensions are more useful.

4. Understanding dp, sp and px

Android uses different units for defining UI dimensions.

dp – Density-independent Pixels

dp is used for dimensions such as:

• Width.

• Height.

• Margin.

• Padding.

Example:

android:layout_width="200dp"
android:layout_height="50dp"

dp helps maintain more consistent physical sizing across devices with different pixel densities.

sp – Scale-independent Pixels

sp is mainly used for text sizes.

Example:

android:textSize="18sp"

sp also considers the user's font-size preference.

px – Pixels

px represents actual physical pixels on the screen.

Using fixed pixel values for normal UI dimensions is generally discouraged because devices have different pixel densities.

Remember:

Use dp for most UI dimensions and sp for text sizes.

5. Use match_parent and wrap_content

These two attributes help create flexible layouts.

match_parent

match_parent makes a view occupy the available space provided by its parent.

Example:

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Login" />

The button uses the available parent width.

wrap_content

wrap_content makes a view occupy only the space required by its content.

Example:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Welcome" />

The TextView takes the space required to display its text.

Using these attributes correctly helps prevent unnecessary fixed dimensions.

6. Use ConstraintLayout for Flexible Screen Design

ConstraintLayout is useful for designing responsive Android screens.

It allows us to position views relative to the parent or other views.

Let's create a simple responsive login screen.

XML Code – activity_main.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome Back"
        android:textSize="26sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <EditText
        android:id="@+id/etEmail"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Enter Email"
        android:inputType="textEmailAddress"
        android:layout_marginTop="30dp"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Enter Password"
        android:inputType="textPassword"
        android:layout_marginTop="12dp"
        app:layout_constraintTop_toBottomOf="@id/etEmail"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Login"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@id/etPassword"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Understanding the Code

layout_width="0dp"

Inside ConstraintLayout, 0dp means match constraints. The view uses the available space between its constraints.

layout_constraintStart_toStartOf="parent"

Connects the start side of the view to the start side of its parent.

layout_constraintEnd_toEndOf="parent"

Connects the end side of the view to the end side of its parent.

layout_constraintTop_toBottomOf="@id/etEmail"

Positions the password field below the email field.

Because the views are connected through constraints, their positions can adjust when the available screen width changes.

7. Use ScrollView for Small Screens

Sometimes a screen contains many components. On a smaller device, all components may not fit vertically.

In this situation, ScrollView allows users to scroll through the content.

XML Example

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Registration Form"
            android:textSize="24sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Name" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Email" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Password"
            android:inputType="textPassword" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Register" />

    </LinearLayout>

</ScrollView>

Explanation

• ScrollView provides vertical scrolling.

• LinearLayout contains the form components.

• wrap_content allows the content to use the height it needs.

• fillViewport helps the content fill the viewport when it is shorter than the available screen.

Important: A ScrollView should have only one direct child. If you need multiple components, place them inside a parent layout such as LinearLayout.

8. Create Different Layouts for Different Screen Sizes

Android allows us to provide alternative layout resources for different device configurations.

For example, we can create:

• A default layout for smartphones.

• An alternative layout for larger screens.

• A landscape layout for horizontal orientation.

Default Layout

Create:

res/layout/activity_main.xml

This layout acts as the default version.

Large Screen Layout

Create:

res/layout-sw600dp/activity_main.xml

The sw600dp qualifier is used for devices whose smallest available width is at least 600dp.

This is commonly useful for tablet-sized layouts.

For example, the default screen may display content vertically, while the large-screen version can display content in two sections.

Landscape Layout

Create:

res/layout-land/activity_main.xml

Android can use this layout when the device is in landscape orientation.

Important: Both alternative layouts should use the same filename when they are intended to replace the same screen. Keep the required view IDs consistent if the same Activity Java code accesses those views.

9. Use ConstraintLayout Guidelines

Guidelines are invisible helper lines in ConstraintLayout.

They help position views at a percentage or a fixed distance from the parent.

For example:

<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.5" />

This creates a vertical guideline at 50% of the parent's width.

We can connect views to this guideline to create balanced screen layouts.

Guidelines are especially useful when designing interfaces that need consistent alignment.

10. Use Flexible Widths Instead of Fixed Widths

Fixed dimensions can create problems on smaller devices.

For example:

android:layout_width="350dp"

A 350dp-wide view may not fit properly in a narrow parent.

Inside ConstraintLayout, a better approach is often:

android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

This allows the view to use the available space between its constraints.

However, fixed dimensions are not always wrong. They are appropriate when a component genuinely needs a consistent size, such as a small icon.

The important point is to avoid unnecessary fixed widths for full-screen content.

11. Handle Screen Orientation Changes

Android devices commonly support two screen orientations:

Portrait: The device is held vertically.

Landscape: The device is held horizontally.

A layout that looks good in portrait may not fit properly in landscape.

To handle this:

• Use flexible layouts.

• Avoid unnecessary fixed heights.

• Use ScrollView when content may exceed the available height.

• Test both orientations.

• Create alternative landscape layouts when the design requires them.

For example, a registration form may use a vertical arrangement in portrait and a two-column arrangement in landscape.

12. Test Your App on Different Screen Sizes

Testing is an important part of responsive UI development.

Android Studio provides tools for checking layouts on different devices.

Step 1: Open Layout Preview

Open your XML file and select Design or Split view.

Step 2: Select a Device

Choose different device profiles from the preview device selector.

Step 3: Check Different Screen Sizes

Test the layout on:

• Small phone.

• Regular phone.

• Large phone.

• Tablet.

Step 4: Check Orientation

Switch between portrait and landscape.

Step 5: Check Text Scaling

Test the screen with larger system font settings.

Step 6: Run on an Emulator

Create or select different Android Virtual Devices using Device Manager.

Check whether buttons, text, images, and other components remain usable.

13. Practical Example: Responsive Profile Screen

Now let's create a simple profile screen using ConstraintLayout.

XML Code – activity_main.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <ImageView
        android:id="@+id/ivProfile"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/profile"
        android:scaleType="centerCrop"
        android:contentDescription="Profile Picture"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rahul Sharma"
        android:textSize="22sp"
        android:textStyle="bold"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@id/ivProfile"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/tvEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="rahul@example.com"
        android:textSize="16sp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@id/tvName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/btnEdit"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Edit Profile"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@id/tvEmail"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Make sure that profile.png exists in the drawable folder.

Java Code – MainActivity.java

package com.example.myapp;

import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    Button btnEdit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnEdit = findViewById(R.id.btnEdit);

        btnEdit.setOnClickListener(v -> {

            Toast.makeText(
                this,
                "Edit Profile Clicked",
                Toast.LENGTH_SHORT
            ).show();

        });
    }
}

Understanding the Practical Example

Step 1: ConstraintLayout acts as the main screen container.

Step 2: ImageView displays the user's profile picture.

Step 3: TextView displays the user's name and email address.

Step 4: Button displays the Edit Profile action.

Step 5: Java code connects the button using findViewById().

Step 6: setOnClickListener() handles the button click.

This example uses flexible horizontal constraints so the content can adapt to different available widths.

14. Common Responsive Design Mistakes

Mistake 1: Using fixed widths everywhere

Fixed widths can cause components to exceed the available screen width.

Mistake 2: Ignoring text scaling

Users may increase their system font size. Text should remain readable and should not be clipped.

Mistake 3: Not using ScrollView for long forms

On smaller screens, users may not be able to access components that extend beyond the visible area.

Mistake 4: Ignoring landscape orientation

A screen may work in portrait but become difficult to use in landscape.

Mistake 5: Using px instead of dp and sp

Using physical pixels for normal UI dimensions can produce inconsistent sizing across devices.

Mistake 6: Not testing on tablets

A smartphone layout may look stretched or poorly arranged on a tablet. Use alternative layouts when necessary.

Mistake 7: Forgetting image scaling

Use appropriate ImageView scale types and image resources to avoid unwanted image distortion.

15. Practice Tasks

Try these tasks yourself:

Task 1: Create a login screen using ConstraintLayout.

Task 2: Make the login button occupy the available horizontal space.

Task 3: Add a ScrollView to a long registration form.

Task 4: Create an alternative layout for devices with a smallest width of at least 600dp.

Task 5: Create a landscape layout using the layout-land resource directory.

Task 6: Test your app on small, regular, and large emulator devices.

Task 7: Increase the device font size and check whether the screen remains readable.

16. Conclusion

Responsive UI design is important because Android applications run on devices with different screen sizes, resolutions, and pixel densities.

In this tutorial, we learned:

• What responsive UI design means.

• The difference between screen size and resolution.

• How dp, sp, and px work.

• How to use match_parent and wrap_content.

• How ConstraintLayout helps create flexible screens.

• How ScrollView supports long content.

• How to create alternative layouts for larger screens and landscape orientation.

• How to test Android applications on different devices.

A good Android interface should not be designed for only one mobile device. It should remain usable across different screen configurations.

17. Frequently Asked Questions (FAQs)

Q1. What is responsive UI design in Android?

Responsive UI design means creating layouts that adapt to different screen sizes and available display space.

Q2. What is dp in Android?

dp stands for density-independent pixels. It is commonly used for layout dimensions.

Q3. What is sp in Android?

sp stands for scale-independent pixels. It is mainly used for text sizes and respects the user's font-size settings.

Q4. Why should we use ConstraintLayout?

ConstraintLayout helps position components flexibly and supports complex screen designs with a relatively flat view hierarchy.

Q5. What is the use of ScrollView?

ScrollView allows users to scroll through content that does not fit inside the visible screen area.

Q6. What is the layout-sw600dp folder?

It contains alternative layouts for devices whose smallest available screen width is at least 600dp.

Q7. How can we create a landscape layout?

Create a layout resource directory named layout-land and place the alternative XML layout inside it.

Q8. Why should we test an app on different devices?

Testing helps identify problems such as overlapping views, clipped text, incorrect spacing, and layouts that do not fit.

18. SEO Details

SEO Title: How to Design Responsive Android App Screens for Different Mobile Sizes

Meta Description: Learn responsive Android UI design using XML and Java. Understand dp, sp, ConstraintLayout, ScrollView, alternative layouts and screen-size testing.

Focus Keyword: Responsive Android App Design

Related Keywords:

• Android Responsive UI Design

• Android Different Screen Sizes

• Android ConstraintLayout Tutorial

• Android Screen Density

• Android ScrollView Example

• Android Layout Design with Java

• Android Studio UI Design

Suggested URL Slug: responsive-android-app-screens-different-mobile-sizes