My layouts aren't scaling properly on low dpi devices

Question

I made an android app with constrain layout, and the layout doesn't scale properly even thought I've used SP and DP as units.

I double checked all values and they all have dp and sp, I tried it on the following emulators 5.1", pixel, pixel 10" tablet, pixel 2, pixel 2 XL and the nexus 7

my layouts actually work fine on these, but on the nexus 4 with a smaller dpi it gets ruined.

Edit: even with the cardview constrains set to match_parent, it still doesn't fix it, nothing happens.

as for physical devices, it works fine on my phone with a high dpi of 499, but my two other phones without high dpi, it gets ruined.

<?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=".MainActivity"
    android:background="@drawable/withoutgrid">
    <!--grid layout to hold two cards-->
    <android.support.v7.widget.GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:paddingBottom="40dp"
        app:columnCount="2"
        app:columnOrderPreserved="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.755"
        app:rowCount="1">
        <!--first card layout-->
        <android.support.v7.widget.CardView
            android:id="@+id/cardView1"
            android:layout_width="170dp"
            android:layout_height="290dp"
            android:layout_margin="12dp"
            android:onClick="sPlayer"
            app:cardBackgroundColor="@color/backgroundColor"
            app:cardCornerRadius="30dp"
            app:cardElevation="10dp"
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <ImageButton
                android:id="@+id/singleplayer"
                android:layout_width="150dp"
                android:layout_height="170dp"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@null"
                android:onClick="sPlayer"
                android:paddingBottom="20dp"
                android:scaleType="fitXY"
                android:src="@drawable/robotfinal2" />

            <TextView
                android:id="@+id/singleplayertext"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="bottom|center_horizontal"
                android:onClick="sPlayer"
                android:paddingBottom="16dp"
                android:text="Single Player"
                android:textColor="@android:color/white"
                android:textSize="24sp" />
        </android.support.v7.widget.CardView>

     </android.support.v7.widget.CardView>
    <!--copy paste for second card layout-->

    </android.support.v7.widget.GridLayout>

here are some screenshots from 2 same devices one with custom high dpi and another with stock dpi

high dpi low dpi

Emulator

looks like you providing hard coded dp values which causing problem on small devices so you can opt for using dimen file as per device dpi check out this https://stackoverflow.com/questions/32860815/how-to-define-dimens-xml-for-every-different-screen-size-in-android — Pavan, Feb 07 '19 at 10:51

score 0 · Accepted Answer · answered Feb 07 '19 at 10:53

0

One of the issues here is that you are testing the layout on small screen sizes such as the Nexus 4 which is about 4.7 inches.

You probably did not develop the application with the initial design focused on such a small screen size.

Consider creating alternate layouts for different screen sizes.

Supporting different screen sizes would help.

Check this link out: Support different screen sizes

answered Feb 07 '19 at 10:53

Lemuel Ogbunude

184
3
16

hmm, I get it, but my grid layout's width is set to match_parent, so it should be the grid layout which is in fault right? how do I fix the cardView dynamically? even with match_parent nothing happens on small screens. – Shashank Setty Feb 07 '19 at 11:19

score 0 · Answer 2 · answered Feb 07 '19 at 11:24

I have used Guideline in the center of the screen to make this go easier and it works for me, try to use 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/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    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_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/button5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:srcCompat="@android:drawable/ic_menu_report_image" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="12dp"
    app:layout_constraintBottom_toTopOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@android:drawable/ic_menu_report_image" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

</android.support.constraint.ConstraintLayout>

My layouts aren't scaling properly on low dpi devices

2 Answers2

Linked