Problems with the layout of the application on various phones

Question

Problems with the layout of the application on various phones

Navigation

#1 by (5 votes)

2

I have an application that I made and emulated using my lg g2 mini phone, when I emulate it looks everything, the form the way I designed it in its proper corner. When I install the same apk on other phones, the application loses the layout by getting a button over an image, the messy form. Does anyone know what to do to make the application work as designed in my layout for all mobile phone models?

<?xmlversion="1.0" encoding="utf-8"?>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/black"
    android:text="Endereço: Rua João Henrique da Silva, 11 - Pajuçara - "
    android:id="@+id/textView8"
    android:textSize="12dp"
    android:textAlignment="center"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textPersonName"
    android:ems="10"
    android:id="@+id/nome1"
    android:textColorHint="#9b9a9a"
    android:hint="*Nome:"
    android:textSize="14dp"
    android:textColorLink="#050000"
    android:backgroundTint="#020000"
    android:textColor="#050000"
    android:layout_above="@+id/email"
    android:layout_alignLeft="@+id/msg"
    android:layout_alignRight="@+id/msg"
    android:layout_alignEnd="@+id/msg" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColorHint="#9b9a9a"
    android:inputType="textPostalAddress"
    android:ems="10"
    android:id="@+id/email"
    android:hint="*E-mail:"
    android:textSize="14dp"
    android:textColorLink="#050000"
    android:backgroundTint="#020000"
    android:textColor="#050000"
    android:layout_above="@+id/msg"
    android:layout_alignLeft="@+id/msg"
    android:layout_alignStart="@+id/msg"
    android:layout_marginBottom="36dp"
    android:layout_alignRight="@+id/msg"
    android:layout_alignEnd="@+id/msg" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColorHint="#9b9a9a"
    android:inputType="phone"
    android:ems="10"
    android:id="@+id/telefone"
    android:hint="Telefone:"
    android:textSize="14dp"
    android:textColorLink="#050000"
    android:backgroundTint="#020000"
    android:textColor="#050000"
    android:layout_above="@+id/nome1"
    android:layout_alignLeft="@+id/msg"
    android:layout_alignRight="@+id/msg"
    android:layout_alignEnd="@+id/msg" />

<Button
    android:layout_width="85dp"
    android:layout_height="40dp"
    android:text="Enviar"
    android:id="@+id/send"
    android:layout_above="@+id/textView8"
    android:layout_alignRight="@+id/textView8"
    android:layout_alignEnd="@+id/textView8" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColorHint="#9b9a9a"
    android:inputType="textPersonName"
    android:ems="10"
    android:id="@+id/endereco"
    android:hint="Endereço:"
    android:textSize="14dp"
    android:textColorLink="#050000"
    android:backgroundTint="#020000"
    android:textColor="#050000"
    android:layout_above="@+id/telefone"
    android:layout_alignLeft="@+id/msg"
    android:layout_alignRight="@+id/msg"
    android:layout_alignEnd="@+id/msg" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="120dp"
    android:gravity="top"
    android:inputType="textMultiLine"
    android:lines="5"
    android:ems="10"
    android:id="@+id/msg"
    android:hint="*Mensagem"
    android:textSize="14dp"
    android:textColorHint="#9b9a9a"
    android:layout_above="@+id/send"
    android:layout_alignRight="@+id/send"
    android:layout_alignEnd="@+id/send"
    android:layout_alignLeft="@+id/textView8"
    android:layout_alignStart="@+id/textView8"
    android:backgroundTint="#020000"
    android:textColor="#050000"
    android:textColorLink="#050000" />

<ImageView
    android:layout_width="250dp"
    android:layout_height="150dp"
    android:id="@+id/imageView"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/lg"
    android:layout_above="@+id/spinner" />

<Spinner
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/spinner"
    android:spinnerMode="dropdown"
    android:visibility="visible"
    android:theme="@style/Animation.AppCompat.DropDownUp"
    android:background="@color/colorFABPressed"
    android:layout_above="@+id/endereco"
    android:layout_alignRight="@+id/send"
    android:layout_alignEnd="@+id/send"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Agendar para:"
    android:id="@+id/textView10"
    android:textColor="#010101"
    android:textSize="14dp"
    android:layout_above="@+id/endereco"
    android:layout_alignLeft="@+id/imageView"
    android:layout_alignStart="@+id/imageView"
    android:layout_marginLeft="53dp"
    android:layout_marginStart="53dp" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageButton2"
    android:src="@drawable/previe"
    android:background="#00000000"
    android:layout_above="@+id/msg"
    android:layout_toEndOf="@+id/imageView"
    android:layout_toRightOf="@+id/imageView" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Capturar imagem"
    android:id="@+id/textView16"
    android:textColor="#010101"
    android:textSize="14dp"
    android:layout_above="@+id/msg"
    android:layout_toLeftOf="@+id/send"
    android:layout_toStartOf="@+id/send" />

I design my xmls already checking how it would look on each screen type. As the image below

And here it is normal

android android-layout

asked by anonymous 30.05.2016 / 19:06

1 answer

How to configure Postgres to accept date in PT-BR format? Printing ASCII extended in C

score 5 · Accepted Answer

First Option - What you will have to do is create a screen for each type of Portrait orientation and one for Land .

Example:

In your / res / directory you can have two folders, for example:

/ res / layout - > Screen in Standard Mode "Portrait".
/ res / layout-land - > Screen in Landscape Mode.

This is the fragment_test.xml file for the res/layout folder and is for the default Portrait orientation, and is for smaller resolution devices - > Smartphone:

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".testFragment">

        <ScrollView
            android:background="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <FrameLayout
            android:background="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="08dp"
            android:layout_marginRight="08dp"
            android:paddingTop="08dp"
            android:paddingBottom="08dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/nome1"
            android:textColorHint="#9b9a9a"
            android:hint="*Nome:"
            android:textSize="14sp"
            android:textColorLink="#050000"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:layout_gravity="top|left"
            android:layout_marginTop="170dp" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageButton2"
            android:src="@drawable/previe"
            android:background="#00000000"
            android:layout_gravity="top|center|right"
            android:layout_marginTop="390dp"
            android:layout_marginRight="60dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Agendar para:"
            android:id="@+id/textView10"
            android:textColor="#010101"
            android:textSize="14sp"
            android:layout_marginLeft="20dp"
            android:layout_gravity="top|left|center_vertical"
            android:layout_marginTop="120dp" />

            <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textColorHint="#9b9a9a"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/endereco"
            android:hint="Endereço:"
            android:textSize="14sp"
            android:textColorLink="#050000"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:layout_above="@+id/telefone"
            android:layout_alignLeft="@+id/msg"
            android:layout_alignRight="@+id/msg"
            android:layout_alignEnd="@+id/msg"
            android:layout_gravity="top|left|center_vertical"
            android:layout_marginTop="320dp" />

        <Button
            android:layout_width="85dp"
            android:layout_height="40dp"
            android:text="Enviar"
            android:id="@+id/send"
            android:layout_gravity="top|bottom|right"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="500dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:text="Endereço: Rua , Numero - Localidade"
            android:id="@+id/textView8"
            android:textSize="12sp"
            android:textAlignment="center"
            android:layout_gravity="top|bottom|center"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="550dp" />

            <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textColorHint="#9b9a9a"
            android:inputType="phone"
            android:ems="10"
            android:id="@+id/telefone"
            android:hint="Telefone:"
            android:textSize="14sp"
            android:textColorLink="#050000"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:layout_gravity="top|left|center_vertical"
            android:layout_marginTop="270dp" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="82dp"
                android:gravity="top"
                android:inputType="textMultiLine"
                android:lines="5"
                android:ems="10"
                android:id="@+id/msg"
                android:hint="*Mensagem"
                android:textSize="14sp"
                android:textColorHint="#9b9a9a"
                android:backgroundTint="#020000"
                android:textColor="#050000"
                android:textColorLink="#050000"
                android:layout_gravity="top|center"
                android:layout_marginTop="410dp" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:textColorHint="#9b9a9a"
                android:inputType="textPostalAddress"
                android:ems="10"
                android:id="@+id/email"
                android:hint="*E-mail:"
                android:textSize="14sp"
                android:textColorLink="#050000"
                android:backgroundTint="#020000"
                android:textColor="#050000"
                android:layout_gravity="left|top"
                android:layout_marginTop="220dp" />

            <Spinner
                android:layout_width="190dp"
                android:layout_height="wrap_content"
                android:id="@+id/spinner"
                android:spinnerMode="dropdown"
                android:visibility="visible"
                android:theme="@style/Animation.AppCompat.DropDownUp"
                android:background="@color/colorFABPressed"
                android:layout_above="@+id/endereco"
                android:layout_alignRight="@+id/send"
                android:layout_alignEnd="@+id/send"
                android:layout_gravity="center_horizontal|top"
                android:layout_marginTop="101dp"
                android:layout_marginLeft="80dp" />

            <ImageView
                android:layout_width="410dp"
                android:layout_height="100dp"
                android:id="@+id/imageView"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:src="@drawable/lg"
                android:layout_above="@+id/spinner"
                android:layout_gravity="center_horizontal|top" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Capturar imagem"
                android:id="@+id/textView16"
                android:textColor="#010101"
                android:textSize="14sp"
                android:layout_gravity="top|center|right"
                android:layout_marginTop="390dp"
                android:layout_marginRight="120dp" />

        </FrameLayout>
     </ScrollView>
   </RelativeLayout>

Note: Your texts are not externalized, eg android:text="Capturar imagem" , which is not recommended by Google, externalize them through the String Name Resource in the / values /% directory under strings.xml , this way:
<resources>
       <string name="capturar">Capturar imagem</string>
</resources>
And on your screen you change the code snippet to android:text="@string/capturar" .

Result:

Thisisthefragment_test.xml(land)filefortheres/layout-landfolderandisforLandorientation,andbestsuitedto7,8and10inchdevices->Tablets:

<?xmlversion="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".testFragment">

    <ScrollView
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <FrameLayout
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="08dp"
        android:layout_marginRight="08dp"
        android:paddingTop="08dp"
        android:paddingBottom="08dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/nome1"
            android:textColorHint="#9b9a9a"
            android:hint="*Nome:"
            android:textSize="14sp"
            android:textColorLink="#050000"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:layout_gravity="top|left"
            android:layout_marginTop="170dp" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageButton2"
            android:src="@drawable/previe"
            android:background="#00000000"
            android:layout_gravity="top|center|right"
            android:layout_marginTop="390dp"
            android:layout_marginRight="60dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Agendar para:"
            android:id="@+id/textView10"
            android:textColor="#010101"
            android:textSize="14sp"
            android:layout_marginLeft="60dp"
            android:layout_gravity="top|left|center_vertical"
            android:layout_marginTop="120dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textColorHint="#9b9a9a"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/endereco"
            android:hint="Endereço:"
            android:textSize="14sp"
            android:textColorLink="#050000"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:layout_above="@+id/telefone"
            android:layout_alignLeft="@+id/msg"
            android:layout_alignRight="@+id/msg"
            android:layout_alignEnd="@+id/msg"
            android:layout_gravity="top|left|center_vertical"
            android:layout_marginTop="320dp" />

        <Button
            android:layout_width="85dp"
            android:layout_height="40dp"
            android:text="Enviar"
            android:id="@+id/send"
            android:layout_gravity="top|bottom|right"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="500dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:text="Endereço: Rua , Numero - Localidade"
            android:id="@+id/textView8"
            android:textSize="12sp"
            android:textAlignment="center"
            android:layout_gravity="top|bottom|center"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="550dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textColorHint="#9b9a9a"
            android:inputType="phone"
            android:ems="10"
            android:id="@+id/telefone"
            android:hint="Telefone:"
            android:textSize="14sp"
            android:textColorLink="#050000"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:layout_gravity="top|left|center_vertical"
            android:layout_marginTop="270dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="82dp"
            android:gravity="top"
            android:inputType="textMultiLine"
            android:lines="5"
            android:ems="10"
            android:id="@+id/msg"
            android:hint="*Mensagem"
            android:textSize="14sp"
            android:textColorHint="#9b9a9a"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:textColorLink="#050000"
            android:layout_gravity="top|center"
            android:layout_marginTop="410dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textColorHint="#9b9a9a"
            android:inputType="textPostalAddress"
            android:ems="10"
            android:id="@+id/email"
            android:hint="*E-mail:"
            android:textSize="14sp"
            android:textColorLink="#050000"
            android:backgroundTint="#020000"
            android:textColor="#050000"
            android:layout_gravity="left|top"
            android:layout_marginTop="220dp" />

        <Spinner
            android:layout_width="290dp"
            android:layout_height="wrap_content"
            android:id="@+id/spinner"
            android:spinnerMode="dropdown"
            android:visibility="visible"
            android:theme="@style/Animation.AppCompat.DropDownUp"
            android:background="@color/colorFABPressed"
            android:layout_above="@+id/endereco"
            android:layout_alignRight="@+id/send"
            android:layout_alignEnd="@+id/send"
            android:layout_gravity="center_horizontal|top"
            android:layout_marginTop="101dp"
            android:layout_marginLeft="80dp" />

        <ImageView
            android:layout_width="410dp"
            android:layout_height="100dp"
            android:id="@+id/imageView"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:src="@drawable/lg"
            android:layout_above="@+id/spinner"
            android:layout_gravity="center_horizontal|top" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Capturar imagem"
            android:id="@+id/textView16"
            android:textColor="#010101"
            android:textSize="14sp"
            android:layout_gravity="top|center|right"
            android:layout_marginTop="390dp"
            android:layout_marginRight="120dp" />

    </FrameLayout>
    </ScrollView>
</RelativeLayout>

Note: Your texts are not externalized, eg android:text="Capturar imagem" , which is not recommended by Google, externalize them through the String Name Resource in the / values /% directory under strings.xml , this way:
<resources>
       <string name="capturar">Capturar imagem</string>
</resources>
And on your screen you change the code snippet to android:text="@string/capturar" .

Result:

Note:Irecommendthatwheneverpossibletestyourapplicationsonrealdeviceswithdifferentresolutionsoronvirtualmachineswithdifferentsettingsandresolutionstoseeifeverythingiscorrect,thusensuringthequalityofyourapplications.>

SecondOption-Ifyoudonotknowhowtocreateascreenforeachtypeoforientation,youcanmakeyourActivitiesworkonlywithPortraitorientationinAndroidManifest.xmlfile,soyourlayoutwillalwaysbe"correct", since your view will always be in the Portrait orientation, but doing so will not it will be allowed to turn the screen of your application, which is not a good practice, but at least solves the problem, as in this example:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="br.com.novoapp">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity
            android:screenOrientation="portrait"
            android:name=".SplashScreen"
            android:label="@string/app_name" >

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
        </activity>
    </application>
</manifest>

See above for Activity -> .SplashScreen is started in portrait orientation ( android:screenOrientation="portrait" ), logically because it is a SplashScreen screen, you can now also make your .MainActivity work with portrait orientation and stay there, not allowing it to turn the screen when the user turns the phone aside, which is not a good practice, but solves it.

Just add your .MainActivity to the android:screenOrientation="portrait" , like this:

            <activity
                android:screenOrientation="portrait"
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:theme="@style/AppTheme.NoActionBar">
            </activity>

Note: Remembering that your activity_main.xml screen is part of your Activity - > .MainActivity that is in Portrait orientation should not be popping Layout on any device, so the result in Portrait orientation will default to all devices.

I hope I have helped!