Using in android.support.v7.widget.GridLayout not displaying correctly

Question

I'm trying to use <include> to include ImageButtons inside a android.support.v7.widget.GridLayout. The problem is, if I don't specify all the attributes explicitly on my <include> elements, they don't display properly. In other words, the include is pointless since I have to redeclare all the attributes on every <include> element.

dialpad_button.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    android:layout_width="0dp"
    android:layout_height="0dp"
    grid:layout_columnWeight="1"
    grid:layout_rowWeight="1"
    grid:layout_gravity="fill"
    android:layout_margin="5dp"
    android:scaleType="centerInside"/>

dialpad_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dialpad_grid_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    grid:alignmentMode="alignBounds"
    grid:columnCount="2"
    grid:rowCount="1">

    <include
        android:id="@+id/dialpad_view_btn1"
        android:src="@drawable/dialpad_1"
        layout="@layout/dialpad_button" />

    <include
        android:id="@+id/dialpad_view_btn2"
        android:src="@drawable/dialpad_2"
        layout="@layout/dialpad_button" />


</android.support.v7.widget.GridLayout>

If I declare all the attributes directly on the <include>s, here's what it looks like in XML:

    <include
        layout="@layout/dialpad_button"
        android:id="@+id/dialpad_view_btn1"
        android:src="@drawable/dialpad_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_gravity="fill"
        android:layout_margin="5dp"
        android:scaleType="centerInside" />

As you can see in the comparison image below, the buttons now scale properly but the images are nowhere to be seen.

And if I change the <include>s to ImageButton, things work as expected.

    <ImageButton
        android:id="@+id/dialpad_view_btn1"
        android:src="@drawable/dialpad_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_gravity="fill"
        android:layout_margin="5dp"
        android:scaleType="centerInside" />

Is there a workaround to this?

Since I'm going to have 12 near-identical buttons in my dialpad, I'd really like to clean the XML up by including a "template" and only modifying the necessary attributes for each button (i.e. src and id).

EDIT

Trying to use styles, as suggested in one answer, did not work. None of the views that I applied the styles to get displayed. What's even more strange, even if I just apply the style to one of the views in the GridLayout, only the last view gets displayed (I've shortened down the sample code here to only two views for readability, in reality I have twelve).

Here's the style I tried using:

<?xml version="1.0" encoding="utf-8"?>
<resources
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:grid="http://schemas.android.com/apk/res-auto" >

    <style name="dialPadButtonStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="grid:layout_columnWeight">1</item>
        <item name="grid:layout_rowWeight">1</item>
        <item name="grid:layout_gravity">fill</item>
        <item name="android:layout_margin">5dp</item>
        <item name="android:scaleType">centerInside</item>
        <item name="android:background">@android:color/transparent</item>
    </style>
</resources>

Iulian Popescu · Answer 1 · 2018-02-02T10:37:44.177

0

Maybe you can use a style to declare the common attributes and then set it for every button.

<style name="dialPadButtonStyle">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">0dp</item>
    <item name="android:layout_columnWeight">1</item>
    <item name="android:layout_rowWeight">1</item>
    <item name="android:layout_margin">5dp</item>
    <item name="android:src">@android:drawable/ic_menu_camera</item>
</style>

I also added: columnCount to 3 and rowCount to 4 for GridLayout and added 12 ImageButtons with that style. The final result is this:

edited Feb 02 '18 at 10:37

answered Apr 04 '16 at 14:06

Iulian Popescu

2,347
4
20
29

Good suggestion, unfortunately it didn't work. None of the views that I apply the styles to are displayed. Even stranger is that even if I apply the style to only one of the views, only the last view in the GridLayout is displayed! – Magnus W Apr 04 '16 at 14:38
Can you post the style, please? – Iulian Popescu Apr 04 '16 at 14:43
I updated my answer. Check it to see if it's ok now :D – Iulian Popescu Apr 04 '16 at 15:25
It works with `GridLayout`, but not `android.support.v7.widget.GridLayout`. Unfortunately, `GridLayout` is not available before API 21, and I'm targeting API 14 and up. – Magnus W Apr 04 '16 at 17:15
If you have only 12 button, why don't you use some nested linear layouts? Isn't that OK? – Iulian Popescu Apr 04 '16 at 18:35
Yes I could do that, just wanted to know why it doesn't work with the support `GridLayout` and what can be done about it. It will hopefully help people looking for an answer to this in the future as well, because I couldn't find any SO threads about this specific issue. – Magnus W Apr 04 '16 at 18:40

Using in android.support.v7.widget.GridLayout not displaying correctly

1 Answers1