Develop Reference

ListView hidden behind button

The contents of my list view get hidden behind the button as follows:
The xml file is:
<?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"
android:layout_gravity="top"
>
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
/>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:text="Send"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="addItems"
>
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content"
>
</EditText>
</RelativeLayout>
</RelativeLayout>
The TextView for each row is as follows:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content
android:layout_gravity="right"
android:gravity="right"
android:textSize="20sp"
/>
What should i do to align it properly (as in above the button)?
Also when the listView is with just one or two entries, and when the keyboard is opened to type, the whole view shifts? How do I fix that as well? Thanks in advance

Cleaned up and corected the code a bit. Perhaps this is what you were looking for. Let me know if it works. Cheers !
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" />
<EditText
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_toLeftOf="#id/Button" />
</RelativeLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/InnerRelativeLayout" />
</RelativeLayout>

adding android:layout_above="#+id/InnerRelativeLayout" to your ListView.
RelativeLayout has child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
For put your InnerRelativeLayout layout at Top add android:layout_alignParentTop="true" to your InnerRelativeLayout and remove android:layout_alignParentBottom="true"
Update: set up your Layout like below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/Beige "
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" >
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:hint="Enter text" >
</EditText>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/InnerRelativeLayout"
android:drawSelectorOnTop="false" />
</RelativeLayout>
Output:

use android:layout_above="#+id/InnerRelativeLayout" in your listview

Make the outer RelativeLayout into a LinearLayout with orientation vertical. Then, for the ListView set layout_height as 0dp and layout_weight as 1. The ListView will fill up all the remaining space in the LinearLayout without overlapping other views.
Also, stop using fill_parent, it's been deprecated and you should use match_parent instead.

Vertical RelativeLayout: how to achieve fixed header and footer and scrollable main area?

This is a layout I'm having problems with (this is for ListActivity):
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
<Button
android:id="#+id/negative_button"
style="#style/Button"
android_alignParentBottom="true"
android:layout_below="#android:id/empty"
android:layout_weight="1" />
</RelativeLayout>
What happens right now is the list is below header TextView ("path") as it should be, the button is at the bottom also as it should be, but the ListView is not aligned between the header (textview) and footer (button). Instead, the button is simply slapped on top of listview. How can I fix that?

You need to define the footer and header before the list, try something like this:
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<!-- to see the button, you must to declare its width/height here
and not (as I think you did) in the style.xml -->
<Button
android:id="#+id/negative_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Button"
android:layout_alignParentBottom="true" />
<!-- also layout_weight doesnot change anything in RelativeLayout -->
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path"
android:layout_above="#id/negative_button" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</RelativeLayout>

The TextView "empty" should not be below the TextView "empty".
If the Button must be at the bottom of the screen you can use
android:layout_alignParentBottom="true"
For the Button
Otherwise you can use this layout :
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path">
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</LinearLayout>
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/container" />
</RelativeLayout>
Or ever add the Button as a footer of you Listview :
mListView.addFooterView(mButton);
http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)

The only things that you used are the ListView, the first TextView as a "top bar" and the Button as a "bottom bar", right? If it is the case, why did you keep the empty TextView?
Try to remove it and try this layout:
<?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:orientation="vertical" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<!-- work also with android:layout_height="0dip" -->
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Saw on these questions, it might be help you:
1. Layout for ListView at top and Buttons in Bottom?
2. Android Layout with ListView between a "top bar" and "bottom bar"
3. Add a button in bottom of listview when the listview is empty (using ListActivity)
Hope this will be helpful and you'll have the expected result.

Alight two buttons in the same Horizontal Line

I am trying to make the "Save" and "Attach Pic" buttons align at the top of my xml page but I can't quite get it to work. I got it to the point where the buttons would align just not in the same horizontal line. Oh, and is there any way that I can make both buttons align in the top left and top right corners?
Here is the xml page:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff" >
<!-- Footer Start -->
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="90dip"
android:layout_alignParentBottom="true"
android:background="#layout/footer_repeat"
android:orientation="horizontal" >
</LinearLayout>
<!-- Footer Ends -->
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<!-- Save button -->
<Button
android:id="#+id/btnSavePic"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dip"
android:text="#string/savePic"
android:layout_gravity="top|left"/>
<Button
android:id="#+id/btnAttachPic"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dip"
android:text="#string/attachPic"
android:layout_gravity="top|right"/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Added picture:
http://tinypic.com/view.php?pic=4ihut4&s=5#.Uj9eHBbnZAh

I would suggest using an eclosing LinearLayout:
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/btnSavePic"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/savePic"
/>
<Button
android:id="#+id/btnAttachPic"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/attachPic"
/>
</LinearLayout>

Try this. Hope it will work.
Change your orientation to horizontal in
So that you can get the buttons in horizontal alignment.
Pls vote if it get works.

Wrapping a ListView inside a LinearLayout

I'm trying to make a screen with a TextView at the top, the ListView in the middle and a Button at the bottom. I'd like it to be so that the TextView always is the top at the screen and the button always is the bottom, and then the ListView is in between. When the ListView exceeds the "space in the middle" I'd like the scroll-function to be only between the TextView and Button. With my attempt it just expands beyond the TextView and Button.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvLOL"
android:layout_alignBottom="#+id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
</RelativeLayout>

See if this helps(the LinearLayout wrapping the ListView should be removed(and move the layout_above/below to the ListView) if you only use it to wrap the ListView and nothing else):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvLOL"
android:layout_above="#id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>

Just an alternative solution to that of #Luksprog, although that's definitely the way to go for more complex layouts. I would ditch the LinearLayout that surrounds the ListView though, as it doesn't add anything, except for unnecessary complexity in the view hierarchy.
A relatively simple layout as described in your question can also be written using a LinearLayout as root and a weight on the ListView to dynamically fill up all space inbetween the TextView and Button. This weight also pushes the Button all the way to the bottom, without pushing it off.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/paper" android:orientation="vertical">
<TextView android:id="#+id/tvLOL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:text="Standardvarer" android:textSize="40dp" />
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_weight="1" />
<Button android:id="#+id/bNyVare" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Tilføj ny vare"
android:textSize="30dp" />
</LinearLayout>

RelativeLayout, ScrollView and navigation bar at bottom

What I want to do is, make layout like this:
Title
Date
Long text with scrolling
Navigation bar stick to the bottom
Well I have done everything, however there is a little problem with scrolling. I want only to scroll text. Title and date should be stick to the top, and nav bar to the bottom of activity. And yes, it works, but my nav bar overlaps text :/
I tried everything, there is one solution I found, set fixed height for Scrollview, but this will not work on every devices well, isn't it? I probably could do some calculation in code, and on it change height, but I would like to stay in XML.
Any one have any suggestions?
Here is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="#+id/feed_title"
style="#style/h1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="#+id/feed_info"
style="#style/h2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="#+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="#drawable/ic_fav_off" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="#+id/feed_text"
style="#style/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Loren ipsum full tekst" />
</ScrollView>
</LinearLayout>
<!-- Buttons -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="#+id/go_to_article"
style="#style/button_screen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="#string/feed_show_full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/next_feed"
style="#style/button_screen"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/button_arrow_up" />
<Button
android:id="#+id/share_feed"
style="#style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="#string/feed_share" />
<Button
android:id="#+id/delete_feed"
style="#style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="#string/feed_delete" />
<Button
android:id="#+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/button_arrow_down" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
</RelativeLayout>

Here are the things I have changed:
Moved top layout to bottom
Gave bottom layout name android:id="#+id/bottom_layout"
Gave top layout a name android:id="#+id/top_layout" (Not necessary just for clarity)
Now top layout will have these properties:
android:layout_above="#id/bottom_layout"
android:layout_alignParentTop="true"
The first one is to make top layout anchored above bottom layout.
Second one is to align top edge of top layout to parent's top. Which in this case is RelativeLayout.
Now bottom layout will have these properties:
android:layout_alignParentBottom="true"
It will tell that bottom edge of bottom layout matches with bottom edge of parent (which is RelativeLayout)
Below is the fully working layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Buttons -->
<LinearLayout
android:id="#+id/bottom_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="#+id/go_to_article"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="Feed full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/next_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:id="#+id/share_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="share" />
<Button
android:id="#+id/delete_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="delete" />
<Button
android:id="#+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
<LinearLayout
android:id="#+id/top_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_layout"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="#+id/feed_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="#+id/feed_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="#+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="#+id/feed_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/long_test" />
</ScrollView>
</LinearLayout>
</RelativeLayout>

Did you try to put a weight to the scroll layout ?
LinearLayout
- LinearLayout
-- Title
-- Date
- ScrollView layout_weigth=1
-- TextView
- LinearLayout
-- Button
-- Button
-- Button

Drag the bottom edge of the LinearLayout (lets call it l1) holding your text and align it to the top edge of the linear layout holding your navigation bar (let's call it l2). So that the AbsoluteLayout.above on l1 is equal to l2.
<LinearLayout android:id="#+id/l1"
android:layout_above="#+id/l2">
</LinearLayout>

Like Jonas says, but to give you a litte more, make sure you fill in the other stuff.
<LinearLayout
android:layout_height="fill-parent">
<LinearLayout
android:layout_height="wrap_content">
put your title and things in here
</LinearLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_weight="1"> <!-- this makes it not overlap the layout(navbar) below-->
put your title and things in here
</ScrollView>
<LinearLayout
android:layout_height="wrap_content">
put your nav bar stuff in here
</LinearLayout>
</LinearLayout>
If you do not set the layout_weight, the scrollview will actually push the navbar out off the bottom of the screen in this configuration. It has something to do with how the space for layouts is reserved, I'm not completely sure why, but adding weight delays the reservation till later.
Since the scrollview is filling the parent but still is part of the linear layout, the layout will make sure to accomodate your lower navbar, and unlike the Relative Layout there will be no overlap.