Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: center gridview horizontally

I need to center grid view horizontally in my android layout.xml. I have searched google for quite a while but didnt succeed in finding an answer.

I can only change gridview horizontal position by changing strechMode, but then my items are not near one another. that i need is items be one near another (without spaces) and centered horizontally. I choose strechmode = none, so now my items are near one another, but they are on the left of the screen, i just want them to be centered horizontally.

Here is my layout xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent" 
          android:layout_height="fill_parent"
          android:background="@drawable/background" 
          android:gravity="center">

<GridView android:id="@+id/lw_gridview" 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:numColumns="3" 
          android:columnWidth="48dp"
          android:horizontalSpacing="0dp"
          android:verticalSpacing="0dp"
          android:stretchMode="none"
          />


</LinearLayout>

Here is fragment of an image which is set on gridview by image adapter:

imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(48,48)); //on medium density
imageView.setScaleType(ImageView.ScaleType.CENTER);
imageView.setPadding(0, 0, 0, 0);

How can i succeed?

like image 623
Judrius Avatar asked May 26 '11 16:05

Judrius


4 Answers

Set the stretch mode to columnWidth on your GridView layout or style:

android:stretchMode="columnWidth"

The column width will stretch to fill the available space. You can wrap your grid items in a transparent container that will stretch evenly while preserving the width of your visible content. The android:columnWidth attribute will function as "minimum column width." This also works with android:numColumns=auto_fit, android:horizontalSpacing and android:verticalSpacing.

Depending on what your grid items are you may not want to add a transparent container around your content. If you don't, the content width will stretch evenly which may actually look better on more devices.

like image 141
James Wald Avatar answered Oct 22 '22 03:10

James Wald


Have you checked that your GridView positioned properly within LinearLayout? Try yo use android:layout_gravity="center" for GridView. Also, experiment with android:gravity= and different position to get more clear view on how gravity works for layouts.

like image 37
ACM64 Avatar answered Oct 22 '22 02:10

ACM64


I centered my grid view manually, by calculating and setting its padding. Here's what my onCreate does:

  • find out width of the screen and screen density
  • convert constant values for item width and spacing from DIP to pixels
  • calculate number of columns I can fit.

Equation looks like this, numColumns is the only unknown:

numColumns * itemWidth + (numColumns - 1) * spacingBetweenItems + selectorPadding <= sreenWidth

  • having numColumns, calculate how much horizontal space my grid view will actually need
  • having actual width of grid view, set padding so that it ends up in the center of screen

OK, and here's some code:

// Convert DIPs to pixels
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
mSizePx = (int) Math.floor(SIZE_DIP * metrics.scaledDensity);
mSpacingPx = (int) Math.floor(SPACING_DIP * metrics.scaledDensity);

GridView gridview = (GridView) findViewById(R.id.gridview);
// Find out the extra space gridview uses for selector on its sides.
Rect p = new Rect();
gridview.getSelector().getPadding(p);
int selectorPadding = p.left + p.right;

// Determine the number of columns we can fit, given screen width,
// thumbnail width, and spacing between thumbnails.
int numColumns = (int) Math.floor(1f * (metrics.widthPixels - selectorPadding + mSpacingPx)
        / (mSizePx + mSpacingPx));

int contentWidth = numColumns * mSizePx; // Width of items
contentWidth += (numColumns - 1) * mSpacingPx; // Plus spaces between items
contentWidth += selectorPadding; // Plus extra space for selector on sides

// Now calculate amount of left and right margin so the grid gets
// centered. This is what we
// unfortunately cannot do with layout_width="wrap_content"
// and layout_gravity="center_horizontal"
int slack = metrics.widthPixels - contentWidth;

gridview.setNumColumns(numColumns);
gridview.setPadding(slack / 2, slack / 2, slack / 2, slack / 2);
like image 30
Pēteris Caune Avatar answered Oct 22 '22 04:10

Pēteris Caune


Probably I am really late, but if you came to this question (as I did), this is what I've done to solve the problem:

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

    <TextView
        android:id="@+id/emotions_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"/>

    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"/>
</RelativeLayout>

My GridView is centred in the vertical, the other two TextView are on the Top and Button-Right.

More info: RelativeLayout, Positioning Views

like image 39
Manuel Avatar answered Oct 22 '22 02:10

Manuel