Android Adjusting ImageButtons in a GridLayout

Question

I have a GridLayout with seven ImageButton s. I want to have them in two equal rows in height and four equal columns in width, 4 buttons in the first row, and 3 buttons in the second row. Here is my problem... I want to have the last button to be spanned over two columns. I used some test images with greater dimensions than original button dimensions. Also, I made a XML file, as below, to be referenced for button styles.

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="ButtonStyle">
    <item name="android:textColor">#00FF00</item>
    <item name="android:typeface">monospace</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:background">@android:color/background_light</item>
    <item name="android:layout_marginLeft">5dip</item>
    <item name="android:layout_marginRight">5dip</item>
    <item name="android:layout_marginTop">5dip</item>
    <item name="android:layout_marginBottom">5dip</item>
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_gravity">fill</item>
    <item name="android:layout_columnWeight">20</item>
    <item name="android:scaleType">fitXY</item>
  </style>
</resources>

I have no problem in arranging them using the default layout_columnSpan for ImageButton7, that is 1. But, when I set layout_columnSpan to 2 for that ImageButton, the second row extends in height, giving the second view.

View when ImageButton7, layout_columnSpan=1

View when ImageButton7, layout_columnSpan=2

Here is my XAML code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <GridLayout
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gridLayout1"
        android:columnCount="4">
        <ImageButton
            android:src="@drawable/btn0"
            android:id="@+id/imageButton1"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn1"
            android:id="@+id/imageButton2"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn2"
            android:id="@+id/imageButton3"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn3"
            android:id="@+id/imageButton4"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn4"
            android:id="@+id/imageButton5"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn5"
            android:id="@+id/imageButton6"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn6"
            android:id="@+id/imageButton7"
            style="@style/ButtonStyle"
            android:layout_columnSpan="2" />
    </GridLayout>
</LinearLayout>

The goal is to have a view like the picture below. Any help would be appreciated.

Answer 1

The image button tries to keep aspect ratio of your image so when yoy span Button7 its width will extend and therefor its height extends to keeep the aspect ratio.

Then when height gets bigger all of the rows height gets bigger and this happens ;)

To solve your problem just make you button7 image in a way that its aspect ratio is suitable for two columns (like 2x width of now) and your problem will be solved ;)

Another to way to address your problem is to creat a 9patch image . Look this link:

https://developer.android.com/studio/write/draw9patch.html

9pAtch images are extendible and great things.

Answer 2

Why use GridLayout for that? I would use LinearLayout with weights (in pseudo xml):

<Vertical LinearLayout>

<Horizontal LinearLayout with weightsum=4>
<element with weight 1/>
<element with weight 1/>
<element with weight 1/>
<element with weight 1/>
</Horizontal LinearLayout with weightsum=4>

<Horizontal LinearLayout with weightsum=4>
<element with weight 1/>
<element with weight 1/>
<element with weight 2/>
</Horizontal LinearLayout with weightsum=4>

</Vertical LinearLayout