12

I'm making a game on Android Studio and have an issue with Grid View component. I can't align center the items inside Grid View like After image. I try several ways like android:stretchMode or android:layout_centerHorizontal but it doesn't help. Here is my XML code:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/holo_orange_light"
        android:layout_weight="8"
        android:layout_gravity="center">

        <GridView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10px"
            android:id="@+id/gridAnswersChar"
            android:numColumns="8"
            android:gravity="center">
        </GridView>

</RelativeLayout>

Before:

enter image description here

After:

enter image description here

Huy Vo
  • 2,418
  • 6
  • 22
  • 43
Tín Tr.
  • 319
  • 4
  • 14
  • Did you check this one? https://stackoverflow.com/questions/4816004/center-elements-in-gridview – Sharath kumar Sep 07 '17 at 12:15
  • Does this answer your question? [Center elements in GridView](https://stackoverflow.com/questions/4816004/center-elements-in-gridview) – Vega Oct 11 '20 at 13:41

2 Answers2

16

Hopefully it is not a strict requirement for you that you use GridView, as I believe what you're looking for is essentially impossible. However, if you're willing to use RecyclerView instead, I have a solution for you.

This solution will make use of FlexboxLayoutManager, a part of Google's FlexboxLayout project: https://github.com/google/flexbox-layout

Full code for my solution is visible here: https://gist.github.com/zizibaloob/0c44bfe59b371b5ae0bd2edcb4a7e592

I'll cover the important bits here. First, the setup of FlexboxLayoutManager in MainActivity.onCreate():

FlexboxLayoutManager manager = new FlexboxLayoutManager(this, FlexDirection.ROW);
manager.setJustifyContent(JustifyContent.CENTER);

RecyclerView recycler = (RecyclerView) findViewById(R.id.recycler);
recycler.setLayoutManager(manager);

When we create the layout manager, we pass FlexDirection.ROW to tell it we want it to lay our items out horizontally (i.e. fill up a row and then flow to the next row, rather than filling up a column and then flowing to the next column).

We then call setJustifyContent() using JustifyContent.CENTER to tell the manager that we want partially-filled rows to be centered.

The second important bit is the way in which we mimic the behavior of GridView and its ability to have a set number of columns. This code is in MyAdapter.onCreateViewHolder():

ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) itemView.getLayoutParams();
layoutParams.width = (parent.getWidth() / 4) - layoutParams.leftMargin - layoutParams.rightMargin;
itemView.setLayoutParams(layoutParams);

The key here is (parent.getWidth() / 4), which gives each item view one quarter of the available width. If you want a different number of columns, simply change the 4 to an 8, etc.

We also subtract leftMargin and rightMargin from the width because our item views have margin, and we need to leave space for them. If your views won't have margins, you can skip this.

Put it all together and you get an app that looks like this:

enter image description here enter image description here

Ben P.
  • 52,661
  • 6
  • 95
  • 123
0

Easy and better way to align images and content in centre is use gravity as centre in your item_layout file, not in parent of your grid-view.

Sandip Savaliya
  • 784
  • 6
  • 19