Android normal screen size cropped on bottom

Question

I have created a layout for normal screen size with hdpi density using a relative layout. But I know some devices with same screen size which bottom is cropped for like 7-8 millimeters for 3 android common buttons (home, etc).

Now I wonder how to create layout to fit that type of devices because now it crops my layout for 7 millimeters?

Thanks.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/prime"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#8B008B"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="5dp"
tools:context="com.example.testznanja.MainActivity" >

<RelativeLayout
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/question_layout" >

    <TextView
        android:id="@+id/questionText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

<Button
    android:id="@+id/beginTest"
    android:layout_width="match_parent"
    android:layout_height="52dp"
    android:layout_below="@+id/infoPanel"
    android:layout_marginTop="25dp"
    android:background="@drawable/button_normal"
    android:text="Button" />

<Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/beginTest"
    android:layout_marginTop="18dp"
    android:background="@drawable/button_normal"
    android:text="Button" />

<Button
    android:id="@+id/button3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/button2"
    android:layout_marginTop="18dp"
    android:background="@drawable/button_normal"
    android:text="Button" />

<Button
    android:id="@+id/button4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/button3"
    android:layout_marginTop="18dp"
    android:background="@drawable/button_normal"
    android:text="Button" />

<RelativeLayout
    android:id="@+id/infoPanel"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_below="@+id/rl"
    android:layout_marginTop="25dp"
    android:background="@drawable/info_panel_layout"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

    <TextView
        android:id="@+id/questionsAnswers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Skor: 0"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:gravity="right"
        android:text="Vreme: 20"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/help"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="50:50"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

can you post your xml code so that we can see the problem? – chjarder Sep 01 '14 at 02:05 — chjarder, Sep 01 '14 at 02:05

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Have you tried testing it on an emulator with soft menu buttons like the nexus series? These phones' aspect ratios are not really far from other phones like the galaxy s3, s4, etc. But to answer your question, if you really want your layout to be flexible for everything, there are 3 options I can think of:

[1] if you don't mind scrolling, you could wrap your parent RelativeLayout which is @+id/prime inside a ScrollView. Or take a look at your xml file that I modified. Just replace the drawables with the one you supplied:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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" >

    <RelativeLayout
        android:id="@+id/prime"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#8B008B"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="5dp"
        tools:context="com.example.testznanja.MainActivity" >

        <RelativeLayout
            android:id="@+id/rl"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/question_layout" >

            <TextView
                android:id="@+id/questionText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />
        </RelativeLayout>

        <Button
            android:id="@+id/beginTest"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:layout_below="@+id/infoPanel"
            android:layout_marginTop="25dp"
            android:background="@drawable/button_normal"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/beginTest"
            android:layout_marginTop="18dp"
            android:background="@drawable/button_normal"
            android:text="Button" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/button2"
            android:layout_marginTop="18dp"
            android:background="@drawable/button_normal"
            android:text="Button" />

        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/button3"
            android:layout_marginTop="18dp"
            android:background="@drawable/button_normal"
            android:text="Button" />

        <RelativeLayout
            android:id="@+id/infoPanel"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_below="@+id/rl"
            android:layout_marginTop="25dp"
            android:background="@drawable/info_panel_layout"
            android:paddingLeft="5dp"
            android:paddingRight="5dp" >

            <TextView
                android:id="@+id/questionsAnswers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:text="Skor: 0"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/timer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:gravity="right"
                android:text="Vreme: 20"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/help"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="50:50"
                android:textAppearance="?android:attr/textAppearanceLarge" />
        </RelativeLayout>

        <View
            android:id="@+id/dummy"
            android:layout_width="match_parent"
            android:layout_height="800dp"
            android:layout_below="@+id/button4"
            android:background="#ff4444" />
    </RelativeLayout>

</ScrollView>

Notice that I added a View with a red background and android:id="@+id/dummy" at the bottom. This is to let you see the scroll effect and simulate a scenario of cropping. Just remove it if you don't need it.

[2] If you want everything to fit inside the screen without having to scroll down, you should convert your parent RelativeLayout into a LinearLayout and use weights for every child. This approach is more complicated and entails much work since you have to calculate the weight for each child and you have to pretty much change every width and height of the children in the xml you already have.

[3] Redesign your layout so that it would always have extra space to accommodate different device aspect ratios, and redesign your images and backgrounds. I suggest you read on the Android Design Guidelines.

The first one is the easiest of the 3. If you want your layout to be as flexible as possible, I'm sorry my friend but I can't think of an easier way to do that.

I don't need emulator, my phone has soft keys so i try it on real device, my layout is cropped by them. I found a solution making a different layout (layoutWithKeys.xml) and than i check if device has soft keys or not, depending on that i setContentView with one or other layout. However thanks for trying to help me mate. — Ђорђе Ђашић, Sep 02 '14 at 13:27

Android normal screen size cropped on bottom

1 Answers1