Android relative layout bottom margin not working correctly

Question

I'm creating a dynamic layout application for the first time. I'm fetching the data from an online database and using an XML layout to present it to the user.

I'm having an issue with the bottom margin. It's being covered up by another layout that it inside the main relative layout and I have tried everything to make it show and got no results.

So after nearly two hours of playing with the setting I have decided to ask you guys, to point me out on what I am doing wrong.

This is how it looks on the screen

Android margin problem

You can notice the bottom gray border part is missing. I'm using a relative layout inside of a relative layout. So the main layout is gray and serves as background for the border, while the second relative layout actually contains all other views.

This is my XML file

    <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:background="#ffffff"
    android:id="@+id/item_container">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            android:background="#e8e8e8"
            android:id="@+id/item_body"
            android:layout_alignParentTop="false"
            android:layout_alignParentLeft="false"
            android:layout_alignParentRight="false"
            android:layout_alignWithParentIfMissing="false"
            android:layout_alignParentBottom="false"
            android:layout_marginBottom="5dp"
            android:layout_margin="5dp">

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@color/background"
                android:id="@+id/item_button"
                android:layout_margin="2dp"
                android:clickable="true"
                android:longClickable="true"
                android:focusable="true"
                android:focusableInTouchMode="false"
                android:minHeight="55dp">

                <FrameLayout
                    android:layout_width="3dp"
                    android:layout_height="fill_parent"
                    android:background="@android:color/transparent"
                    android:id="@+id/item_indicator"></FrameLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="141-SAMOBOR-RAKOV POTOK-JAGNJIĆ DOL"
                    android:id="@+id/item_text"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="30dp"
                    android:textAppearance="@android:style/TextAppearance.Small"
                    android:gravity="fill" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/item_icon"
                    android:layout_gravity="center_vertical|right"
                    android:background="@android:color/transparent"
                    android:src="@drawable/plus_t"
                    android:layout_marginRight="5dp"
                    android:contentDescription="Proširi" />

            </FrameLayout>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/item_image_container"
            android:layout_below="@+id/item_body"
            android:layout_marginTop="5dp"
            android:background="#ffffff">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/item_image"
                android:background="@android:color/transparent"
                android:layout_centerHorizontal="true"
                android:scaleType="fitCenter" />
        </RelativeLayout>

</RelativeLayout>

I have added an image of the structure so it's easier to understand what I am doing here.

enter image description here

I apologize of this questions sounds noobish or something, this is my third app for Android and I'm still learning, I'm trying to learn on how to create dynamic views/layouts with this one. I appreciate the time you guys are taking to read and assist me with this.

Thanks in advance.

You have a `android:layout_marginTop="5dp"` in your last RelativeLayout, is that what is covering it up since the border is 2dp wide? What is the purpose of that last layout anyway? — ashishduh, May 01 '14 at 21:01
what's the purpose of the embedded FrameLayout (ijnside another framelayout) that is empty? Why is the last ImageView embedded in a layout of its own. These things indicate a lack of understanding of Android's layout system — Martin, May 01 '14 at 21:02
Embeeded FrameLayout is just there to serve as an indicator when the item is selected, such as when clicked it's background is changed. Last image view is on it's own because the image size is not a constant, it depends on an image and is not meant to be a part of the button but it needs to be added dynamically as well. Once a layout is clicked, the image source gets set depending on the layout clicked. — Petar-Krešimir, May 01 '14 at 22:29

score 4 · Accepted Answer · answered May 01 '14 at 21:07

4

Here's how your 2nd RelativeLayout and 1st FrameLayout should look. You aren't making use of the padding attribute.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:padding="2dp"
    android:background="#e8e8e8"
    android:id="@+id/item_body">

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/white"
        android:id="@+id/item_button"
        android:clickable="true"
        android:longClickable="true"
        android:focusable="true"
        android:focusableInTouchMode="false"
        android:minHeight="55dp">

answered May 01 '14 at 21:07

ashishduh

6,629
3
30
35

Thank you, that works great. Could you please explain to me what precisely I missed with the parameters? Is it the 2nd rel. layout's padding and frame layout's margin? Once again, thank you! – Petar-Krešimir May 01 '14 at 22:39
2

Look up the difference between margin and padding. Margins tell how much space should be between views, padding just says that the inner views need to be Xdp from the edge. Since the FrameLayout is a child of the RelativeLayout (and not its sibling), you need to use padding. – ashishduh May 01 '14 at 22:52

Android relative layout bottom margin not working correctly

1 Answers1