Android UI Design: How to Support Different Screen Size in Android

Hey developers welcome back to new post. In this post, I’ll show you how you can essentially Support Different Screen Size in Android because that really is a question, if you test any app in tablet and a normal phone then the layouts will look differently. If we also rotate this phone, so layouts are stacked vertically instead they are stacked horizontally.

How to Support Different Screen Size in Android (screen sizes for responsive design)
How to Support Different Screen Size in Android (screen sizes for responsive design)

So all those are things, I’ll show you in this post with the help of Constraint Layout, this post is not about how to build specific layout but with this layout, I can just show you pretty well which concepts you actually need to know to support multiple screen sizes.

Android UI Design: How to Support Different Screen Size in Android (Responsive design layout)

First point:

When it comes to building responsive UI so you need to use Constraint Layout, if there is only one thing you learned from this post. Always try to use Constraint Layout, wherever possible and it’s actually always possible sometimes you need more layouts within a constraint layout but usually you can build your UI just with a single constraint layout. The reason you should use constraint layout there are actually multiple reasons on the one hand just to have a flat layout hierarchy.

If you use Constraint Layout, so you don’t have many nested layouts which will just need more processing power and which will make your app better performance and on the other hand in terms of responsiveness constraint layout just comes with a lot of tools that help you to define relative sizes .

Second point:

You should avoid hard coding, you should avoid giving a view width of 200dp or so on because it will have width of 200dp on every device and you don’t need to hard code them. In this post I’ll show you how all thing are work, so let’s jump right into the project.

Note: we don’t need any dependencies.

follow the steps below.

Step 1: Create A Project For Support Different Screen Size

  • Start a new Android Studio Project.
  • Select empty Activity and click Next.
  • Project Name: Responsive design layout.
  • Choose Language: Kotlin.
  • Now click Finish.
  • Your project is ready now.

After building the project, you will see your project is ready to start building an app.

Step 2: Create portrait and landscape screen

All portrait and landscape screen
All portrait and landscape screen

Above you will see all screen is created, Now we will start to create the portrait and landscape screen for the multiple screens, below are the steps you can follow these steps, step by step.

step to create activity_main(sw320dp)
step to create activity_main(sw320dp)-2
step to create activity_main(sw320dp)-2
step to create activity_main(sw320dp)-3
step to create activity_main(sw320dp)-3

Now we will create screens for landscape layout.

step to create activity_main(sw320dp)-landscape-1
step to create activity_main(sw320dp)-landscape-1
step to create activity_main(sw320dp)-landscape-2
step to create activity_main(sw320dp)-landscape-2

If you follow the above steps, you will able to create your all screen type size. Now we are going to star to design the responsive design by using below code.

Step 3 : Open Main XML Layout for create portrait layout

Now go to res folder and open activity_main.xml and paste the bellow code. This below code is responsible to creating the portrait layout.

  • activity_main.xml (sw320dp)
  • activity_main.xml (sw480dp)
  • activity_main.xml (sw600dp)
  • activity_main.xml (sw720dp)

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

Step 4 : Open Main XML Layout for create landscape layout

Again go to res folder and open activity_main.xml and paste the bellow code. This below code is responsible to creating the landscape layout.

  • activity_main.xml (sw320dp-land)
  • activity_main.xml (sw480dp-land)
  • activity_main.xml (sw600dp-land)
  • activity_main.xml (sw720dp-land)
<?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>

Congratulations, all steps are done, now let’s run and test the application.

How to Support Different Screen Size in Android (Portrait)
How to Support Different Screen Size in Android (Portrait)
How to Support Different Screen Size in Android (landscape)
How to Support Different Screen Size in Android (landscape)
You May Also Like:

Feel free to comment and share the post with other developers. Happy Learning 🙂

Leave a Reply