Android - API - Creating a GridView

The GridView is a bit like the ListView's sibling.

A lot of concepts are shared with those similar components.

We're going to see how to create an easy GridView with almost the same code as the ListView tutorial but with some differences.

Let's get started.

First of all

The GridView is often used to displays images as in a portfolio.

But in our tutorial we will use Strings and Integers because they are easier to use.

We will also add some differences with the ListView tutorial by adding a new Color and a TextView type inside each GridView element.

Code

BadprogMainActivity

package com.badprog.android.badproggridview;

// BadproG.com

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.GridView;

public class BadprogMainActivity extends AppCompatActivity {

    static private String[] arrayString = new String[] { "Alexander", "Barbara",
            "Charles", "Dave", "Eric", "Fred", "Greg", "Henry", "Iren",
            "James", "Kayle", "Lucy", "Mike", "Nao", "Olaf", "Patrik",
            "Quentin", "Roger", "Steven", "Tracy", "Ursulla", "Vera",
            "Wilfrid", "Xao", "Yoni", "Zian" };

    private Integer[] arrayInt = new Integer[] {
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9
    };

    private ArrayAdapter<String>    adapterString;
    private ArrayAdapter<Integer>   adapterInt;
    private GridView gridView1;
    private GridView gridView2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        adapterString = new ArrayAdapter<>(this, R.layout.type_text_view, arrayString);
        gridView1 = findViewById(R.id.grid1);
        gridView1.setAdapter(adapterString);

        adapterInt = new ArrayAdapter<>(this, R.layout.type_text_view, arrayInt);
        gridView2 = findViewById(R.id.grid2);
        gridView2.setAdapter(adapterInt);
    }
}

activity_main.xml

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- BadproG.com -->
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.badprog.android.badproggridview.BadprogMainActivity">

    <GridView
        android:id="@+id/grid1"
        android:layout_width="0dp"
        android:layout_height="186dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/holo_green_dark"
        android:numColumns="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.094" />

    <GridView
        android:id="@+id/grid2"
        android:layout_width="334dp"
        android:layout_height="115dp"
        android:layout_marginBottom="76dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/holo_orange_dark"
        android:numColumns="2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/grid1" />

</android.support.constraint.ConstraintLayout>

type_text_view.xml

res/layout/type_text_view.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- BadproG.com -->
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:textColor="@color/colorText"
    android:padding="5dp"
    android:background="@color/colorPrimary"
    />

colors.xml

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- BadproG.com -->
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorText">#FFFFFF</color>
</resources>

Conclusion

Good job, you did it! 

This GridView is a great alternative to the ListView.