Develop Reference

Android layout: first element at the bottom, rest available below after scrolling

I would like to achieve following result with a layout:
1) most of the view is empty;
2) first element is at the bottom of what is visible of the screen
3) there are following elements below the first one available through scrolling down.
Is it possible to achieve that?
Maybe I can achieve it through some empty placeholder at the top? How I make it fill all the space available on the screen, but not to go over the first element?

Following xml will show first element at the bottom of the page and on scroll next elements can be accessed.
<?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="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:background="#android:color/darker_gray" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="TEXT1" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Let me know this solves your problem :-)

I managed to achieve this using padding on the first element and moving it the bottom of the screen. I had to set up the padding programmatically after the initial layout is drawn and sizes of all views are known.

Layout: background picture stretched

I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />

Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)

Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your 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"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>

I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.

Layout: bottom bar + scrollview over it that start from top

I can't find a solution for that. I managed to solve the problem of NOT overlapping the scrollview with my button+textview at the bottom, but I still can't manage to have the scrollview starting from the top of the screen rather than from just above my button.
Note that even the bottom linearlayout (button+textview) isn't exactly what I wanted. I can't find a way to have everything positioned correctly.
Eclipse is not helping either, since the text view of the xml keeps changing under my mouse, making it extremely annoying. I had to open an external editor to edit it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top" >
<LinearLayout
android:id="#+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<TextView
android:id="#+id/text_phrase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/play" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/LinearLayout2"
android:layout_alignParentLeft="true"
android:layout_marginBottom="18dp" >
<LinearLayout
android:id="#+id/layout_player_checkboxes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:orientation="vertical" >
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox" />
</LinearLayout>
</ScrollView>

if you add android:layout_alignParentTop="true" and android:layout_weight="1" to your scrollview while leaving the rest of what you have already, it should start at the top and fill the screen below until it comes to linearlayout2. (Same applies if you decide to switch to a listview as rajesh.adhi suggested)
Oh, you seem to be missing a </RelativeLayout> there too.

Place a fixed height button at the bottom of the screen always

I wish to keep a button at the bottom of my Activity screen. It has to be fixed irrespective of the size of scrollview above it. The problem is that once the textviews of the scrollview take up some place, the height of my button keeps decreasing and it eventually gets pushed out of the activity screen. This is the layout I am using.
<?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/tvBanner" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:gravity="center"
android:text="Practice Exam" />
<ScrollView android:id="#+id/Scroll" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/LinearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="#+id/tvDesc" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="10dp"
android:gravity="center" android:paddingTop="40dp" android:text="#string/welcom"
android:textSize="20sp" />
<TextView android:id="#+id/tvURL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="30dp"
android:paddingTop="10dp" android:layout_gravity="center"
android:text="hello" android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom">
<Button android:id="#+id/btBottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="Enter" />
</RelativeLayout>
</LinearLayout>
I have also tried using android:weight=1 and android:layout_height=0dp in the Scrollview. But this removes the entire Scrollview portion from my activity and I can't see anything.
I do know that there are many similar questions asked about this and believe me, I have tried many of these. However, none of the tricks have worked for me. I have spent almost half a day fixing this. Kindly help.

For a case like this always use RelativeLayouts. A LinearLayout is not intended for such a usage.
Try this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter"
android:layout_alignParentBottom="true"/>
<ScrollView
...
android:layout_above="#id/btnGetMoreResults"/>
</RelativeLayour>

You should try using RealativeLayout instead of Linear, and then you could use
android:layout_above="#+id/btBottom"
android:layout_alignParentBottom="true"
That should solve your problem.

looks like you need 'alignParentBottom' in your button like this
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Enter" />

Do not wrap Button to RelativeLayout
Set layout_height of ScrollView to 0dp
Add layout_weight of ScrollView to 1

For this it would probably be a good idea if you used RelativeLayout for the outer wrapper layout. Then you could just set the layout with the button inside to LinearLayout and set layout_alignParentButtom="true" while you set your #+id/Scroll to layout_alignParentTop="true"
Also, you should probably set the layout with the button inside´s height to wrap_content instead of fill_parent

Why do you use a LinearLayout at top level at all ?
Choose a RelativeLayout with fill/fill and the following three childern (no further nesting !):
1) TextView with android:layout_alignParentTop="true" and android:layout_centerHorizontal="true"
2) Button with android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
3) ScrollView with android:layout_below=#id/textview_id and android:layout_above="#id/button_id"
I didn't test it though, but give it a try.

Layout positioning problem with Custom SlidingDrawer

Hi everyone i've been trying to make this work for quite a while and i feel stuck, i found a component on web wich is pretty nice, it allows me top to bottom sliding, the default sample is pretty easy the bar goes on top and the goes down:
<?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/button_open"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/open"
android:layout_centerInParent="true"
android:visibility="gone" />
<TextView android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content"
android:text="#string/default_feed_detail" android:id="#+id/txtDetailNews" ></TextView>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:id="#+id/drawer"
my:direction="topToBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
my:handle="#+id/handle"
my:content="#+id/content">
<include
android:id="#id/content"
layout="#layout/pen_content" />
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
</RelativeLayout>
And it renders like this quite nicely:
But now i want to have a header image between the text and between then the custom slidingdrawer it just not render the text
<?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/button_open" android:layout_width="100dp"
android:layout_height="wrap_content" android:text="#string/open"
android:layout_centerInParent="true" android:visibility="gone" />
<ImageView android:id="#+id/header" android:src="#drawable/header"
android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:layout_below="#id/header"
android:id="#+id/drawer" my:direction="topToBottom"
android:layout_width="fill_parent" android:layout_height="wrap_content"
my:handle="#+id/handle" my:content="#+id/content">
<include android:id="#id/content" layout="#layout/pen_content" />
<ImageView android:id="#id/handle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
<TextView android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_below="#id/drawer"
android:layout_width="wrap_content" android:text="#string/default_feed_detail"
android:id="#+id/txtDetailNews"></TextView>
</RelativeLayout>
and now the text is gone.... any suggestion with Relative Layout, or If anyone has an idea or component so it can be done easly that would be great too thanks!!
Edit
I found something interesting with the hierarchyviewer using the following layout to arrange the components:
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:layout_above="#id/txtDetailNews"
android:id="#+id/drawer" my:direction="topToBottom"
android:layout_width="fill_parent" android:layout_height="wrap_content"
my:handle="#+id/handle" my:content="#+id/content">
<include android:id="#id/content" layout="#layout/pen_content" />
<ImageView android:id="#id/handle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
it seems that the components that are inside the Drawer are being render and take all the space as shown here:

First off, you really need to proof-read your questions. You would probably have had more response by now if you had fixed some very basic grammar mistakes and added a few clarifications to what you wrote.
Here are a couple things to try: move the TextView above the sliding drawer in the XML, as you did in the first layout. Leave the android:layout_below="#id/drawer" attribute- but if it does not work, try removing that.
Try that, we'll go from there.

Try: android:layout_alignWithParentIfMissing="#id/header" on the last TextView.

Well i had to do a little workaround with this since the content on the background took the space, and the Textview was giving up its space what i did was the following:
I place the TextView after the header imageView with a paddingTop of a 100dip.
android:layout_width="wrap_content" android:text="#string/default_feed_detail"
android:id="#+id/txtDetailNews" android:layout_alignWithParentIfMissing="#id/header" ></TextView>
Then on the MultiDirectionalSlidingDrawer i set the content with a android:layout_above="#id/txtDetailNews"
And that pretty much solve the problem rendered the sliding between the Content and the header, Thank you all for helping me out... Specially Nathan Fig you earn those 50 man (y)