I'm trying to create the design shown below but with a responsive height on the image buttons for different screens.
While I can get a responsive width by using android:layout_weight
I can't manage to apply the same method to the button's height. What I'm trying to achieve is what's shown below but with the height of the screen evenly distributed amongst the buttons. i.e. 25% of the screen's height for each row of buttons.
Any help would be greatly appreciated!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="@+id/linear1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="0dp"
android:layout_weight="0.40"
android:layout_height="wrap_content"
android:src="@drawable/ic_pages" />
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="0dp"
android:layout_weight="0.60"
android:layout_height="wrap_content"
android:src="@drawable/ic_pages" />
</LinearLayout>
<LinearLayout
android:id="@+id/linear2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/linear1"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="0dp"
android:layout_weight="0.60"
android:layout_height="wrap_content"
android:src="@drawable/ic_pages" />
</LinearLayout>
<LinearLayout
android:id="@+id/linear3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/linear2"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/imageButton5"
android:layout_width="0dp"
android:layout_weight="0.40"
android:layout_height="wrap_content"
android:src="@drawable/ic_pages" />
<ImageButton
android:id="@+id/imageButton6"
android:layout_width="0dp"
android:layout_weight="0.60"
android:layout_height="wrap_content"
android:src="@drawable/ic_pages" />
</LinearLayout>
<LinearLayout
android:id="@+id/linear4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/linear3"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/imageButton7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.60"
android:src="@drawable/ic_pages" />
<ImageButton
android:id="@+id/imageButton8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.40"
android:src="@drawable/ic_pages" />
</LinearLayout>
</RelativeLayout>
Wrapping each horizontal LinearLayout in a FrameLayout achieved the desired effect.