Evenly stretch Android GridLayout to create a news application

Question

I am trying to create a news application that displays news summaries in tiles (e.g. like Flipboard - see http://uncrate.com/p/2010/07/flipboard.jpg).

At the moment, I am only trying to get a very simple working example of how this might be structured.

From reading around, it seems that using a GridLayout is the best way to do this in Android in order to avoid using deeply nested LinearLayouts. However, I have been trying to do this for a couple of hours now but had no luck. I have already tried setting the layout_width to 0dp and the layout_gravity to fill_horizontal for my LinearLayout sub elements, but this does not work. I am thinking of trying to do this in code next (e.g. as per suggested in this post - https://stackoverflow.com/a/10348166/831821) but really wanted to know if it is achievable through XML only.

Any help with this is much appreciated.

Below is my current main.xml layout file.

<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:useDefaultMargins="true"
        android:columnOrderPreserved="false" android:rowOrderPreserved="false"
        android:layout_alignWithParentIfMissing="false" android:layout_centerInParent="true" android:columnCount="2"
        android:rowCount="3">

    <LinearLayout
            android:layout_width="0dp"
            android:layout_gravity="fill_horizontal"
            android:layout_height="wrap_content" android:layout_row="0" android:layout_columnSpan="2"
            android:layout_rowSpan="1" android:layout_column="0">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                android:id="@+id/textView"/>
    </LinearLayout>
    <LinearLayout
            android:layout_width="0dp"
            android:layout_gravity="fill_horizontal"
            android:layout_height="wrap_content" android:layout_column="0" android:layout_columnSpan="1"
            android:layout_row="1" android:layout_rowSpan="2"
            >
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                android:id="@+id/textView1"/>
    </LinearLayout>
    <LinearLayout
            android:layout_width="0dp"
            android:layout_gravity="fill_horizontal"
            android:layout_height="wrap_content" android:layout_column="1" android:layout_columnSpan="1"
            android:layout_row="1" android:layout_rowSpan="2"
            android:baselineAligned="false" android:clickable="false"
            >
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                android:id="@+id/textView2"/>
    </LinearLayout>

</GridLayout>

try usinf layout_weight="1" for all your linear layouts instead of layout_gravity, also you can jsut do it all within LinearLayout — SingleWave Games, Oct 18 '13 at 14:24
@LandLPartners thanks for the answer, but I have just tried it and it did not work. Any other clues? — drigofonte, Oct 18 '13 at 14:37
as in you tried it whilst removing the GridLayout as layout_weight does not work on GridLayouts. Couple options you could try is using a table layout or implementing it all with LieanerLayouts (depending on how complicated this may get messy). — SingleWave Games, Oct 18 '13 at 15:47

score 0 · Answer 1 · answered Oct 19 '13 at 09:30

After playing around with some options, I have managed to come up with the following solution, which will suffice for me as a basic working example. I have gone for a mixture of GridLayout and LinearLayout with layout_weight and weightSum specified for the relevant LinearLayout elements to get a basic news looking page going.

I do think that there is still a bit too much nesting in the XML for my liking, but given that there will not be that many elements on a page at any one time, I am happy with it as it is. However, if anyone has a better solution, do please let me know.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center" android:columnCount="2" android:rowCount="3" android:useDefaultMargins="true">

    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0" android:layout_columnSpan="2" android:layout_row="0" android:layout_rowSpan="1">
        <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    android:id="@+id/textView"/>
    </LinearLayout>
    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:weightSum="2" android:layout_column="0" android:layout_columnSpan="2" android:layout_row="1"
            android:layout_rowSpan="2">
        <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">
            <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        android:id="@+id/textView1"/>
        </LinearLayout>
        <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">
            <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        android:id="@+id/textView2"/>
        </LinearLayout>
    </LinearLayout>

</GridLayout>

Evenly stretch Android GridLayout to create a news application

1 Answers1