How to prevent other View being pushed out of the screen

Question

this is the example XML

<?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">
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content" android:orientation="vertical"
        android:layout_margin="5dip" android:background="#FF992222">
        <ScrollView android:layout_height="wrap_content"
            android:layout_width="fill_parent">
            <LinearLayout android:layout_height="wrap_content"
                android:orientation="vertical" android:layout_width="fill_parent">
                <TextView android:layout_width="wrap_content" android:text="TextView"
                    android:layout_height="wrap_content" android:textSize="24dip"></TextView>
            </LinearLayout>
        </ScrollView>
    </LinearLayout>
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content" android:orientation="vertical"
        android:layout_margin="5dip" android:background="#FF555555">
        <TextView android:layout_width="wrap_content" android:text="TextView"
            android:layout_height="wrap_content" android:textSize="24dip"></TextView>
    </LinearLayout>
</LinearLayout>

The result is like this :

If you notice, the text in upper LinerLayout are wrapped in LinearLayout and ScrollView.

If the upper content keep added, it will look like this

Bottom Linearlayout will be pushed out of the screen before the ScrollView become active and make the first content become scrollable.... And I don't want that to be happened...

What should I do to make the Scrollview before the bottom View being pushed out of the screen like this :

(this is edited image and not created by Android Layout editor)

Hope the question clear enough.. Thanks :)

Solution 1

Well, if I understand you question clearly, you want the TextView in grey to remain stationary, while the textViews in red can be scrolled around, correct me if I'm wrong here. If thats what you want, then you can use RelativeLayout to achieve that. Following is the code to produce an output like:
http://imageshack.us/photo/my-images/836/device20111011012652.png/
The ListView entries are scrollable while the button(in your case it should be a TextView) stays where it is.

Code:

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

<ListView android:id="@android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/newtask" android:layout_alignParentTop="true">
</ListView>

<Button android:layout_width="fill_parent" 
android:id="@+id/newtask" 
android:layout_height="wrap_content" 
android:text="Add New Task" android:layout_alignParentBottom="true">
</Button>
</RelativeLayout>  

Just change the bottom button to a TextView and it would match what you wanted.

Solution 2

It took me an insane amount of time to figure this out, there is no info on the net, but I finally got it. Enjoy!

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainlayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:orientation="vertical"
 >

<LinearLayout
    android:id="@+id/LL"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"                
    android:gravity="center_vertical"
    android:layout_centerVertical="true"
    android:orientation="vertical"
    android:weightSum="1" >


    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/TV1"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:fillViewport="true" >

        <TextView
            android:id="@+id/TV2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center" />
    </ScrollView>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:layout_weight="0"
        android:orientation="horizontal" >

        <TextView android:layout_width="wrap_content" android:text="TextView"
        android:layout_height="wrap_content" android:textSize="24dip"></TextView>

    </LinearLayout>
</LinearLayout>

Solution 3

Try this. The key is using layout_weight within the linear layout.

<?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">
    <ScrollView android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_width="fill_parent">
        ....
    </ScrollView>
    <TextView android:layout_width="fill_parent" android:text="TextView"
        android:layout_height="wrap_content" android:textSize="24dip"/>
</LinearLayout>

Comments

[Tek Yin]

I know I can achieve last screenshoot with layout_weight. But I want to the first box become flexible.. it will keep small if the content is only 1 / 2 line, and get scrollable when the content getting too many...

[Tek Yin]

Wow great.... Thats not the answer i want to... But it really give me idea how RelativeLayout can do... :) In your xml, when android:layout_alignParentBottom="true" is called, the relativeLayout become fill_parent, and I don't want to. Instead I get rid of it and add android:layout_below="@+id/box1 to bottom box to make it like I want... :)

[Tek Yin]

oh no... it not solve my problem.... This I want to achieve... I want to the first box become flexible... so when the first box content only 1 / 2 line, it will looks like 1st pic. and when the content get too many, it will looks like 3rd pic....

[Urban]

ok this might be a bit though to implement, but if you are using ListViews(which ideally you should use in your case) then you can override the onScroll listener and check if the last entry in the list is visible or not. If it is visible, then you will have to programatically set the alignment of the grey TextView to the bottom of the last item, else set the alignment to bottom of screen(as shown in answer). Reference for checking last entry of listveiw: stackoverflow.com/questions/5123675/…

[Daniel Fekete]

The first box will be flexible if you change android:layout_height="fill_parent" to android:layout_height="wrap_content" in the first LinearLayout. I think.

[Sagar_R]

This should be the accepted answer because it works.

[Chris Foster]

The video link in this answer is broken.

[Rishab Jaiswal]

Worked for me.. Thanks

[Urban]

@lubosz you're looking at a 6 year old answer, that obviously shouldn't be followed anymore. RelativeLayout did have this property back in the day, but things change in 6 years. Instead of downvoting a perfectly legit answer at the time, please consider leaving a note that this answer may not be valid anymore, since that will be more helpful to future visitors.