Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GridView with last item centered

I'm doing a GridView (not dynamic), that contains 13 values and I want to put it on two columns and it looks like :

one

And this is my code :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_gravity="center"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvCard"
        android:text="A"
        android:layout_marginRight="@dimen/_7sdp"
        android:textSize="@dimen/_27sdp"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/ivCard"
        android:layout_toStartOf="@+id/ivCard" />

    <ImageView
        android:id="@+id/ivCard"
        android:layout_width="@dimen/_20sdp"
        android:layout_height="@dimen/_28sdp"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

And I used Span why isn't putting it on the middle?

GridLayoutManager recycleLayoutManager = new GridLayoutManager(mContext, 2,GridLayoutManager.VERTICAL, false);
    recycleLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
                    // grid items to take 1 column
                    if (mList.size() % 2 == 0) {
                        return 1;
                    } else {
                        return (position == mList.size()-1) ? 2 : 1;
                    }
        }
    });
like image 700
StuartDTO Avatar asked Feb 05 '16 07:02

StuartDTO


People also ask

How do you center the last row in the grid?

To center the last one, you can double the number of columns to 4 and set each item to span 2 . If the last item is odd, start on the second column so it spans columns 2 and 3. With a bit of math and SCSS, this can be generalized to work with any number of columns.

How do you center items on a grid?

One of the easiest ways of centering the content of grid items is using Flexbox. Set the display to "grid" for the grid container, and "flex" for grid items. Then, add the align-items and justify-content properties, both with the "center" value, to grid items.

How do I center my grid display?

To center the <div> element horizontally using grid. Use the property of display set to grid i.e. display: grid; Then use property place-items: center; Example: The following example demonstrates to set the <div> to the center using grid property.

How do you make the items in the last row consume remaining space in CSS grid?

This is totally possible with CSS grid by combining the CSS rules nth-child and nth-last-of-type. The only caveat is that the number of columns needs to be known in advance.


1 Answers

Here it is a sample project implementing exactly your scenario.

Basically you have to wrap your cards with a layout having width to be defined programmatically in onCreateViewHolder method of the adapter.

In a 2 columns grid, width will be half of parent.

like image 156
thetonrifles Avatar answered Sep 30 '22 12:09

thetonrifles