Develop Reference

Android relative layout bottom margin not working correctly

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.

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

Relative Layout containing FrameLayout and few other components

firstly excuse me for terrible naming with the subject.
I have the following layout setup:
<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"
tools:context=".PersonDetails" >
<FrameLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/default_cover">
</ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</FrameLayout>
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
What i am trying to achieve is to have a banner (much like facebook cover that spans across the top of the screen). And have a thumbnail photo at the corner left of the banner.
The height of the banner should only takes up about 1/4 of the height of the screen. Since i would need the rest of the space for other components.
Immediately below the banner i would like to have a TextView (on the leftside) and a button on the rightside.
So far i can only able to put the thumbnail on top of the banner, but i don't know how to place it on the lower left (i could set it using marginTop but, i believe this is not the correct way of doing it).
Does anyone know how to achieve this? Thanks.
EDIT #1:
Here is the UI

From your description i think you want to make something like this:
I used a linearlayout with 2 layouts as content. Using the android:layout_weight attribute we can make the top layout take up 1/4th of the space, while the bottom layout has the rest to use.
Then to position the icon in the top layout we use alignParentBottom to make it stick to the bottom.
<LinearLayout 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"
tools:context=".PersonDetails"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/default_cover"></ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="10dp">
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</LinearLayout>

RelativeLayout containing a webview and another relativelayout

I am trying to make an Activity that has a WebView and a small bar at the bottom with height of 40dp which has buttons for refresh, back, forward, etc. The issue i'm facing is that I want the WebView to consume the height of the entire view except for the bottom 40dp.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
Above is what I have so far... Right now the browser has height of the whole screen with the RelativeLayout at the bottom (covering a piece of the browser). Is there anything else I can do to leave the bottom 40dp for the RelativeLayout only?

Put the webview so it layout_above the 2nd relative layout. Then change the relative layout to be aligned to parent bottom. That ought to work

Figured it out.
I was able to do the below:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_above="#+id/id_web_view_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:id="#+id/id_web_view_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/icon_refresh"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
In the WebView I set the following property: android:layout_above="#+id/id_web_view_bar". That kept the bottom 40dp for the bar.

Kinda late... however might help any other arround...
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_xs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/button_xs"/>
</RelativeLayout>
In this case theres no need specific any height for the button or other view suppose to be after the webview.

List and image in the same ScrollView

I'm trying to get an image and a list in the same 'scroll' (I don't know how else to put it). My basic (vertical) layout is:
TextView
ImageView
ListView
I'm trying to get the scrolling as if the image is a list item itself. So the textview has to stay in place at the top and everything else has to scroll under it.
At the moment I have the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/app_purple"
android:orientation="vertical" >
<TextView
android:id="#+id/about_app_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="15dp"
android:text="#string/about_app_label"
android:textColor="#color/background"
android:textSize="20dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/app_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/logo" />
</LinearLayout>
<ListView
android:id="#+id/information_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:divider="#drawable/listdivider"
android:dividerHeight="1dp"
android:fadingEdge="none" >
<!-- Preview: listitem=#layout/row -->
</ListView>
Any help would be greatly appreciated!
EDIT
The custom row layout for the listView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/listview"
android:orientation="horizontal"
android:padding="4dip" >
<ImageView
android:id="#+id/list_icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:layout_marginRight="5dp"
android:contentDescription="#string/icon_content_description" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_label"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:maxLines="1"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColor="#color/result_label"
android:textStyle="bold" />
<TextView
android:id="#+id/list_count"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/list_label"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:textColor="#color/text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textColor="#color/text"
android:textColorLink="#color/app_purple" />
<ProgressBar
android:id="#+id/list_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>

You would have a vertical LinearLayout holding the fixed TextView and the ListView. Your ImageView would be a header on the ListView, added via addHeaderView(). Headers, despite their name, scroll with the contents of the ListView.

to make custom list views you need to create a single_list_item.xml file to arrange everything you want to scroll for example the image with a description text next to it. Also you need to add a ListView on your Xml file so the program can process the view. And them, you can process everything on your java file using an adapter. and the the list will appear at the bottom of the text.
There is a great example of how to do it here

it's not clear what exactly are you trying to do. ScrolView can have only ONE child. so I guess you should put the ImageView and the Listview in a LinearLayout.
but any way - it's a bad idea to put a Listview inside a ScrollView - how would the OS now what are you trying to scroll? the ListItem or the whole list. if you can be more specific - I can try help more...

How to avoid space between imageview and gridview in linearlayout

I have a image view and grid view in my .xml file. When I am executing this file its getting some space between grid view and image view. How to avoid this space...can any one help me to solve this problem.
thanks in advance...
my xml code is:
android:layout_width="0px"
android:layout_height="0px">
</Button>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/prevMonth"
android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<Button
android:id="#+id/currentMonth"
android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<ImageView
android:id="#+id/nextMonth"
android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_gravity="bottom|center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/calendarheader"
android:src="#drawable/blue_bg_with_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</ImageView>
</LinearLayout>
<GridView
android:id="#+id/calendar"
android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</GridView>

You should try setting the android:gravity attribute correctly, and it has to work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:gravity="bottom|center_horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageView android:id="#+id/calendarheader" android:src="#color/blue_start"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:minWidth="250dp" android:minHeight="30dp">
</ImageView>
</LinearLayout>
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#color/blue_start">
</GridView>
</LinearLayout>
i'm using here simple color background, and there is no gap:
If you still having the problem, then you should see your blue_bg_with_text2 image, whether it has any empty pixels at the bottom.
ps: ignore the android:minWidth="250dp" android:minHeight="30dp" part, it is there to imitate an image with that size.
Update
Here is the same view using RelativeLayout (it's a bit clearer at least for me):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/selectedDayMonthYear"
android:textColor="#000000" android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="0px" android:layout_height="0px" />
<ImageView android:id="#+id/prevMonth" android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#+id/nextMonth" android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<Button android:id="#+id/currentMonth" android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/prevMonth"
android:layout_toLeftOf="#id/nextMonth"
android:layout_alignBottom="#id/prevMonth"
android:layout_alignTop="#id/prevMonth" />
<ImageView android:id="#+id/calendarheader" android:src="#drawable/calendarheader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="25dp"
android:layout_centerInParent="true"
android:layout_below="#id/currentMonth"
android:layout_margin="0dp"
android:scaleType="fitXY" />
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/calendarheader"
android:layout_margin="0dp"
android:background="#color/white_fader_end">
</GridView>
</RelativeLayout>
I've added to it my resources as background (two of them are actually screenshots from yours).
What i observed is, you must
either use a static image for your
calendar header background, or,
if you use an xml drawable, you have
to drop the stroke element from it / set its android:width to 0
otherwise it will add an unnecessary gap around your view's drawable, that is as wide as the stroke width you've specified.
my output using static images as backgrounds looks this way:
Update 2
The problem is not between your calendar header and gridView, but inside your gridView.
It has a 'padding' of 5 px inside (not real padding, see how it gets there):
The default selector for the GridView is a 9x9 patch rectangle with a border of 5px.
That 5 px is visible all around your gridView.
You can specify a different listSelector for this grid either by xml:
android:listSelector="#drawable/grid_selector"
or from code (onCreate):
gridView.setSelector(R.drawable.grid_selector);
Now if your grid_selector is an image or is a drawable xml without any margins, then the gap that causes the problem is gone.
You can also hide that gap, by setting a background color to your gridView, that matches or grandients the calendar header's background color.