My layout works good for one screensize, how to make it suitable for all screen sizes in Android Studio 3.4.2

Question

enter image description hereI have created a layout for Maths Quiz where on the first screen a grid layout with options like Addition, Subtraction is there provided as buttons. Below that comes "Coins Earned" TextView. Above the grid layout there in the name of the app.

On selection of the type of quiz, question generates. On this screen, App name is on top. Below that there is "Timer" " Level" "Score" in the same line. Below them, there is an answer grid of 2*2 with 4 options.

Below answer grid, there is a resultTextView showing whether the qn is right or wrong. Below which there are textview showing points for that quiz (runTimeTextView).

After the timer is over, there is an endResultTextView giving info about the quiz accompanied by playAgainButton.

The layout works fine through USB debugging on my phone but fails on smaller screen size. I have chosen smallest phone on Android Studio. Need help with this version of Android Studio 3.4.2.

I have tried three options:

1. Hardcoding the sizes for layout and manually changing their position

2. Putting constraints with top of a view attached to the bottom of the view above that and bottom of a view to parent.

3. Putting constraints with top of a view attached to the bottom of the view above that and constraining bottom of the view to the top of the view below that.

   <TextView
       android:id="@+id/nameTextView"
       android:layout_width="341dp"
       android:layout_height="70dp"
       android:layout_marginStart="35dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="35dp"
       android:layout_marginBottom="20dp"
       android:fontFamily="@font/allerta_stencil"
       android:text="MathGames[enter image description here][1]"
       android:textAlignment="center"
       android:textColor="#FF6D00"
       android:textSize="40sp"
       app:layout_constraintBottom_toTopOf="@+id/levelTextView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="0.5"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
   
   <TextView
       android:id="@+id/levelTextView"
       android:layout_width="85dp"
       android:layout_height="31dp"
       android:layout_marginStart="30dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="30dp"
       android:layout_marginBottom="10dp"
       android:fontFamily="@font/aref_ruqaa_bold"
       android:text="Level 25"
       android:textAllCaps="true"
       android:textColor="#FF5252"
       android:textSize="20sp"
       android:textStyle="bold"
       android:visibility="invisible"
       app:layout_constraintBottom_toTopOf="@+id/questionTextView"
       app:layout_constraintEnd_toStartOf="@+id/scoreTextView"
       app:layout_constraintHorizontal_bias="0.5"
       app:layout_constraintStart_toEndOf="@+id/timerTextView"
       app:layout_constraintTop_toBottomOf="@+id/nameTextView"
       app:layout_constraintVertical_bias="0.5" />
   
   <TextView
       android:id="@+id/timerTextView"
       android:layout_width="85dp"
       android:layout_height="35dp"
       android:layout_marginLeft="10dp"
       android:layout_marginTop="20dp"
       android:layout_marginRight="30dp"
       android:layout_marginBottom="20dp"
       android:fontFamily="@font/alegreya_sans_sc_medium"
       android:textColor="#FF9100"
       android:textSize="20sp"
       app:layout_constraintBottom_toTopOf="@+id/questionTextView"
       app:layout_constraintHorizontal_bias="0.5"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toLeftOf="@+id/levelTextView"
       app:layout_constraintTop_toBottomOf="@id/nameTextView"
       app:layout_constraintVertical_bias="0.5" />
   
   <TextView
       android:id="@+id/questionTextView"
       android:layout_width="354dp"
       android:layout_height="56dp"
       android:layout_marginStart="30dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="30dp"
       android:layout_marginBottom="20dp"
       android:fontFamily="@font/alegreya_sans_sc_medium"
       android:textColor="#00E9FF"
       android:textSize="25sp"
       app:layout_constraintBottom_toTopOf="@+id/answerGrid"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="0.0"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/levelTextView" />
   
   <TextView
       android:id="@+id/scoreTextView"
       android:layout_width="104dp"
       android:layout_height="35dp"
       android:layout_marginStart="30dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="10dp"
       android:layout_marginBottom="20dp"
       android:fontFamily="@font/alegreya_sans_sc_medium"
       android:textColor="#FF9100"
       android:textSize="25sp"
       app:layout_constraintBottom_toTopOf="@+id/questionTextView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toEndOf="@+id/levelTextView"
       app:layout_constraintTop_toBottomOf="@id/nameTextView" />
   
   <androidx.gridlayout.widget.GridLayout 
       android:id="@+id/answerGrid"
       android:layout_width="369dp"
       android:layout_height="234dp"
       android:layout_marginStart="28dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="28dp"
       android:layout_marginBottom="20dp"
       android:visibility="visible"
       app:layout_constraintBottom_toTopOf="@+id/resultTextView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/questionTextView">
   
   
       <Button
           android:id="@+id/optionA"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#86CC4B"
           android:fontFamily="@font/aldrich"
           android:includeFontPadding="true"
           android:onClick="checkAnswer"
           android:tag="0"
           android:text="Button"
           android:textColor="#FFFFFF"
           android:textSize="25sp"
           android:visibility="invisible"
           app:layout_column="0"
           app:layout_columnWeight="1"
           app:layout_gravity="fill"
           app:layout_row="0"
           app:layout_rowWeight="1" />
   
       <Button
           android:id="@+id/optionB"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#D52A2A"
           android:fontFamily="@font/aldrich"
           android:includeFontPadding="true"
           android:onClick="checkAnswer"
           android:tag="1"
           android:text="Button"
           android:textColor="#FFFFFF"
           android:textSize="25sp"
           android:visibility="invisible"
           app:layout_column="0"
           app:layout_columnWeight="1"
           app:layout_gravity="fill"
           app:layout_row="1"
           app:layout_rowWeight="1" />
   
       <Button
           android:id="@+id/optionC"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#26B8B8"
           android:fontFamily="@font/aldrich"
           android:includeFontPadding="true"
           android:onClick="checkAnswer"
           android:tag="2"
           android:text="Button"
           android:textColor="#FFFFFF"
           android:textSize="25sp"
           android:visibility="invisible"
           app:layout_column="1"
           app:layout_columnWeight="1"
           app:layout_gravity="fill"
           app:layout_row="0"
           app:layout_rowWeight="1" />
   
       <Button
           android:id="@+id/optionD"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#D6D606"
           android:fontFamily="@font/aldrich"
           android:includeFontPadding="true"
           android:onClick="checkAnswer"
           android:tag="3"
           android:text="Button"
           android:textColor="#FFFFFF"
           android:textSize="25sp"
           android:visibility="invisible"
           app:layout_column="1"
           app:layout_columnWeight="1"
           app:layout_gravity="fill"
           app:layout_row="1"
           app:layout_rowWeight="1" />
   
   
   </androidx.gridlayout.widget.GridLayout>
   
   <androidx.gridlayout.widget.GridLayout      /* I am facing biggest problem
       android:id="@+id/gridLayout"                with this layout when not 
       android:layout_width="369dp"                 hardcoding the sizes*/ 
       android:layout_height="445dp"
       android:layout_marginStart="10dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="10dp"
       android:layout_marginBottom="20dp"
       android:visibility="visible"
       app:layout_constraintBottom_toTopOf="@+id/coinTextView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/nameTextView">
   
       <Button
           android:id="@+id/startAddition"
           android:layout_width="359dp"
           android:layout_height="80dp"
           android:background="#5719E0"
           android:fadingEdge="horizontal"
           android:fontFamily="@font/bubblegum_sans"
           android:onClick="startQuiz"
           android:tag="0"
           android:text="Addition "
           android:textAllCaps="false"
           android:textColor="#FCF6F6"
           android:textSize="25sp"
           android:textStyle="italic"
           android:visibility="visible"
           app:layout_column="0"
           app:layout_gravity="fill"
           app:layout_row="0"
           app:layout_rowWeight="1" />
   
       <Button
           android:id="@+id/startSubtraction"
           android:layout_width="359dp"
           android:layout_height="80dp"
           android:background="#B80909"
           android:fontFamily="@font/bubblegum_sans"
           android:onClick="startQuiz"
           android:tag="1"
           android:text="Subtraction"
           android:textAllCaps="false"
           android:textColor="#FCF6F6"
           android:textSize="25sp"
           android:textStyle="italic"
           android:visibility="visible"
           app:layout_column="0"
           app:layout_gravity="fill"
           app:layout_row="1"
           app:layout_rowWeight="1" />
   
       <Button
           android:id="@+id/startMultiplication"
           android:layout_width="359dp"
           android:layout_height="80dp"
           android:background="#60A80B"
           android:fontFamily="@font/bubblegum_sans"
           android:onClick="startQuiz"
           android:tag="2"
           android:text="Multiplication"
           android:textAllCaps="false"
           android:textColor="#FCF6F6"
           android:textSize="25sp"
           android:textStyle="italic"
           android:visibility="visible"
           app:layout_column="0"
           app:layout_gravity="fill"
           app:layout_row="2"
           app:layout_rowWeight="1" />
   
       <Button
           android:id="@+id/startDivision"
           android:layout_width="359dp"
           android:layout_height="80dp"
           android:background="#E75222"
           android:fontFamily="@font/bubblegum_sans"
           android:onClick="startQuiz"
           android:tag="3"
           android:text="Division"
           android:textAllCaps="false"
           android:textColor="#FCF6F6"
           android:textSize="25sp"
           android:textStyle="italic"
           android:visibility="visible"
           app:layout_column="0"
           app:layout_gravity="fill"
           app:layout_row="3"
           app:layout_rowWeight="1" />
   
       <Button
           android:id="@+id/startSquare"
           android:layout_width="359dp"
           android:layout_height="80dp"
           android:background="#776120"
           android:fontFamily="@font/bubblegum_sans"
           android:onClick="startQuiz"
           android:tag="4"
           android:text="Square"
           android:textAllCaps="false"
           android:textColor="#FCF6F6"
           android:textSize="25sp"
           android:textStyle="italic"
           android:visibility="visible"
           app:layout_column="0"
           app:layout_gravity="fill"
           app:layout_row="4"
           app:layout_rowWeight="1" />
   </androidx.gridlayout.widget.GridLayout>
   
   <TextView
       android:id="@+id/resultTextView"
       android:layout_width="0dp"
       android:layout_height="0dp"
       android:layout_marginStart="100dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="100dp"
       android:layout_marginBottom="10dp"
       android:textAlignment="center"
       android:textColor="#0BFFC2"
       android:textDirection="ltr"
       android:textSize="25sp"
       android:visibility="invisible"
       app:layout_constraintBottom_toTopOf="@+id/runTimeTextView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="0.5"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/answerGrid"
       app:layout_constraintVertical_bias="0.5" />
   
   <TextView
       android:id="@+id/endResultTextView"
       android:layout_width="0dp"
       android:layout_height="0dp"
       android:layout_marginStart="20dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="20dp"
       android:layout_marginBottom="20dp"
       android:background="#EED382"
       android:fontFamily="@font/walter_turncoat"
       android:padding="10dp"
       android:paddingStart="10dp"
       android:paddingLeft="10dp"
       android:textAppearance="@style/TextAppearance.AppCompat.Display4"
       android:textColor="#0A0A0A"
       android:textSize="20sp"
       android:textStyle="bold|italic"
       android:visibility="invisible"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@id/nameTextView" />
   
   <Button
       android:id="@+id/playAgainButton"
       android:layout_width="216dp"
       android:layout_height="50dp"
       android:layout_marginStart="40dp"
       android:layout_marginEnd="40dp"
       android:layout_marginBottom="20dp"
       android:background="#E65100"
       android:fontFamily="@font/atomic_age"
       android:onClick="getMenu"
       android:text="Play Again"
       android:textColor="#FFD600"
       android:textSize="20sp"
       android:visibility="invisible"
       app:layout_constraintBottom_toBottomOf="@id/endResultTextView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="0.65"
       app:layout_constraintStart_toStartOf="parent" />
   
   <TextView
       android:id="@+id/runTimeTextView"
       android:layout_width="0dp"
       android:layout_height="0dp"
       android:layout_marginStart="100dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="100dp"
       android:layout_marginBottom="20dp"
       android:fontFamily="@font/kite_one"
       android:textAlignment="center"
       android:textAppearance="@style/TextAppearance.AppCompat.Large"
       android:textColor="#F3D25E"
       android:textSize="20sp"
       android:textStyle="bold"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/resultTextView"
       app:layout_constraintVertical_bias="0.5" />
   
   <TextView
       android:id="@+id/coinTextView"
       android:layout_width="286dp"
       android:layout_height="62dp"
       android:layout_marginStart="60dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="60dp"
       android:layout_marginBottom="30dp"
       android:background="#000000"
       android:fontFamily="@font/playball"
       android:textColor="#FFEA00"
       android:textSize="30sp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="0.5"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/gridLayout"
       app:layout_constraintVertical_bias="0.5" />
   

I want the layout match as per the size of the device.

Have posted the image. At the top there is TextView with game name. Have replaced the text with MathGames as actual name of the App is yet to be disclosed.

Answer 1

different phones have different screen sizes.

Your problem is that you're using absolute width/height which vary from a device to another, If you want a better approach, perhaps try making the width a ratio from the screen width and same for the height instead of making it an absolute number. there are many ways, You can get the screen width/height programtically and resize your views so that they take a ratio of it (using code).

e.g. If you want your view to take up half of the view port, and leave a quarter on the right/left, You need to get the screen width, center your item and set it's width to screen width/2.

Just follow this and use ratios (division operator is your friend) and you can achieve what you want.

Answer 2

Your main problem is that you are using fixed size for your views dimensions.

Why?

Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

---

How to fix:

You can use those attributes on your views:

  app:layout_constraintWidth_percent="0.x"
  app:layout_constraintHeight_percent="0.x"

This will make their size relative to the screen size in percents.

With those tools and maybe some Guidelines you can creat your wanted responsive layout.

For example, this layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="36"
    android:background="#29C540"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView4"
    app:layout_constraintTop_toTopOf="@+id/guideline" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="33"
    android:background="#D5CB14"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintBottom_toBottomOf="@+id/button4"
    app:layout_constraintEnd_toEndOf="@+id/textView4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button4"
    app:layout_constraintTop_toTopOf="@+id/button4" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="37"
    android:background="#276EA7"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toEndOf="@+id/textView4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="@+id/guideline" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="38"
    android:background="#f31"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView4"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Level 1"
    app:layout_constraintEnd_toEndOf="@+id/textView3"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView3"
    app:layout_constraintWidth_percent=".9" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Math games"
    android:background="#81000000"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent=".9" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Add those numbers 28 + 10"
    android:gravity="center"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="@+id/textView6"
    app:layout_constraintStart_toStartOf="@+id/textView5"
    app:layout_constraintTop_toBottomOf="@+id/textView5" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:text="28 s"
    android:background="#81000000"
    android:textSize="32sp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintStart_toStartOf="@+id/textView7"
    app:layout_constraintTop_toBottomOf="@+id/textView7" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:text="0/0"
    android:background="#81000000"
    android:textSize="32sp"
    app:layout_constraintEnd_toEndOf="@+id/textView7"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintTop_toBottomOf="@+id/textView7" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:alpha=".45"
    app:layout_constraintGuide_percent=".5"
    android:orientation="horizontal"
    />
</android.support.constraint.ConstraintLayout>

Will look like this:

This is just an example but this is the general way you would like to build your layouts - one layout that will be responsive to all screen sizes.