Create a responsive design in android studio to fit all screen sizes

Android, Android for Beginners, Basics, Layouts in Android Studio, UI UX

How-to-create-responsive-screens-in-Android-Studio-using-Constraint-layout

Before getting in to today’s topic. Which is Create a responsive design in android using Constraint layout in Android Studio, we will be looking forward to answering the questions arrived in many minds and also learn why to use Androidx constraint layout in android studio tutorial.

How to set screen layout to support all screen sizes?
Make an android app responsive in android studio?
How to make android app to fit all screen sizes?
Android layout design for different screen sizes?

So the answer to all the above mentioned and related questions is given in this tutorial. We will use Constraint layout which is a screen layout to support all screen sizes in android studio.

Post Sequence

What is a Constraint layout in Android Studio?

Constraint layout is a Group-View (Layout) which includes all the other Views inside it to create an android application. Constraint layout uses constraints to place a view anywhere on the screen. It is more flexible and easy to use layout as compare to any other layouts in android studio. Constraint layout is one of latest best releases of android studio to design an application and it appears as default layout on every activity. In today’s tutorial we will be creating a responsive design in android studio using Constraint layout and also over come some of the main problems of designing in constraint layout.

Androidx Constraint layout?

AndroidX is a major change in android support libraries which are no longer maintained by the android studio where as Constraint layout was once a part of support libraries and has been released by them. But now the constraint layout has been superseded by the androidx and no longer supported by the android support libraries. Now and onward use androidx to create your projects and also try to change your old projects to androidx.

How to make android app responsive in android studio?

In this tutorial we will be learning how to create a responsive design in android studio using constraint layout.

Create a new project.
Move to the XML and choose a Constraint layout as a parent layout
Create Views with V capital
Place them accordingly to test the screen sizes
Set all the constraints to there most nearest neighbors
Change the width to match constraint in the design panel for horizontal responsiveness
Also height to match constraint if vertical responsiveness required.
Recheck that all the constraints are set.
Run the project and it will be responsive to all types of screen sizes in android studio.

Code for responsive app design in android studio | Constraint layout

Open XML
Delete what ever is in that
Copy the code pasted below
Paste it inside your activity’s XML
Run the projec

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

    <View
        android:id="@+id/view12"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FB8C00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view9"
        app:layout_constraintTop_toBottomOf="@+id/view4" />
    <View
        android:id="@+id/view11"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#C0CA33"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <View
        android:id="@+id/view10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FDD835"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view9"
        app:layout_constraintStart_toEndOf="@+id/view11"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="200dp"
        android:background="#3949AB"
        app:layout_constraintBottom_toTopOf="@+id/view12"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/view2"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#5E35B1"
        app:layout_constraintBottom_toTopOf="@+id/view4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view2"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#8E24AA"
        app:layout_constraintBottom_toTopOf="@+id/view11"
        app:layout_constraintEnd_toStartOf="@+id/view3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFB300"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view12"
        app:layout_constraintStart_toEndOf="@+id/view10"
        app:layout_constraintTop_toBottomOf="@+id/view4" />
</androidx.constraintlayout.widget.ConstraintLayout>

To learn in detail just follow our Youtube tutorial..

Android Related Videos

Related Articles that you might want to check out.

Our Projects Make Us Proud

My Latest Work