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>
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.
– Joao Victor Menom