CODEWITHSUNDEEP
androidgridview
Sun
Sun

Reputation: 6888

How to align Gridview center

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

Upvotes: 3

Views: 11612

Answers (4)

Gaurav Lambole
Gaurav Lambole

Reputation: 313

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...

Upvotes: 0

MysticMagicϡ
MysticMagicϡ

Reputation: 28823

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.

Upvotes: 3

Sagar Pilkhwal
Sagar Pilkhwal

Reputation: 3993

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>

Upvotes: 1

Utpal Sharma
Utpal Sharma

Reputation: 326

<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.

Upvotes: 1

Related Questions