Multi-device layout display problem

Question

Multi-device layout display problem

Asked 8 years, 10 months ago

Viewed 336 times

2

I’m having trouble putting together a layout.

In emulated it stays the way I want as below:

But in the cell phone is completely disfigured as below:

XML code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/lnl_principal"
    android:background="#ffe7fcff"
    android:weightSum="1">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="185pt"
        android:gravity="center"
        android:id="@+id/lnl_periodo">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="155pt"
            android:layout_height="27pt"
            android:id="@+id/lnl_ftp"
            android:gravity="center">

            <TextView
                android:layout_width="150pt"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:id="@+id/txt_hintftp"
                android:text="@string/lbl_hintftp" />

            <EditText
                android:layout_width="155pt"
                android:layout_height="wrap_content"
                android:id="@+id/edt_ftp"
                android:layout_gravity="center_horizontal"
                android:inputType="text"
                android:textColor="#010101"
                android:singleLine="true"
                android:editable="false" />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="155pt"
            android:layout_height="27pt"
            android:id="@+id/lnl_porta"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:weightSum="1">

            <TextView
                android:layout_width="150pt"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:id="@+id/txt_hintport"
                android:text="@string/lbl_hintport" />

            <EditText
                android:layout_width="155pt"
                android:layout_height="match_parent"
                android:id="@+id/edt_portnumber"
                android:layout_gravity="center_horizontal"
                android:inputType="text"
                android:textColor="#010101"
                android:layout_weight="0.67" />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="155pt"
            android:layout_height="27pt"
            android:id="@+id/lnl_pasta"
            android:gravity="center">

            <TextView
                android:layout_width="150pt"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:id="@+id/txt_hintdir"
                android:text="@string/lbl_hintdir" />

            <EditText
                android:layout_width="155pt"
                android:layout_height="match_parent"
                android:id="@+id/edt_diretorio"
                android:layout_gravity="center_horizontal"
                android:inputType="text"
                android:textColor="#010101"
                android:gravity="center|left" />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="155pt"
            android:layout_height="27pt"
            android:id="@+id/lnl_usuario"
            android:gravity="center">

            <TextView
                android:layout_width="150pt"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:id="@+id/txt_hintuser"
                android:text="@string/lbl_hintuser" />

            <EditText
                android:layout_width="155pt"
                android:layout_height="match_parent"
                android:id="@+id/edt_usuario"
                android:layout_gravity="center_horizontal"
                android:inputType="text"
                android:textColor="#010101"
                android:gravity="center|left" />
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="155pt"
            android:layout_height="27pt"
            android:layout_gravity="center_horizontal"
            android:id="@+id/lnl_senha"
            android:gravity="center">

            <TextView
                android:layout_width="150pt"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:id="@+id/txt_hintpass"
                android:text="@string/lbl_hintpass" />

            <EditText
                android:layout_width="155pt"
                android:layout_height="match_parent"
                android:id="@+id/edt_senha"
                android:layout_gravity="center_horizontal"
                android:inputType="textPassword"
                android:textColor="#010101"
                android:gravity="center|left" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="155pt"
            android:layout_height="25pt"
            android:id="@+id/lnl_excluir"
            android:gravity="center">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="76pt"
                android:layout_height="match_parent"
                android:id="@+id/lnl_delete"
                android:gravity="center">

                <TextView
                    android:layout_width="73pt"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:id="@+id/txt_hintdel"
                    android:text="@string/lbl_hintdel" />

                <Spinner
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:id="@+id/spn_excluir"
                    android:layout_weight="1"
                    android:gravity="left|top" />
            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="76pt"
                android:layout_height="match_parent"
                android:id="@+id/lnl_tiponet"
                android:gravity="center">

                <TextView
                    android:layout_width="73pt"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:id="@+id/txt_hintup"
                    android:text="@string/lbl_hintup" />

                <Spinner
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:id="@+id/spn_tiponet"
                    android:layout_weight="1"
                    android:gravity="left|top" />
            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="45pt"
        android:id="@+id/lnl_botoes"
        android:gravity="center">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_cancelar"
            android:nestedScrollingEnabled="false"
            android:src="@mipmap/cancela"
            android:contentDescription="btn_cancelar"
            android:background="#ffe7fcff" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="20dp"
            android:layout_height="match_parent"
            android:id="@+id/lnl_espbtn"></LinearLayout>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_testar"
            android:src="@mipmap/testar"
            android:contentDescription="btn_testar"
            android:background="#ffe7fcff" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="20dp"
            android:layout_height="match_parent"
            android:id="@+id/lnl_espbtn2" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_confirmar"
            android:src="@mipmap/confirma"
            android:contentDescription="btn_confirmar"
            android:background="#ffe7fcff" />

    </LinearLayout>

</LinearLayout>

I’m using LinearLayout in all layouts.

The phone obviously has a different resolution, but how best to make the layout is usual for any equipment on screens with different resolution?

put the xml code of the layout with problem

– Skywalker

2015/08/25 at 22:56
@Skywalker edited the code and entered the XML, please take a look.

– Fábio Azevedo

2015/08/26 at 02:53
that question is a good starting point.

– emanuelsn

2015/08/26 at 02:57
Your phone and emulator have equal screen resolutions ?

– Pedro Laini

2015/08/26 at 11:28
It may have nothing to do with it, but you realize you’re using it fill_parent for width and height of parent layout? Tries to switch to match_parent and rotate.

– Erick Filho

2015/08/26 at 13:10
@Pedrolaini, yes.... are different resolutions...

– Fábio Azevedo

2015/08/26 at 13:48
then see my answer

– Pedro Laini

2015/08/26 at 14:11

Show 2 more comments

2 answers

Browser other questions tagged android android-layout responsive-layout

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

by rsicarelli • **3,086** points · Answer 1 · 2015-08-26T19:09:32+00:00

You are making some mistakes in your layout:

1) When you need to put fixed size in components on android, you should use the measure dp instead of pt (or, the most famous, px). I mean, instead of Points you need to put as Density-independent pixels (dip or dp). To understand how this works on Android, take a look at the official documentation
2) You should not use fixed size in your layouts. Android has a comprehensive screen fragmentation. If you put a fixed size to your layout, you are supporting a specific layout density.

But what that impacts?

Your layout behaves as follows on a device with 240 dpi:

Now on a device with 320 dpi, your layout behaves as follows:

Now, imagine in thousands of Vices? This situation would be uncontrollable.

How to solve this?

The ideal is that your layout is responsive, that is, no matter what the screen density (200, 300, 400, 500 etc) it needs to always behave the same way. For this:

In his layout_width and layout_height, utilize match_parent (if you want your layout to take up all the space it can) or wrap_content (if you want your layout to occupy only the space it needs);
Remove all fixed sizes from your layout_width and layout_height;
Utilize layout_weight whenever you need components to have exactly the same screen space;
Utilize weightSum whenever you want to set the maximum "weight" of your component. In your case, as you have 3 ImageButton's, define as 3 and ensure that each ImageButton be of the same weight (in this case weight 1);

A quick refactoring in your layout will already enable this change:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lnl_principal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffe7fcff"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/lnl_periodo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="16dp">

        <LinearLayout
            android:id="@+id/lnl_ftp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txt_hintftp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/lbl_hintftp"
                android:textAppearance="?android:attr/textAppearanceSmall" />

            <EditText
                android:id="@+id/edt_ftp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:editable="false"
                android:inputType="text"
                android:singleLine="true"
                android:textColor="#010101" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/lnl_porta"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:orientation="vertical"
            android:weightSum="1">

            <TextView
                android:id="@+id/txt_hintport"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/lbl_hintport"
                android:textAppearance="?android:attr/textAppearanceSmall" />

            <EditText
                android:id="@+id/edt_portnumber"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_weight="0.67"
                android:inputType="text"
                android:textColor="#010101" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/lnl_pasta"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txt_hintdir"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/lbl_hintdir"
                android:textAppearance="?android:attr/textAppearanceSmall" />

            <EditText
                android:id="@+id/edt_diretorio"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:gravity="center|left"
                android:inputType="text"
                android:textColor="#010101" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/lnl_usuario"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txt_hintuser"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/lbl_hintuser"
                android:textAppearance="?android:attr/textAppearanceSmall" />

            <EditText
                android:id="@+id/edt_usuario"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:gravity="center|left"
                android:inputType="text"
                android:textColor="#010101" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lnl_senha"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txt_hintpass"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/lbl_hintpass"
                android:textAppearance="?android:attr/textAppearanceSmall" />

            <EditText
                android:id="@+id/edt_senha"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:gravity="center|left"
                android:inputType="textPassword"
                android:textColor="#010101" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lnl_excluir"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/lnl_delete"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/txt_hintdel"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/lbl_hintdel"
                    android:textAppearance="?android:attr/textAppearanceSmall" />

                <Spinner
                    android:id="@+id/spn_excluir"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="left|top" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/lnl_tiponet"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/txt_hintup"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/lbl_hintup"
                    android:textAppearance="?android:attr/textAppearanceSmall" />

                <Spinner
                    android:id="@+id/spn_tiponet"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="left|top" />
            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lnl_botoes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="3">

        <ImageButton
            android:id="@+id/btn_cancelar"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffe7fcff"
            android:contentDescription="btn_cancelar"
            android:nestedScrollingEnabled="false"
            android:src="@mipmap/cancela"/>

        <ImageButton
            android:id="@+id/btn_testar"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffe7fcff"
            android:contentDescription="btn_testar"
            android:src="@mipmap/testar"/>

        <ImageButton
            android:id="@+id/btn_confirmar"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffe7fcff"
            android:contentDescription="btn_confirmar"
            android:src="@mipmap/confirma" />

    </LinearLayout>

</LinearLayout>

Useful links:

Understand the different dimensions on Android: https://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android

How to support multiple screen dimensions: http://developer.android.com/guide/practices/screens_support.html

What is match_parent and wrap_content and why not use fill_parent: http://www.mkyong.com/android/android-wrap_content-and-fill_parent-example/

by Pedro Laini • **2,547** points · Answer 2 · 2015-08-26T14:11:36+00:00

To get a layout responsivo, that works in all resolutions, you need to different layout for different resolutions.

Placing your layouts within a folder structure like the following:

res/layout/my_layout.xml             // layout para tela de tamanho normal("default")
res/layout-small/my_layout.xml       // layout para tela de tamanho pequeno
res/layout-large/my_layout.xml       // layout para tela de tamanho grande
res/layout-xlarge/my_layout.xml      // layout para tela de tamanho extra grande
res/layout-xlarge-land/my_layout.xml // layout para tela de tamanho extra grande
                                     //em orientação landscape

This structure covers different resolutions that correspond:

xlarge --> pelo menos 960dp x 720dp
large  --> pelo menos 640dp x 480dp
normal --> pelo menso 470dp x 320dp
small  --> pelo menos426dp x 320dp

Data obtained on Soen

Android will recognize which size of the screen of the device that is running the program and after that will enter the folder corresponding to the dimension and you will find your file my_layout. So you have files with the same name, representing the same screen, but implemented differently to different dimensions. And Android takes care to know which file it will catch.

Same goes for images in folders drawable.

You can learn a little more by also looking at Android Developers - Screens Support

Also, to apply css to your layout, you can use media queries to differentiate the style for each dimension as well.