Android layout: how to better manage different screen sizes?

Question

I work on an app that containing some error screen that basically share the same structure:

a AppCompatImageView: it contains an image that represent the encountered error, this image can be in "full width" mode or not
a TextView: it contains the explanation text related to the error, and takes generally 2 or 3 lines
a Button: it allows the user to retry or do another action after the error

In the most of cases, the screen is well displayed. However, there are some problems for "older" devices (having a 1024x768 resolution or less).

In add, the error can be displayed in a tabbed page, so some space is "lost" to display the title and the tab bar.

To manage the "full screen" width image, I have to use a ConstraintLayout like this:

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_white">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/ErrorImageView"
        app:srcCompat="@drawable/error"
        android:layout_width="0dp" android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H, 400:300"
        android:scaleType="fitCenter" android:cropToPadding="false" android:adjustViewBounds="true"
        android:layout_centerHorizontal="true" android:gravity="center_horizontal"
        app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="20dp"
        app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/ErrorTextView"
        android:layout_width="0dp" android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" android:gravity="center_horizontal"
        app:layout_constraintTop_toBottomOf="@id/ErrorImageView" android:layout_marginTop="15dp"
        app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="20dp"
        app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="20dp"
        style="@style/Regular24Marine" />

    <Button
        android:id="@+id/RetryButton"
        android:layout_width="200dp" android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ErrorTextView" android:layout_marginTop="15dp"
        style="@style/WhiteButton" />

</android.support.constraint.ConstraintLayout>

To manage the smaller devices, I've tried 2 things:

I've tried to create a cloned layout in layout-hdpi: but this layout is used for bigger devices too.

Is there a way to specify a layout for smaller devices only? or do I need to duplicate layout for each configuration (xhpdi, xxhdpi, ...)

I've also tried to reduce margins and define autosizeTextType with autoSizePresetSizes: but in this case, the text of the TextView is "truncated", the height of the TextView is smaller than with a fixed text size.

Is this normal? Do I forget something?

_problems for "older" devices (having a 1024x768 resolution or less)...._ Do those older devices really matter to your business? — B001ᛦ, Apr 30 '19 at 14:39
Yes, the app must be used in a lost of countries (Germany, Greece, Argentina, Romania, ...): so it's possible that some "older" devices can be used. — Gold.strike, Apr 30 '19 at 14:50
Hi @JuniorJiang-MSFT, not yet. We work on other tasks and we will come back on this issue in the following weeks. — Gold.strike, May 07 '19 at 08:59
@Gold.strike Okey, I have updated an answer , hope be helpful for you.If have time, you can check it. — Junior Jiang, May 07 '19 at 09:07
Thanks for your feedback, I will come back to you as soon we've tested your solution. — Gold.strike, May 10 '19 at 09:01

score 0 · Answer 1 · answered May 01 '19 at 03:32

Have a try this , call in OnCreate method in Activity.cs:

setCustomDensity(this, this.Application);

The following assumes that the design screen width is 360dp and is adapted to the wide dimension.

Then the adapted density = device real width (unit px) / 360, then we only need to modify our calculated density in the system, the code is implemented as follows:

private static void setCustomDensity(Activity activity, Application application)
{
    DisplayMetrics appDisplaymetrics = application.Resources.DisplayMetrics;
    float targetDensity = appDisplaymetrics.WidthPixels / 360;
    int targetDensityDpi = (int)(160 * targetDensity);

    appDisplaymetrics.Density = appDisplaymetrics.ScaledDensity = targetDensity;
    appDisplaymetrics.DensityDpi = (Android.Util.DisplayMetricsDensity)targetDensityDpi;

    DisplayMetrics activityDisplayMetrics = activity.Resources.DisplayMetrics;
    activityDisplayMetrics.Density = activityDisplayMetrics.ScaledDensity = targetDensity;
    activityDisplayMetrics.DensityDpi = (Android.Util.DisplayMetricsDensity)targetDensityDpi;
}

You can modify 360dp to suitable value which you want in your projecrt.

Android layout: how to better manage different screen sizes?

1 Answers1