Support different screen sizes in Android Example

Hi Coders, In this post, we will learn how we can essentially support different screen sizes in Android example, that is a question if you test any app on a tablet and a normal phone the layouts will look differently and If we rotate this phone, so layouts are stacked vertically instead they are stacked horizontally.

Support different screen sizes in Android with the example (screen sizes for responsive design)
support different screen sizes in Android with example (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 a specific layout but with this layout, I can just show you pretty well, which concepts you need to know to support multiple screen sizes or support different Screen Sizes in Android.

Android UI Design: Support different screen sizes in Android with example (A responsive design layout)

• First point:

When it comes to building a responsive design layout so you need to use Constraint Layout if there is only one thing you learned from this post. Always try to use a Constraint Layout, wherever possible and it’s 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 multiple reasons on the one hand just to have a flat layout hierarchy.

If you use Constraint Layout, so you don’t need to use nested layouts, which will make your app better performance 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 and you should also avoid hard-coding of width and height of a view like 100dp or 200dp so on because every device supports different screen sizes. In this post, I’ll show you how all things work, so let’s jump right into the project.

Note: we don’t need any dependencies.

Let’s start building a Responsive layout design

Follow the below steps.

Step 1: Create A Project To Support Different Screen Sizes

  • 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

In the above image, you’ll see all the different layouts created with different screen sizes. Now we’ll start to create the portrait and landscape screens 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’ll create screens for the 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’ll be able to create all screen type sizes. Now we’re going to start to design the responsive design by using the below code.

Step 3: Open Main XML Layout to create a portrait layout

Now go to the res folder and open activity_main.xml and paste the below code. The below code is responsible for 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 to create a landscape layout

Again go to res folder and open activity_main.xml and paste the below code. The below code is responsible for 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 Sizes in Android (Portrait)
How to Support Different Screen Size in Android (landscape)
How to Support Different Screen Sizes in Android (landscape)
You May Also Like:

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

Techpass Master

Techpass Master is a website for free Android App Development, Java, Kotlin, Jetpack Compose, Firebase, & other tech tips & tricks tutorials. We focus on posting the article at Android App Development. Apart from App development tutorials, we also occasionally post other technology tips and tricks, which can be very helpful for you. Stay tuned with Techpass Master for more updates.
View All Articles

Leave a Reply

Your email address will not be published.