How to align Gridview center

Question

I want to align GridView in center

still i am getting like this:

enter image description here

As you can see in above image, i am getting images on left hand side, but i want to show images in center like below:

enter image description here

another thing getting extra width of text background How can i show text background within image only

now gridview is in center, but still getting issue, see text background huge width which is going out of imageview:

enter image description here

Please check updated xml script

activity_main.xml:-

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/header_bg"
        android:gravity="center"
        android:text="@string/header_main"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ffffff"
        android:textStyle="bold" />



     <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal"
        >

    <GridView
        android:id="@+id/list"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:columnWidth="@dimen/photo_size"
        android:horizontalSpacing="@dimen/photo_spacing"
        android:numColumns="4"
        android:gravity="center"
        android:padding="4dp"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:layout_gravity="center"
        android:verticalSpacing="@dimen/photo_spacing" />

</LinearLayout>

</RelativeLayout>

row.xml:-

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/album_item"
   android:layout_width="match_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

<ImageView
    android:id="@+id/cover"        
    android:contentDescription="@string/app_name"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="center" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:layout_alignBottom="@+id/cover"
        android:background="#70000000"
        android:gravity="center"
        android:padding="6dp"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:textStyle="bold" />

</RelativeLayout>

and if i use TextView as wrap_content then getting like this:

enter image description here

try `android:gravity="center"` for the `LinearLayout` which encloses the `TextView` — Sagar Pilkhwal, Sep 30 '14 at 10:21
thanks i used android:gravity="center" in LinearLayout but main challenge is how to align gridview center ? — Sun, Sep 30 '14 at 10:24
did it solve your question? try `android:gravity="center"` for your `GridView` — Sagar Pilkhwal, Sep 30 '14 at 10:26
Did you try `android:layout_gravity="center"` instead of `android:gravity="center"` for your textview in row.xml? — MysticMagicϡ, Sep 30 '14 at 12:52
The way you can destroy all alignment in a GridLayout just by moving your gravity/layout_gravity properties between layouts/elements is really awful, this video helped me a lot https://www.youtube.com/watch?v=VUPM387qyrw — Windgate, Jun 23 '21 at 11:45

MysticMagicϡ · Accepted Answer · 2014-10-01T05:36:03.217

You would just need to use android:layout_gravity="center" as its LinearLayout's child.

And firstly, change parent LinearLayout's width to match_parent. As its wrap_content right now, it will be of no use aligning in center

To align the GridView in center:

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/textView2"
    android:orientation="horizontal"
    >

    <GridView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:columnWidth="@dimen/photo_size"
        android:horizontalSpacing="@dimen/photo_spacing"
        android:numColumns="auto_fit"
        android:padding="4dp"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:layout_gravity="center"
        android:verticalSpacing="@dimen/photo_spacing" />

</LinearLayout>

And for aligning text in center:

try this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/cover"
    android:gravity="center"
    android:background="#70000000"
    android:padding="6dp" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:layout_gravity="center"
        android:textStyle="bold" />

</LinearLayout>

Hope it helps.

UPDATE:

For aligning the caption in center, just modify your gravity. As your parent layout in row.xml is RelativeLayout, layout_gravity won't make any effect. Use centerInParent.

Example:

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

    <ImageView
        android:background="#eeeeee"
        android:id="@+id/cover"
        android:src="@drawable/ic_launcher"
        android:layout_width="200dip"
        android:layout_height="200dip"
        android:contentDescription="@string/app_name"
        android:scaleType="center" />

    <TextView
        android:id="@+id/title"
        android:text="@string/iclauncher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/cover"
        android:background="#70000000"
        android:ellipsize="end"
        android:layout_centerInParent="true"
        android:padding="6dp"
        android:singleLine="true"
        android:textSize="12sp"
        android:textStyle="bold" />

</RelativeLayout>

I am getting the caption in centre of image using this:

enter image description here

You will just have to add android:layout_centerInParent="true" and remove gravity. Hope this helps.

For gridview solution, you rock. I knew but didn't wanted to use it inside a Linear Layout. Nice trick! — sud007, Jun 09 '15 at 18:26

Sagar Pilkhwal · Answer 2 · 2014-09-30T11:11:38.853

Try android:gravity="center" for the LinearLayout which encloses the TextView to align the text in the center:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/cover"
android:gravity="center"
android:background="#70000000"
android:padding="6dp" >

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:gravity="center"
    android:singleLine="true"
    android:textColor="@color/white"
    android:textSize="12sp"
    android:textStyle="bold" />

</LinearLayout>

And for your Gridview to align to center use:

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_below="@+id/textView2"
android:orientation="horizontal"
>

<GridView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:columnWidth="@dimen/photo_size"
android:horizontalSpacing="@dimen/photo_spacing"
android:numColumns="auto_fit"
android:layout_gravity="center"
android:padding="4dp"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="@dimen/photo_spacing" />

</LinearLayout>

try `gravity="center"` your `activity_main.xml:` `RelativeLayout` — Sagar Pilkhwal, Sep 30 '14 at 10:36
i have edited my answer, try `android:layout_gravity="center"` — Sagar Pilkhwal, Sep 30 '14 at 11:11

score 1 · Answer 3 · answered Sep 30 '14 at 10:34

1

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

This will solve your problem.

answered Sep 30 '14 at 10:34

Utpal Sharma

326
2
14

score 0 · Answer 4 · answered Jan 19 '19 at 13:11

Use this Code to make your Image set in a center:

 <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:scaleType="centerCrop"/>

After that set your Gridview like this:

<GridView
    android:id="@+id/gridView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginTop="55sp"
    android:background="#ffff"
    android:clickable="true"
    android:columnWidth="100dp"
    android:drawSelectorOnTop="true"
    android:focusable="true"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:numColumns="2"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp"/>

This works just have happy coding...

How to align Gridview center

4 Answers4

Linked