xml - How we can support different screen sizes like for background images? [Android Studio]

Question

I'm having a problem as am newbie, I want to put my TextViews according to the background image, i did it well, all good when tested app in virtual device, But when i tested it on my real device, TextView is at some other place (slightly downwards) to what I was expecting.

Is there any way to stretch the background image so that our XML code shows same display results on all devices (with different resolutions). I just want same design results as shown on android studio Design tab.

Example :-

i want this result on all devices

am getting this on my real device

Please guys suggest the best way to do so.

My XML Layout code :-

    <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"
        android:background="@drawable/main_bg"
        tools:context=".MainActivity">
    

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="245dp"
        android:text="@string/app_name2"
        android:textColor="@color/colorPrimary"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:text="@string/Admin"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="24dp"
        android:background="@drawable/rounded_box"
        android:backgroundTint="@android:color/white"
        android:elevation="1dp"
        android:ems="10"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:padding="9dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.39" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="19dp"
        android:layout_marginEnd="24dp"
        android:ems="10"
        android:hint="Password"
        android:padding="9dp"
        android:background="@drawable/rounded_box"
        android:backgroundTint="@android:color/white"
        android:elevation="1dp"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />

    <Button
        android:id="@+id/button"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="167dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="156dp"
        android:text="Log In"
        android:background="@drawable/rounded_corners"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />
    </androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

For this ConstraintLayout is a very good choice. how? Let's see

First, You've not provided your layout file completely so I don't know what you're doing.

Now, To position views according to any device, you should resort to scale independent solutions like using bias, setting-up different dimen values as per screen sizes and connecting widgets to each other using Constraints so they don't free float to any position when screen size changes.

• Using Bias and Percent - Try to minimize use of fixed margin values like 20dp, 30dp and use Vertical/Horizontal bias, width_percent, height_percent and 0dp with it. 0dp acts as fill_contraint in ConstraintLayout.

  As I can see in the pictures, you've five widgets except background, One button, Two EditTexts and two TextViews.

  So, constraint button to bottom and top of parent and give it a vertical bias of 0.8 or 0.9.

  As:

  <Button
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintVertical_bias="0.8"
      app:layout_constraintWidth_percent="0.4"
  />
  <!--Vertical bias will place it on 80% height of the screen and width_percent will
  assign it 40% width of the screen. This will remain same in any size of the screen.-->
  

  Now, Constraint Both editTexts to the button using Bottom_toTopOf and give the second one a margin of approx 50dp. The button will always stay on 80% of the screen and both the editText will always stay above the button. And constraint the 'GK Quiz' TextView by giving it a vertical_bias of 0.4/0.45/0.5 (whatever you prefer) and constraint the second textview to its bottom.

  This is how you define a layout that will stay on same place in every screen size.

• Defining custom dimen.xml - For this you can check this question out. If you don't want to mess with custom values, you can resort to two easy libraries - SDP(For layout Size) and SSP(For Text Size) which provide all the custom values which stays same in every screen size. I use these libraries so I know they work well. There's a medium article on these - How to build for different Android screen sizes using a single layout resource file.

• Using Constraints - Remember, the moment you use margins or x/y values to position a widget on screen, you should be aware that they can mess up in any screen size. So, you should always constraints layout with each other to create a tight pack preventing the free flow of the layout elements. By free flow, I mean the different positions on screen in different sizes.

ConstraintLayout is most powerful layout available out there I believe and it has many ways to tackle the issues of different screen sizes. It also supports Animation using its subclass MotionLayout. Read these official docs, you'll learn more.