Search code examples
androidandroid-gridlayout

Align Android GridLayout

I need that the GridLayout align the views like this (the light blue icons and text are the view in the GridLayout):

enter image description here

But my GridLayout align like this: enter image description here

And if I set app:layout_columnWeight="1" and app:layout_rowWeight="1", my GridLayout align like this: enter image description here

My GridLayout xml:

<android.support.v7.widget.GridLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="18dp"
            app:columnCount="7">

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Trilha"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Mergulho"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Praia"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Festas"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Parque de Diversões"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Relaxar"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Esportes Radicais"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Acampamento"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Off Road"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Passeio de Barco"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Restaurantes"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Show / Festival"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Resort / SPA"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Locas Históricos"/>


        </android.support.v7.widget.GridLayout>

And the views inside GridView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.motivapp.motivapp.customview.DefaultTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/keywordTextView"
        android:textSize="18sp"
        android:text="Keyword"
        android:textColor="#839EC5"
        android:layout_gravity="center_horizontal"/>

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/keyword_button"
        android:id="@+id/keywordButton"/>

</LinearLayout>

It's a custom view, but now, it do nothing, only show a custom textview and a imageview... What I do to GridLayout align like the first image?

UPDATE:

It's near to solve my question... I change some things, and now only a view is not aligned.

enter image description here

I put app:layout_columnWeight="1" on all views of gridlayout, and changed the gravity and text width of custom view layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|center_horizontal">

    <com.motivapp.motivapp.customview.DefaultTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/keywordTextView"
        android:textSize="16sp"
        android:text="Keyword"
        android:textColor="#839EC5"
        android:gravity="center"/>

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/keyword_button"
        android:id="@+id/keywordButton"/>

</LinearLayout>

How to center all this views? How to prevent that when textview have a big width and line break, he force the imageview go down and don't center align?

Solution

  • You can use custom GridView with android:numColumns="7" or you can use RecyclerView with GridLayoutManager with 7 columns You can use your custom layout for item view to define your text and image as below:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txtGridItem"
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/imgGridItem"
        android:layout_width="match_parent"
        android:layout_height="130dp" />
</LinearLayout>