Develop Reference

Relative Layout is causing issues with formatting

I have been working on an app for my school recently and wanted to clean it up a bit before possibly publishing it. On the scheduling portion of the app, I have 5 buttons that perform actions on a ListView that is also on the screen at the same time. However, I have the issue when I have around 6 or more events on the screen as once the list view takes over the screen and pushes the buttons off the screen, making it so that I cannot delete the events, make new ones, and so on.
I tried setting the list view to a static size (400px) which worked for normal screen orientation, but if the phone is set to landscape view you cannot see the buttons either. With my current code it would appear to work in the XML viewer but in practice is not the case.
This is the code without the static size setting:
<?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:background="#551A8B"
android:textColor="#FFD700"
>
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3">
</Button>
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button3"
android:layout_alignTop="#id/button3">
</Button>
<Button android:text="#string/delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button4"
android:layout_alignTop="#id/button4">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:text="#string/Previousweek"
android:layout_below="#id/button3">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:text="#string/Next"
android:layout_below = "#id/button3"
android:layout_toRightOf = "#id/button7">
</Button>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp" >
</ListView>
</RelativeLayout>
The XML viewer for this code is:
Which would lead me to believe it would work fine. I tested it on my emulator and got the following result after entering a bunch of silly events however:
This result is consistent with multiple versions of the emulator.
How I can fix this problem without using static size constraints that cause landscape orientation issues?

Separate the buttons into a separate RelativeLayout and enclose this and the ListView in a vertical LinearLayout.
Then:
<LinearLayout android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout [...]
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- Your buttons -->
</RelativeLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout
The key point here is the height and weight on the ListView. This means that it fills the remaining space in the LinearLayout after space has been correctly allocated for the buttons.

Add a android:weigth in your listView tag and set the android:weigth value to 1. This will work when your list view height and width is set to fill_parent and your list view is covering entire layout. So try it, it will work.

One simple solution would be to separate the buttons in their own relative layout and put the whole thing in a linear layout, eg:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#551A8B"
android:textColor="#FFD700">
<!-- your buttons -->
</RelativeLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp">
</ListView>
</LinearLayout>

Use a vertical LinearLayout with two rows of Buttons (each row as a LinearLayout), then give the ListView a layout_weight value of "1". In fact, use layout_weight to clean up the size of your buttons too.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:id="#+id/button3" />
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button android:text="#string/Delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Previousweek" />
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Next" />
</LinearLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:textColor="#FFD700"
android:textSize="10sp" >
</ListView>

Stretch scrollview between two objects vertically

Good Afternoon,
I have a list being generated gradually on the users screen, (right now the list is sitting in a scrollview but that might not be the final resting place.) Above the scrollview are a few buttons, and below the scrollview are a few buttons. Scrollview takes up whole middle of the screen.
Right now, as the list is generated, it goes under the buttons below the scrollview. I would like it however to stop at the top. Also looking for it to always display the last line, rather than the new information start disappearing at the bottom.
I know this is probably confusing so if you have any questions please let me know.
Right now the XML looks a little something like this, and its layed out in this order on the screen too.
<Button
android:text="Ok"
android:id="#+id/buttonOk"
android:layout_height="wrap_content"
android:layout_width="75sp"
android:layout_below="#+id/textHoleNumber"
android:layout_alignParentRight="true"></Button>
<ScrollView <-- ***would like this to line up under the OK button***
android:layout_height="wrap_content"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_below="#+id/buttonMinus">
<TextView
android:id="#+id/textScoreCard"
android:layout_height="wrap_content"
android:text="Score card info goes here"
android:textSize="20sp"
android:layout_width="fill_parent"></TextView>
</ScrollView> <-- ***would like this to stay above linear layout***
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/buttonSave"
android:text="Save"></Button>
<Button
android:id="#+id/buttonReset"
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_toRightOf="#+id/buttonSave"
android:layout_alignTop="#+id/buttonSave"
android:layout_alignBottom="#+id/buttonSave"
android:text="Reset"></Button>
</LinearLayout>

Always use Scrollview inside linear layout and give android:layout_weight="1". Try following example it will work..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#null">
<LinearLayout android:id ="#+id/layout_above_scrollview" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ScrollView android:id="#id/android:list" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1">
<LinearLayout android:id ="#+id/layout_above_scrollview" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
// Your components........
</LinearLayout>
</ScrollView>
<LinearLayout android:id="#+id/add_app_done_layout" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_marginTop="5dp"
android:layout_marginLeft="50dp"
android:orientation="horizontal" android:layout_alignParentBottom="true">
<Button android:id="#+id/add_app_done" android:text="Done"
android:layout_width="100dp"
android:textStyle="bold" android:layout_height="wrap_content" />
<Button android:id="#+id/add_app_revert" android:text="Revert"
android:layout_width="100dp" android:layout_marginLeft="5dp"
android:textStyle="bold" android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

If you're talking about what I think you are, try adding a margin to the bottom of the scrollview, and a negative margin to the top of the linear layout. For instance:
<ScrollView android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="60sp">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</LinearLayout>
</ScrollView>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-60sp">
</LinearLayout>
As for scrolling to the bottom of the scrollview when a new item is added, look at How to scroll to bottom in a ScrollView on activity startup.
Note: This is assuming you have your ScrollView and the LinearLayout beneath it all contained in a vertical LinearLayout.

android xml Layout issue

I already spent hours on this, its a layout issue. can someone tell me how to show both image and view switcher in the same activity.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res/rg.client.muscle"
android:layout_width="fill_parent"
android:layout_height="fil_parent">
<ViewSwitcher
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<!-- contains two relative layouts of same sizes
containing same elements just with switched positions -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<com.admob.android.ads.AdView
android:id="#+id/adv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
myapp:backgroundColor="#000000"
myapp:primaryTextColor="#FFFFFF"
myapp:secondaryTextColor="#CCCCCC"
myapp:refreshInterval="30" >
</com.admob.android.ads.AdView>
<LinearLayout
android:id="#+id/linear"
android:orientation="horizontal"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/adv" >
<Button
android:id="#+id/but_prev2"
android:text="Previous"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30" >
</Button>
<Button
android:id="#+id/but_more2"
android:text="More"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="40" >
</Button>
<Button
android:id="#+id/but_next2"
android:text="Next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30">
</Button>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<LinearLayout
android:id="#+id/linear2"
android:orientation="horizontal"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/but_prev"
android:text="Previous"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30">
</Button>
<Button
android:id="#+id/but_more"
android:text="More"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="40">
</Button>
<Button
android:id="#+id/but_next"
android:text="Next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30">
</Button>
</LinearLayout>
<com.admob.android.ads.AdView
android:id="#+id/adv2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linear2"
myapp:backgroundColor="#000000"
myapp:primaryTextColor="#FFFFFF"
myapp:secondaryTextColor="#CCCCCC"
myapp:refreshInterval="30">
</com.admob.android.ads.AdView>
</RelativeLayout>
</ViewSwitcher>
<ImageView
android:id="#+id/image"
android:layout_above="#id/relative"
android:padding="2pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
</ImageView>
</RelativeLayout>
If I put the imageview first then each time a new image is loaded the buttons disappear and the whole layout seems to be re inflated
Update:
The layout must have an image view at the top then a view switcher.

I imagine a lot of it has to do with you not being able to read your XML. If it looks anything like the way you originally pasted it in here, that is. Your first problem is that you have nothing in your root RelativeLayout tag specifying a size. Your root layout should be in most cases set to a layout_width of fill_parent, same with the layout_height. You also need your schema specification (i.e. xmlns:android="http://schemas.android.com/apk/res/android" although I'm assuming you just left that out, since you're actually getting it to compile.
You also may want to keep in mind, since most everything is set to wrap_content for height, if it ever exceeds the height of the screen, some of it will not be visible, so you may consider wrapping the inner portion into a ScrollView.
EDIT: Again, I'd suggest setting your RelativeLayout (root element) to have a height of fill_parent. Try defining your ImageView first, leaving it with alignParentTop="true", then define your ViewSwitcher, and give it the layout_below="#id/image" attribute.

And small advice, use include layout, it will be more clear.
<include layout="#layout/my_other_layout" />

Android XML: Centering Horizontally On Bottom

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:text="Title"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30px"
android:textStyle="bold"
>
</TextView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60px">
<Button
android:text="Choose a Story"
android:id="#+id/choose"
android:layout_width="150px"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="1px">
</Button>
<Button
android:text="Info"
android:id="#+id/info"
android:layout_width="150px"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="1px">
</Button>
</LinearLayout>
</LinearLayout>
In this code, as you can see, there is a title, 2 linear layouts, and 2 buttons that are inside a linear layout. What I'm trying to do is center the 2 buttons. No matter what I do, I can never get the 2 buttons to be centered at the bottom with a height of 60px.
In the end I'm trying to make the text centered both vertically and horizontally, and have the 2 buttons on the bottom centered horizontally. What do I need to change?
Heres a picture of what it looks like in the Layout Editor.

On your inner linear layout, set the layout_gravity.
Here's one solution
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:text="Title"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dip"
android:textStyle="bold"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="1dip"
>
<Button
android:text="Choose a Story"
android:id="#+id/choose"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<Button
android:text="Info"
android:id="#+id/info"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
</FrameLayout>
In general, you should style the outermost component (container) which will then position all of its children accordingly. As a side not, this layout would be achieved using just a single (or pair, depending on exactly what you're trying to do) or FrameLayouts, which would significantly reduce the layout overhead. While there's nothing wrong with LinearLayout, it is surprisingly computationally expensive.

Android layout with 2 evenly spaced Buttons

I have this layout that works correctly, a relative layout with a text view and two buttons spaced evenly below it.
<RelativeLayout android:id="#+id/entrypopup"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:padding="5px"
android:visibility="gone"
android:layout_below="#+id/ad"
android:background="#80000000">
<TextView android:id="#+id/title" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Entry Popup..."
android:textColor="#ffffffff"
android:textSize="20sp" />
<TableLayout android:id="#+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title">
<TableRow android:layout_weight="1">
<Button android:id="#+id/buttonVisit" android:text="View"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"/>
<Button android:id="#+id/buttonCancel" android:text="Cancel"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent"/>
</TableRow>
</TableLayout>
</RelativeLayout>
But running layoutopt it says that "this TableRow layout or its TableLayout parent is possible useless".
Is there a way to do this layout then without the tables?

Dump the TableLayout and TableRow, and just use a horizontal LinearLayout in their place. The "magic" is in your 0dip width and 1 weight, which you already have.