CODEWITHSUNDEEP
androidandroid-layoutuser-interface
Violet Giraffe
Violet Giraffe

Reputation: 33579

Make an element fill all the free space in wrap_content-based layout

I have a vertical layout: 2 text field and a horizontal bar of buttons:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff00ff00"
    android:orientation="vertical"
    android:padding="4dp" >

        <EditText
            android:id="@+id/et_email"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:background="#ff00ffff"
            android:inputType="textEmailAddress" >
        </EditText>

        <EditText
            android:id="@+id/et_comment"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:background="#ff00ffff"
            android:inputType="textMultiLine"
            android:maxLines="5"
            android:minLines="5" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_send"
            android:layout_weight="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="OK" />

        <Button
            android:id="@+id/btn_show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Some very long text" />

        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cancel" />
    </LinearLayout>

</LinearLayout>

I want the button bar to have wrap_content size policy (can't even have them fixed size because this app has different localizations). I also want the text fields to have the same width as the button box. Here's how the above xml looks in designer (Eclipse + ADT) with platform 17 selected (and how I want it to look). Colors are just for easy debugging:

enter image description here

And here's how it looks on an Android 4.1 tablet:

enter image description here

This layout is used as a custom layout to a Dialog. No manipulations has been done to the Dialog apart from setting content and title.

Interesting fact: it looks exactly as I want it to (and same as ADT designer shows) on Android 3.1 tablet. But not on 4.1.

How can I achieve the desired layout?

Upvotes: 2

Views: 1309

Answers (2)

Bobbake4
Bobbake4

Reputation: 24847

You might want to use RelativeLayout to accomplish what you're looking for. Try changing your xml to the following:

    <?xml version="1.0" encoding="utf-8"?>
    <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="wrap_content"
        android:background="#ff00ff00"
        android:padding="4dp" >

        <EditText
            android:id="@+id/et_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/buttonbar"
            android:layout_alignRight="@+id/buttonbar"
            android:layout_marginTop="2dp"
            android:background="#ff00ffff"
            android:inputType="textEmailAddress" >
        </EditText>

        <EditText
            android:id="@+id/et_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/buttonbar"
            android:layout_alignRight="@+id/buttonbar"
            android:layout_below="@+id/et_email"
            android:layout_marginTop="2dp"
            android:background="#ff00ffff"
            android:inputType="textMultiLine"
            android:maxLines="5"
            android:minLines="5" />

        <RelativeLayout
            android:id="@+id/buttonbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/et_comment" >

            <Button
                android:id="@+id/btn_send"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/btn_show"
                android:layout_alignTop="@+id/btn_show"
                android:layout_toLeftOf="@+id/btn_show"
                android:text="OK" />

            <Button
                android:id="@+id/btn_show"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Some very long text" />

            <Button
                android:id="@+id/btn_cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/btn_show"
                android:layout_alignTop="@+id/btn_show"
                android:layout_toRightOf="@+id/btn_show"
                android:text="Cancel" />

        </RelativeLayout>

    </RelativeLayout>

Upvotes: 2

user2483079
user2483079

Reputation: 533

This seems silly but it seems to work. Try putting in a nested layout. Change your outer layout width/height to fill parent. Then, inside that make another linear layout with all of your views and such. Give the inner LinearLayout the wrap_content values and that should do it. There's got to be a better way to do it than this but I can't think of it at the moment.

Upvotes: 1

Related Questions