Adjust layout to different resolution types

Asked

Viewed 107 times

0

I am creating my application and for testing I was using the virtual device Pixel XL that has the resolution 1440x2560, but today I went to test the application on another device (Nexus - 720X1280) and to my surprise the layout did not reset. Below is a comparison, the right is the Pixel XL and the left the Nexus:

How do I auto-scale the layout according to the resolution of the devices? I created a layout directory variant for the large and normal sizes, but it was a bit confusing for me since the large encompasses several devices with various resolutions, the same thing normal. Would the problem be in the layout itself? Nor would I know how to create a fully responsive layout. Follow the XML of the layout in question:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="#fcfcfc"
android:gravity="center">
<LinearLayout
    android:clipToPadding="false"
    android:gravity="center"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
        android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:layout_width="330dp"
        android:layout_height="150dp"
        android:layout_margin="5dp">
        <LinearLayout

            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:layout_marginTop="10dp"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/circulo"
                android:src="@drawable/ic_receita_branco1"
                android:padding="13dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_marginTop="10dp"
                android:text="@string/dashboard_receita"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgray"
                android:layout_margin="5dp"/>
            <TextView
                android:id="@+id/tvReceita"
                android:layout_width="wrap_content"
                android:layout_height="37dp"
                android:gravity="center"
                android:textSize="12sp"
                android:text="@string/dashboard_receita_desc"
                android:padding="1dp"
                android:textColor="@android:color/darker_gray"/>

        </LinearLayout>
    </android.support.v7.widget.CardView>


</LinearLayout>

<LinearLayout
    android:clipToPadding="false"
    android:gravity="center"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
        android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_margin="5dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:layout_marginTop="10dp"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/circulo"
                android:src="@drawable/ic_pedidos_branco"
                android:padding="13dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_marginTop="10dp"
                android:text="@string/dashboard_pedidos"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgray"
                android:layout_margin="5dp"/>
            <TextView
                android:id="@+id/tvPedidos"
                android:layout_width="wrap_content"
                android:layout_height="37dp"
                android:gravity="center"
                android:text="@string/dashboard_pedidos_desc"
                android:textSize="12sp"
                android:padding="1dp"
                android:textColor="@android:color/darker_gray"/>

        </LinearLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView
        android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_margin="5dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:layout_marginTop="10dp"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/circulo"
                android:src="@drawable/ic_clientes_branco"
                android:padding="13dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_marginTop="10dp"
                android:text="@string/dashboard_clientes"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgray"
                android:layout_margin="5dp"/>
            <TextView
                android:id="@+id/tvClientes"
                android:layout_width="wrap_content"
                android:layout_height="37dp"
                android:gravity="center"
                android:textSize="12sp"
                android:text="@string/dashboard_clientes_desc"
                android:padding="1dp"
                android:textColor="@android:color/darker_gray"/>

        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>
<LinearLayout
    android:clipToPadding="false"
    android:gravity="center"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
        android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_margin="5dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:layout_marginTop="10dp"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/circulo"
                android:src="@drawable/ic_estoque_branco"
                android:padding="13dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_marginTop="10dp"
                android:text="@string/dashboard_estoque"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgray"
                android:layout_margin="5dp"/>

            <TextView
                android:id="@+id/tvEstoque"
                android:layout_width="wrap_content"
                android:layout_height="37dp"
                android:gravity="center"
                android:padding="1dp"
                android:text="@string/dashboard_estoque_desc"
                android:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView
        android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_margin="5dp">

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

            <ImageView
                android:layout_marginTop="10dp"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/circulo"
                android:padding="13dp"
                android:src="@drawable/ic_funcionarios_branco" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="@string/dashboard_funcionarios"
                android:textStyle="bold" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_margin="5dp"
                android:background="@color/lightgray" />

            <TextView
                android:id="@+id/tvFuncionarios"
                android:layout_width="wrap_content"
                android:layout_height="37dp"
                android:gravity="center"
                android:textSize="12sp"

                android:padding="1dp"
                android:text="@string/dashboard_funcionarios_desc"
                android:textColor="@android:color/darker_gray" />

        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

android

1 answer

0


One method is to create layout files for each type of resolution. for example: activity_main-hdpi

activity_main-xhdpi

or

activity_main-sw320

activity_main-sw600

activity_main-sw1024

https://developer.android.com/training/multiscreen/screensizes

Another way is, use percentages to create card sizes. 

android:layout_width="160dp"
android:layout_height="0dp"
android:layout_weight=".25"

This object will be 25% the size of the parent.

https://developer.android.com/reference/android/support/percent/PercentRelativeLayout

It depends a lot on the project there are other approches, however, I find these two the best.

  • I was looking over these folders layout-sw320, layout-sw600... But for me it worked even with layout-sw320-mdpi, layout-sw320-hdpi, layout-sw320-xhdpi... because it makes the layouts much more specific. About the percentage I didn’t know, I’ll take a look.

Browser other questions tagged android

You are not signed in. Login or sign up in order to post.