Landscape screen for custom android phone

Question

I'm using my Android phone (Xiaomi A2 Lite, 5.84 inches, 1080 x 2280, which is even bigger than Nexus 5) for app development. I have landscape layouts for every layout I have, and I used ConstraintLayouts for all of the elements inside.

However when testing landscape mode on my phone, the texts and images are not displayed as correctly as in Android Studio :(

Are there any solutions for this? Can I add my own resolutions / devices into the device list?

This is how it should look

This is how it displays

Code of the XML landscape file

<?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"
    tools:context="com.example.ducnguyen.miniexplorer.MainMenu">

    <TextView
        android:id="@+id/textView11"
        android:layout_width="150dp"
        android:layout_height="42dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="@string/main_menu_title"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@string/main_menu_title" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="94dp"
        android:layout_height="93dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:onClick="gotoReadingScreen"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView4"
        app:layout_constraintHorizontal_bias="0.455"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toBottomOf="@+id/textView11"
        app:layout_constraintVertical_bias="0.092"
        app:srcCompat="@drawable/forest" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="97dp"
        android:layout_height="90dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="48dp"
        android:layout_marginBottom="8dp"
        android:onClick="gotoExplorerScreen"
        app:layout_constraintBottom_toTopOf="@+id/textView13"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.756"
        app:srcCompat="@drawable/car" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="96dp"
        android:layout_height="76dp"
        android:layout_marginStart="68dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="192dp"
        android:onClick="gotoSettingScreen"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView4"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        app:srcCompat="@drawable/settings" />

    <ImageView
        android:id="@+id/imageView10"

        android:layout_width="58dp"
        android:layout_height="65dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="56dp"
        android:layout_marginBottom="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.551"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/phonecall" />

    <ImageView
        android:id="@+id/imageView12"
        android:onClick="LogOut"
        android:layout_width="47dp"
        android:layout_height="101dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="48dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.879"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        app:srcCompat="@drawable/logout" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="152dp"
        android:layout_height="27dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:onClick="gotoReadingScreen"
        android:text="@string/menu_reading"
        app:layout_constraintBottom_toTopOf="@+id/imageView10"
        app:layout_constraintEnd_toStartOf="@+id/textView13"
        app:layout_constraintStart_toEndOf="@+id/textView14"
        app:layout_constraintTop_toBottomOf="@+id/imageView3"
        app:layout_constraintVertical_bias="1.0" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="184dp"
        android:layout_marginEnd="8dp"
        android:onClick="gotoExplorerScreen"
        android:text="@string/menu_explorer_status"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.891"
        app:layout_constraintStart_toEndOf="@+id/textView14"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView14"
        android:layout_width="66dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:onClick="gotoSettingScreen"
        android:text="@string/menu_settings"
        android:textSize="15sp"
        app:layout_constraintBottom_toTopOf="@+id/imageView11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.147"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView5"
        app:layout_constraintVertical_bias="1.0" />

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/menu_live_support"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView10"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/textView16"
        android:layout_width="wrap_content"
        android:layout_height="23dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:onClick="gotoAboutUsScreen"
        android:text="@string/menu_about_us"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView15"
        app:layout_constraintHorizontal_bias="0.454"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView11"
        app:layout_constraintVertical_bias="0.333" />

    <TextView
        android:id="@+id/textView17"
        android:layout_width="69dp"
        android:layout_height="24dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:onClick="gotoLoginScreen"
        android:text="@string/logout"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.709"
        app:layout_constraintStart_toEndOf="@+id/textView15"
        app:layout_constraintTop_toBottomOf="@+id/imageView12"
        app:layout_constraintVertical_bias="0.0" />

    <ImageView
        android:id="@+id/imageView11"
        android:layout_width="61dp"
        android:layout_height="65dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="76dp"
        android:layout_marginEnd="8dp"
        android:onClick="gotoAboutUsScreen"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.155"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView5"
        app:srcCompat="@drawable/question" />

</android.support.constraint.ConstraintLayout>

can you post some screenshot and and code please – No Name Nov 28 '18 at 04:48 — No Name, Nov 28 '18 at 04:48

score 0 · Answer 1 · answered Nov 28 '18 at 06:40

try this sample layout. It works in Mi A2 device

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
     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"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     tools:context=".MainActivity"
     android:background="#212c3d">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView11"
        android:layout_width="150dp"
        android:layout_height="42dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Main Menu"
        android:textSize="30sp"
        android:textColor="#FFF"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3"
        android:layout_margin="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.551"
            app:layout_constraintStart_toStartOf="parent">
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/icon_setting" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings"
                android:textColor="#FFF" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/icon_setting"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings"
                android:textColor="#FFF"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/icon_setting"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings"
                android:textColor="#FFF"/>
        </LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3"
        android:layout_margin="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/icon_setting" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings"
                android:textColor="#FFF" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/icon_setting"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings"
                android:textColor="#FFF"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/icon_setting"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings"
                android:textColor="#FFF"/>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Sample Screenshot

Landscape screen for custom android phone

1 Answers1