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

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.

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.

Answer 1

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