Horizontal Linear layout scaling not working as expected

Question

I have a activity where I am using a horizontal linear layout to host 3 items. One Image button (Previous Button), one ViewFlipper, and another imageButton (Next Button). The goal is when I click the next and previous buttons, the viewFlipper will flip the items in it.

For sake of clear understanding, I have set the background color of each item with eye-hurting Solid colors, and marking the corresponding items in the component tree with the same color.

The height and width of the ViewFlipper (Red Area) are set as width = fill_parent, height = Fill_parent

Now If I set the Horizontal Linear Layout (Green area) width = fill_parent, height = Fill_parent, the two image buttons get cropped. the width x height of the two image buttons are 50dp x 50dp

If I change the width of the ViewFlipper (Red Area) to Wrap_Content the buttons are fully visible. but there is a huge wasted space in both sides, which becomes even more visible when running in a actual tablet.

How can I fix the layout so that the items are scaled and fitted properly across any screen? my layout XML is provided below.

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="top|center_horizontal"
        android:background="#ff1cff1f">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/ibPrevTemplate"
            android:src="@drawable/selector_prev_template"
            android:scaleType="fitXY"
            android:background="#00ffffff"
            android:layout_gravity="left|center_vertical"
            android:layout_marginRight="5dp" />

        <ViewFlipper
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:id="@+id/vfChooseTemplate"
            android:layout_below="@+id/textView"
            android:layout_alignParentStart="true"
            android:layout_marginTop="20dp"
            android:animateFirstView="true"
            android:background="#ffff2a0e">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center_horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/template_OverlayedText"
                    android:id="@+id/textView3"
                    android:textSize="24sp"
                    android:textStyle="bold" />

                <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageView3"
                    android:layout_marginTop="15dp"
                    android:layout_marginBottom="15dp"
                    android:src="@mipmap/template_textoverimage" />

            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center_horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/template_TextUnderImage"
                    android:id="@+id/textView5"
                    android:textStyle="bold"
                    android:textSize="24sp" />

                <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageView4"
                    android:layout_marginTop="15dp"
                    android:layout_marginBottom="15dp"
                    android:src="@mipmap/template_textunderimage" />

            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center_horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/template_ImageBetweenText"
                    android:id="@+id/textView7"
                    android:textStyle="bold"
                    android:textSize="24sp" />

                <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageView6"
                    android:layout_marginTop="15dp"
                    android:layout_marginBottom="15dp"
                    android:src="@mipmap/template_imagebetweentext" />

            </LinearLayout>

        </ViewFlipper>

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/ibNextTemplate"
            android:src="@drawable/selector_next_template"
            android:scaleType="fitXY"
            android:background="#00ffffff"
            android:layout_marginLeft="5dp"
            android:layout_gravity="center_vertical|right" />

    </LinearLayout>

Answer 1

You could try to use:

<ViewFlipper
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/vfChooseTemplate"
            android:layout_below="@+id/textView"
            android:layout_alignParentStart="true"
            android:layout_marginTop="20dp"
            android:animateFirstView="true"
            android:background="#ffff2a0e">

This way, it should fill the available space.