Question

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_weightI 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>

enter image description here

Was it helpful?

Solution

Wrapping each horizontal LinearLayout in a FrameLayout achieved the desired effect.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:orientation="vertical" >
<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="0dp"
    android:layout_weight="0.25">

<LinearLayout
    android:id="@+id/linear1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="0dp"
        android:layout_weight="0.40"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_pages" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="0dp"
        android:layout_weight="0.60"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_pages" />

</LinearLayout>
</FrameLayout>

</LinearLayout>

</RelativeLayout>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top