Make Android Studio App Support All Screen Sizes With Constraint Layout [Full Guide].

Post Comment

Before I speak about the subject today. We'll look forward to other ways to answer questions and to learning how to use the AndroidX constraint layout. This article teaches you how to make Android Studio apps with constraint layout support all your screen sizes.


Make Android Studio app support all screen sizes with Constraint Layout.

  • How to set the layout of the screen to support any screen size?
  • Make an android app in Android studio responsive?
  • How to create android applications that fit all screen sizes?
  • Design Android layout for various screen sizes?

So in this tutorial you will find the answer to all the questions above and related. We will use Constraint, which is a screen layout in Android studio to support all the screen sizes.

What is an Android Studio Constraint Layout?

Constraint layout is a Group view, including all the other views inside to create an app for android. Constraint layout uses constraints for placing views anywhere on the screen. It is flexible and easier to use in Android studio compared to other layouts.


What is an Android Studio Constraint Layout?


The constraint layout is one of the recent updates of the Android Studio for the design of an application. We will create a responsive layout in the Android studio in our present tutorial with a constraint layout and some of the key problems in the use of this layout

About AndroidX Constraint Layout.

AndroidX is a big improvement to Android support libraries, which are no longer maintained by the android studio where Constraint layout once was part of and published in support libraries.

ConstraintLayout, which is now the default Android Studio layout, allows you to set objects in many places.

You may limit them to each other's container or guidelines. In a flat hierarchy this enables you to create large , complex and dynamic views.

How do I make Android in Android Studio responsive?

In this article you will learn how to create a responsive design using the constraint layout of Android Studio.

  • Build a new Project
  • Move to the XML and choose a constraintLayout as the xml design parent.
  • Type Capital V for Views
  • Set them to test the size of the screen
  • Set all the constraint on it closest neighbours
  • Adjust the width to match constraint in the XML design panel for horizontal responsiveness.
  • Height to match constraint, if vertical responsive is needed.
  • Make sure all the constraints are set.
  • Run the project in Android studio and it will respond to all types of screen sizes.

How do I make Android in Android Studio responsive?

Make Android Application Responsive with this code using Constraint Layout

  • Open XML(activity_main.xml)
  • Remove what's there ever
  • Copy the following code
  • Paste code in activity_main.xml
  • Execute or run project

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

    <!--first view-->
    <View
        android:id="@+id/elif12"
        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/elif9"
        app:layout_constraintTop_toBottomOf="@+id/elif4"
        />
    <!--second view-->
    <View
        android:id="@+id/elif11"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFE92B"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/elif10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/elif2"
        />
    <!--third view-->
    <View
        android:id="@+id/elif10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#0B0901"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/elif9"
        app:layout_constraintStart_toEndOf="@+id/elif11"
        app:layout_constraintTop_toBottomOf="@+id/elif2"
        />
    <!--fourth view-->
    <View
        android:id="@+id/elif4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="200dp"
        android:background="#5F0DE1"
        app:layout_constraintBottom_toTopOf="@+id/elif12"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/elif2"
        app:layout_constraintTop_toTopOf="parent"
        />
    <!--fifth view-->
    <View
        android:id="@+id/elif3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#140533"
        app:layout_constraintBottom_toTopOf="@+id/elif4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/elif2"
        app:layout_constraintTop_toTopOf="parent"
        />
    <!--sixth view-->
    <View
        android:id="@+id/elif2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#0DF17D"
        app:layout_constraintBottom_toTopOf="@+id/elif11"
        app:layout_constraintEnd_toStartOf="@+id/elif3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <!--seventh view-->
    <View
        android:id="@+id/elif9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0048"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/elif12"
        app:layout_constraintStart_toEndOf="@+id/elif10"
        app:layout_constraintTop_toBottomOf="@+id/elif4"
        />
</androidx.constraintlayout.widget.ConstraintLayout>


Elif coding all articles summary

However, AndroidX has now replaced the constraint layout and is not supported by the support libraries of android. Now and then use AndroidX to create your projects and try to turn your previous projects into AndroidX.

0 comments