2

Estou com dificuldades para montar um layout.

No emulado ele fica da forma como quero conforme abaixo:

inserir a descrição da imagem aqui

Porém no celular fica completamente desconfigurado conforme abaixo:

inserir a descrição da imagem aqui

Código XML:

<?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>

Estou usando LinearLayout em todos os layouts.

O celular obviamente possui uma resolução diferente, mas qual a melhor forma de fazer com que o layout seja usual para qualquer equipamento em telas com resolução diferente?

7
  • coloque o codigo do xml do layout com problema
    – Skywalker
    Commented 25/08/2015 às 22:56
  • @Skywalker editei o código e inseri o XML, dê uma olhada por gentileza. Commented 26/08/2015 às 2:53
  • essa pergunta é um bom ponto de partida.
    – emanuelsn
    Commented 26/08/2015 às 2:57
  • O seu celular e o emulador tem resoluções de tela iguais ? Commented 26/08/2015 às 11:28
  • Pode não ter nada a ver, mas você percebeu que está usando fill_parent para width e height do layout pai? Tenta trocar para match_parent e rodar. Commented 26/08/2015 às 13:10

2 Respostas 2

3

Você está cometendo alguns equivocos em seu layout:

  • 1) Quando você precisar colocar tamanho fixo em componentes no android, você deve utilizar a medida dp ao invés de pt (ou, a mais famosa, px). Ou seja, ao invés de Points você precisa colocar como Density-independent pixels (dip ou dp). Para entender como isso funciona no Android, de uma olhada na documentação oficial

  • 2) Você não deve utilizar tamanho fixos em seus layouts. O Android possui uma abrangente fragmentação de telas. Se você colocar um tamanho fixo para o seu layout, você está suportando uma densidade específica de layout.

Mas o que isso impacta?

Seu layout se comporta da seguinte maneira em um device com 240 dpi:

Device com 240 dpi

Agora, em um device com 320 dpi, seu layout se comporta da seguinte maneira:

Device com 320dpi

Agora, imagine em milhares de devices? Essa situação seria incontrolável.

Como resolver isso?

O ideal é que seu layout seja responsivo, ou seja, não importa qual a densidade de tela (200, 300, 400, 500 etc) ele precisa se comportar sempre da mesma maneira. Para isso:

  • No seu layout_width e layout_height, utilize match_parent (caso você queira que seu layout ocupe todo o espaço que ele pode) ou wrap_content (caso você queira que o seu layout ocupe apenas o espaço que ele precisa);
  • Remova todos os tamanhos fixos do seu layout_width e layout_height;
  • Utilize layout_weight sempre que precisar que componentes tenham exatamente o mesmo espaço de tela;
  • Utilize weightSum sempre que você quer definir o "peso" máximo de seu componente. No seu caso, como você tem 3 ImageButton's, defina como 3 e faça com que cada ImageButton tenha o mesmo peso (no caso, peso 1);

Uma rápida refatoração em seu layout já irá te possibilitar essa mudança:

<?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>

Links úteis:

Entenda as diferentes dimensões no Android: https://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android

Como suportar várias dimensões de telas: http://developer.android.com/guide/practices/screens_support.html

O que é match_parent e wrap_content e por que não utilizar fill_parent: http://www.mkyong.com/android/android-wrap_content-and-fill_parent-example/

0

Para conseguir um layout responsivo, que funciona em todas as resoluções, você precisa de layout diferentes para resoluções diferentes.

Colocando os seus layouts dentro de uma estrutura de pastas como a seguinte:

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

Essa estrutura abrange diferentes resoluções que correspondem:

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

Dados obtidos no SOen

O Android reconhecerá qual a dimensão da tela do dispositivo que está executando o programa e, depois disso, entrará na pasta correspondente a dimensão e encontrará o seu arquivo my_layout. Assim, você tem arquivos com o mesmo nome, que representa a mesma tela, mas implementado diferente para dimensões diferentes. E o Android se ocupa de saber qual arquivo ele irá pegar.

O mesmo vale para as imagens nas pastas drawable.

Você pode aprender um pouco mais olhando também em Android Developers - Screens Support

Além disso, para aplicar css ao seu layout, você pode lançar mão das media queries para diferenciar o style para cada dimensão também.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .