Problem displaying layout on multiple devices

2

I'm having a hard time putting together a layout.

In the emulated it gets the way I want as below:

Butthecellphoneiscompletelyunconfiguredasbelow:

XMLCode:

<?xmlversion="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 cell phone obviously has a different resolution, but what is the best way to make the layout look like any other device on screens with different resolutions?

    
asked by anonymous 26.08.2015 / 00:07

2 answers

3

You're making some mistakes in your layout:

  • 1) When you need to place fixed size components on android, you should use the dp measure instead of pt (or, most famous, px ). That is, instead of Points you need to put Density-independent pixels ( dip or dp ). To understand how this works on Android, have a look at the official documentation

  • 2) You should not use fixed size in your layouts. Android has a comprehensive fragmentation of screens. If you put a fixed size for your layout, you're supporting a specific layout density.

But what does it impact?

Your layout behaves like this on a device with 240 dpi :

Now,onadevicewith320dpi,yourlayoutbehavesasfollows:

Nowimagineinthousandsofdevices?Thissituationwouldbeuncontrollable.

HowdoIresolvethis?

Ideallyyourlayoutshouldberesponsive,thatis,nomatterwhatscreendensity(200,300,400,500etc)ithastobehaveinthesameway.Todothis:

  • In%of%and%of%,use%of%(ifyouwantyourlayouttotakeupasmuchspaceasitcan)or%with%(ifyouwantyourlayouttooccupyonlythespaceitneed);
  • Removeallfixedsizesfromyourlayout_widthandlayout_height;
  • Usematch_parentwheneveryouneedcomponentstohaveexactlythesamescreenspace;
  • Usewrap_contentwheneveryouwanttosetthemaximum"weight" of your component. In your case, since you have 3 layout_width 's, set to layout_height and make each layout_weight the same weight (in this case, weightSum weight);

A quick refactoring in your layout will already enable you to make 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 in Android: link

How to support multiple screen dimensions: link

What is ImageButton and 3 and why not use ImageButton : link

    
26.08.2015 / 21:09
0

To get a layout responsivo , that works at all resolutions , you need 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 from SOen

Android will recognize the screen size of the device that is running the program and after that it will enter the folder corresponding to the dimension and find its my_layout file. So you have files with same name , which represents the same screen , but implemented differently for different dimensions . And Android is concerned with what file it will get.

The same goes for the images in the drawable folders.

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

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

    
26.08.2015 / 16:11