Different layout on another device

Asked

Viewed 169 times

4

My layout looks different on small devices, already tried to add a ScrollView to solve this problem and I got no results.

Follows the prints application running on different devices:

Resolution 720 x 1280

Resolution 320 x 480

As you can see, the numbers were on top of each other.

Follows my xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="#FFFFFF"
    tools:context=".HomeActivity$PlaceholderFragment">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <ScrollView
            android:id="@+id/scrollViewContent"
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <RadioGroup
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:id="@+id/rgDificuldade"
                    android:background="@drawable/background_infos"
                    android:padding="10sp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="25sp"
                        android:text="Escolha a dificuldade:" />

                    <RadioButton
                        android:id="@+id/rbFácil"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:text="@string/string_facio" />

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/string_medio"
                        android:textSize="20sp"
                        android:id="@+id/rbMedio" />

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/string_dificil"
                        android:textSize="20sp"
                        android:id="@+id/rbDificil" />
                </RadioGroup>


                <RelativeLayout
                    android:padding="10sp"
                    android:minHeight="44sp"
                    android:layout_marginTop="5sp"
                    android:layout_below="@+id/rgDificuldade"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/relativeLayoutAttempts">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:background="@drawable/heart_attempts"
                        android:text="0"
                        android:textColor="#FFFFFF"
                        android:gravity="center"
                        android:layout_marginLeft="3px"
                        android:id="@+id/txtQuantidadeTentativas" />

                </RelativeLayout>

                <RelativeLayout
                    android:padding="10sp"
                    android:minHeight="44sp"
                    android:layout_marginLeft="2sp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/relativeLayoutCronometro"
                    android:layout_alignTop="@+id/relativeLayoutAttempts"
                    android:layout_toRightOf="@+id/relativeLayoutAttempts"
                    android:layout_toEndOf="@+id/relativeLayoutAttempts">

                    <Chronometer
                        android:textSize="18sp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/cronometroCarregarTentativa"
                        android:layout_alignTop="@+id/imgViewLighting"
                        android:layout_toRightOf="@+id/imgViewLighting"
                        android:layout_toEndOf="@+id/imgViewLighting"
                        android:layout_marginTop="6dp"
                        android:layout_marginLeft="-5dp"
                        android:textColor="#999999" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/imgViewLighting"
                        android:layout_marginRight="5dp"

                        android:background="@drawable/lightning"
                        android:contentDescription="Energia" />
                </RelativeLayout>

                <RelativeLayout
                    android:padding="10sp"
                    android:minHeight="44sp"
                    android:layout_marginLeft="2sp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/relativeLayoutXp"
                    android:layout_alignTop="@+id/relativeLayoutCronometro"
                    android:layout_toRightOf="@+id/relativeLayoutCronometro"
                    android:layout_toEndOf="@+id/relativeLayoutCronometro">

                    <TextView
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/txtXp"
                        android:layout_toRightOf="@+id/imgViewXp"
                        android:layout_toEndOf="@+id/imgViewXp"
                        android:layout_marginTop="6dp"
                        android:layout_marginLeft="-5dp"
                        android:textColor="#999999"
                        android:text="200/5000"
                        android:layout_alignBottom="@+id/imgViewXp" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/imgViewXp"
                        android:layout_marginRight="5dp"
                        android:background="@drawable/star_xp"
                        android:contentDescription="Energia" />

                    <TextView
                        android:textColor="#999999"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceSmall"
                        android:text="LV 0"
                        android:id="@+id/txtLvl"
                        android:layout_alignTop="@+id/imgViewXp"
                        android:layout_toRightOf="@+id/imgViewXp"
                        android:layout_toEndOf="@+id/imgViewXp"
                        android:layout_marginLeft="-5dp" />
                </RelativeLayout>
            </RelativeLayout>
        </ScrollView>
    </RelativeLayout>
    <!--Botoes -->
    <RelativeLayout
        android:id="@+id/relativeLayoutBotoes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:id="@+id/txtDicas"
            android:text="aaaa"
            android:layout_marginBottom="54dp"
            android:layout_above="@+id/etNumeroDigitado"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <EditText
            android:id="@+id/etNumeroDigitado"
            android:background="@drawable/shape_camponumero"
            android:layout_above="@+id/btnUm"
            android:padding="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:enabled="false"
            android:inputType="number"
            android:typeface="monospace"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <Button
            android:background="@drawable/button_bgpressed"
            android:textColor="@drawable/button_textcolorpressed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:id="@+id/btnZero"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" />

        <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ok"
        android:id="@+id/btnEnter"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        android:id="@+id/btnOito"
        android:layout_above="@+id/btnEnter"
        android:layout_centerHorizontal="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/btnCinco"
        android:layout_above="@+id/btnOito"
        android:layout_centerHorizontal="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/btnDois"
        android:layout_above="@+id/btnCinco"
        android:layout_centerHorizontal="true"
        android:singleLine="false" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        android:id="@+id/btnSete"
        android:layout_above="@+id/btnZero" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        android:id="@+id/btnNove"
        android:layout_above="@+id/btnZero"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/btnQuatro"
        android:layout_alignBottom="@+id/btnCinco"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/btnUm"
        android:layout_alignBottom="@+id/btnDois"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/btnTres"
        android:layout_above="@+id/btnCinco"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"
        android:id="@+id/btnSeis"
        android:layout_alignBottom="@+id/btnCinco"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:background="@drawable/button_bgpressed"
        android:textColor="@drawable/button_textcolorpressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Apagar"
        android:id="@+id/btnApagar"
        android:layout_alignBottom="@+id/btnZero"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


</RelativeLayout>

If possible, give an answer by changing my code.

android android-layout

1 answer

4

Hello you can build your apk with multiple layouts, so it is easier to adapt to each screen either for a mobile phone or a tablet.

Just put the same layout on each folder and change according to the layout you want on each screen, ex in the folder layout-small can put fewer items or even remove those that are disturbing the screen and on a screen layout-xlarge can add new items or shortcuts for other operations. Do the test and you will see that it is quite simple. 

 res/layout/my_layout.xml             // layout for normal screen size ("default")
 res/layout-small/my_layout.xml       // layout for small screen size
 res/layout-large/my_layout.xml       // layout for large screen size
 res/layout-xlarge/my_layout.xml      // layout for extra large screen size
 res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

 res/drawable-mdpi/my_icon.png        // bitmap for medium density
 res/drawable-hdpi/my_icon.png        // bitmap for high density
 res/drawable-xhdpi/my_icon.png       // bitmap for extra high density

Manifest

<supports-screens android:smallScreens="true" 
      android:normalScreens="true" 
      android:largeScreens="true"
      android:xlargeScreens="true"
      android:anyDensity="true" />

You can take a look at these links in the android documentation to better understand:

http://developer.android.com/training/multiscreen/screensizes.html http://developer.android.com/training/multiscreen/screendensities.html

  • The programming of the screen(code behind) mute, or not?

  • Only to complement, access THIS LINK, that you will be able to see which densities and sizes are most used in appliances today...

  • 1

    @Exception This will depend on the layout, if you put more elements or remove according to the layout you may need to treat these separate elements. But nothing of much impact.

Browser other questions tagged android android-layout

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