how Center elements in GridView?

Question

I have an requirement of : enter image description here

I have a layout like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/relativelayout"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:background="@drawable/category_bg">

    <RelativeLayout
            android:id="@+id/headerlinearlayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@drawable/category_header"

            >

        <ImageView
                android:id="@+id/logosmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/logo_small"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"

                />

        <TextView
                android:id="@+id/textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="A Cafe With Arabian Food"
                android:layout_marginLeft="10dp"
                android:layout_gravity="center"
                android:textSize="11pt"
                android:textColor="@color/white"
                android:layout_toRightOf="@+id/logosmall"
                android:layout_centerVertical="true"
                />

        <TextView
                android:id="@+id/choosetxtview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Choose a Category"
                android:textColor="@color/white"
                android:textSize="11pt"
                android:layout_marginLeft="10dp"
                android:layout_gravity="center"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                />
    </RelativeLayout>
    <!--  <LinearLayout


        android:id="@+id/textlayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/headerlinearlayout"
        android:gravity="center"
        android:layout_marginTop="5dp"
        >


    </LinearLayout> -->

    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"

            android:layout_above="@+id/footerlinearlayout"
            android:layout_marginTop="5dip"
            android:layout_below="@+id/headerlinearlayout"
            android:layout_marginBottom="5dip">

        <GridView
                android:id="@+id/gridview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:columnWidth="120dip"

                android:horizontalSpacing="20dp"
                android:numColumns="3"
                android:paddingTop="5dip"
                android:scrollbars="none"
                android:stretchMode="columnWidth"
                android:gravity="center"
                android:listSelector="@android:color/transparent"
                android:cacheColorHint="@android:color/transparent"
                android:verticalSpacing="20dp"/>

    </LinearLayout>


    <RelativeLayout
            android:id="@+id/footerlinearlayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@drawable/category_footer"
            android:layout_alignParentBottom="true"

            >

        <ImageButton
                android:id="@+id/backbtn_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/backbtn"
                android:layout_marginLeft="10dp"
                android:layout_gravity="center"
                android:layout_centerVertical="true"
                />

        <ImageButton
                android:id="@+id/homebtn_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_gravity="center"
                android:layout_marginLeft="30dp"
                android:layout_toRightOf="@+id/backbtn_iv"
                android:background="@drawable/homebtn"/>


        <ImageButton
                android:id="@+id/helpbtn_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:layout_centerVertical="true"
                android:background="@drawable/helpbtn"
                android:layout_alignParentRight="true"
                android:layout_marginRight="80dp"

                />


        <ImageView
                android:id="@+id/iv_poweredby"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/powerd_by"/>


    </RelativeLayout>


</RelativeLayout>

response is: enter image description here

please help i have tried so many things.

are you welcome for answers with using linear layout instead grid view? — deadfish, Jun 13 '13 at 13:35

score 0 · Answer 1 · answered Jun 13 '13 at 11:20

you can achieve this by using layout_span attribute of TableRow. Just add

android:layout_span="2"

in child element of TableRow

You can also do it programatically like this..

//theChild in this case is the child of TableRow
TableRow.LayoutParams params = (TableRow.LayoutParams) theChild.getLayoutParams();
params.span = 2; //amount of columns you will span
theChild.setLayoutParams(params);

Hope this helps...

score 0 · Answer 2 · edited May 23 '17 at 11:48

Dealing with GridView is really an headache, and is difficult to obtain your layout if you don't want to use TableLayout and TableRow. Your question is similar to another question here at StackOverflow, where i already answered.

My idea is to "force" GridView to have an exact width, that is the sum of your columns width, for example: you can take the width of your ImageView that compose the grid and multiplicate width*columns. Then you can programmatically set total width to your GrdiView by LayoutParams.

how Center elements in GridView?

2 Answers2