Layout dynamic grid in middle

Question

I have a grid with (currently) four cells wide. Each cell I am specifying to be 20px wide. I want to position this in the middle and at the top of a portrait layout. My code is below. My problem is that hte grid seems to fill the whole width whereas it want it to just take number of columns * column width only. And for white space around it. I've put colours on each of the components to try and make it easy to see where each one is. The two views in the first LinearLayout are never shown. Ive tried

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
           xmlns:tools="http://schemas.android.com/tools"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:paddingLeft="@dimen/activity_horizontal_margin"
           android:paddingRight="@dimen/activity_horizontal_margin"
           android:paddingTop="@dimen/activity_vertical_margin"
           android:paddingBottom="@dimen/activity_vertical_margin"
           android:orientation="vertical"
           tools:context=".EntryPointFragment">

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

    <View
            android:layout_width="wrap_content"
            android:background="#FFFFFF00"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:layout_weight="1"/>

    <GridView xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/grid_view"
              android:background="#FF000000"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:numColumns="4"
              android:columnWidth="30dp"
              android:verticalSpacing="1dp"
              android:horizontalSpacing="1dp"
              android:gravity="center"/>

    <View
            android:layout_width="wrap_content"
            android:background="#FFFF00FF"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:layout_weight="1"/>
</LinearLayout>

<View
        android:layout_width="match_parent"
        android:background="#FF00FFFF"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:layout_weight="1"/>

</LinearLayout>

This image shows the sort of thing I want.

Can anyone help me tweak this xml? The number of columns and rows in the grid will vary so the space around it should dynamically resize.

Thanks

Answer 1

Try:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#ffff00">

        <View
            android:layout_width="0dp"
            android:background="#ff0000"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <GridView
            android:id="@+id/grid_view"
            android:background="#ffffff"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:numColumns="4"
            android:columnWidth="20dp"
            android:verticalSpacing="1dp"
            android:horizontalSpacing="1dp"/>

        <View
            android:layout_width="0dp"
            android:background="#FFFF00FF"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:background="#FF00FFFF"
        android:layout_height="0dp"
        android:layout_weight="3"/>

</LinearLayout>

You will get something like that:

BTW: you can change the width/height of your GridView as you wish, you can put there a weight too with a similar approach as for the views next to it.