Making layout works on all Android devices with fixed dimensions

Amer Anajjem :

I am facing trouble of getting my layouts works on all Android devices with the same dimensions. I noticed that every time a friend installs my app, the Buttons and TextViews are changing their initial positions, going up or down some times or making the text inside of it wrapping instead of display it all ( i will attach some code of one of the layouts as an example ). I need some good documentation and/or tutorials for the best layout designs.

Layout example:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/dashboardsec"
    tools:context=".main.DashboardActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#009B3232"
        android:orientation="vertical"
        android:paddingEnd="5dp"
        android:textAlignment="textEnd">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="66dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginStart="33dp"
            android:layout_marginTop="40dp"
            android:layout_marginEnd="40dp"
            android:background="@color/common_google_signin_btn_text_dark_disabled"
            android:fontFamily="sans-serif-thin"
            android:gravity="center"
            android:text="مرحباً بك  "
            android:textAlignment="textStart"
            android:textColor="@color/orange1"
            android:textSize="24sp" />

        <Button
            android:id="@+id/newsBtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  الاخبار   "
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textColorHint="#00AF2B2B"
            android:textSize="22sp" />

        <Button
            android:id="@+id/formatsBtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  فورمات جاهزة و كتب رسمية"
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/storagebtN"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  فيديو  و صور "
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/exchangeBtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  طلبات استبدال المراكز "
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/askBtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  الخرائط و الصرافات الالية "
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/phonesBtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  فهرست الهواتف"
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/websitsbtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  صفحات تابعة لللجنة"
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/profilebtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:shadowColor="@color/common_google_signin_btn_text_dark_focused"
            android:text="  أدوات مفيدة coming soon"
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/button1"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  السوق  coming soon"
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/usersaccount"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  التحكم بالاعضاء"
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/sendimalsBtn"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="  ارسال بريد للادارة"
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />

        <Button
            android:id="@+id/button"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="#009B3232"
            android:fontFamily="sans-serif-thin"
            android:text="   تسجيل خروج "
            android:textAlignment="textStart"
            android:textColor="#DCDFE9"
            android:textSize="22sp" />


    </LinearLayout>

</ScrollView>

Tamir Abutbul :

This is happening because you are using fixed size dimensions on your views, and because different phones got different screen sizes you will see this difference.

As mentioned in the comment section- you can use ConstraintLayout to create one layout to support all different screen sizes.

Here is an example of your wanted layout (similar in the look of it any way):

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layoutDirection="ltr"
  android:orientation="vertical">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button7"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button6" />

    <Button
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button5" />

    <Button
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button7" />

    <Button
        android:id="@+id/button9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button8" />

    <Button
        android:id="@+id/button10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button9" />

    <Button
        android:id="@+id/button11"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button12"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button10" />

    <Button
        android:id="@+id/button12"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button13"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button11" />

    <Button
        android:id="@+id/button13"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button14"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button12" />

    <Button
        android:id="@+id/button14"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button15"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button13" />

    <Button
        android:id="@+id/button15"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button16"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button14" />

    <Button
        android:id="@+id/button16"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button17"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button15" />

    <Button
        android:id="@+id/button17"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button18"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button16" />

    <Button
        android:id="@+id/button18"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button17" />


    </android.support.constraint.ConstraintLayout>

</ScrollView>