Android Java Use a cardview to display the items of a gridview

Question

Hi everyone I'm trying to show with a GridView some items that show the contents of an array of strings. This is the CardView I want to set as item:

So when I click on a button, the layout of the choice of the type of film becomes visible and I set an adapter:

cTBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                postaCardVIew.setVisibility(View.GONE);
                cT.setVisibility(View.VISIBLE);

                GridView simpleGridView = findViewById(R.id.simpleGridView);

                String genrelist[] = {"Commedia", "Animazione", "Anime", "Avventura", "Azione", "Biografico", "Documentario", "Drammatico", "Fantascienza","Fantasy",
                        "Guerra", "Horror", "Musical", "Storico", "Thriller", "Western", "Giallo", "Sentimentale",
                };

                final ArrayAdapter<String> adapter = new ArrayAdapter<String> (posta.this,android.R.layout.simple_list_item_1, genrelist);
                simpleGridView.setAdapter(adapter);
}

But this is what I am getting:

I want to inflate this layout though:

<?xml version="1.0" encoding="utf-8"?>

    <androidx.cardview.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="150dp"
        android:layout_height="150dp"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:cardCornerRadius="30dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <TextView
            android:id="@+id/type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Type"
            android:layout_centerInParent="true"
            android:textSize="20dp"
            android:textStyle="bold"
            />
    
        </RelativeLayout>
    
    
</androidx.cardview.widget.CardView>

To get such a thing:

Can anyone help me figure out how I could inflate the desired layout?

Answer 1

In order to use a custom item layout, you need to create a custom adapter that extends from the BaseAdapter or ArrayAdapter

Then inflate and build your item layout in the getView() method:

public class CustomAdapter extends BaseAdapter {

    String genrelist[] = {"Commedia", "Animazione", "Anime", "Avventura", "Azione", "Biografico", "Documentario", "Drammatico", "Fantascienza", "Fantasy",
            "Guerra", "Horror", "Musical", "Storico", "Thriller", "Western", "Giallo", "Sentimentale",
    };


    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;

        if (convertView == null) {
            convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
            holder = new ViewHolder();
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.title = convertView.findViewById(R.id.type);
        holder.title.setText(genrelist[position]);
        return convertView;
    }

    static class ViewHolder {
        TextView title;
    }



    public int getCount() {
        return genrelist.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }
}

And use it as the GridView adapter:

cTBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        postaCardVIew.setVisibility(View.GONE);
        cT.setVisibility(View.VISIBLE);

        GridView simpleGridView = findViewById(R.id.simpleGridView);

        simpleGridView.setAdapter(new CustomAdapter());
    }
});

I had to manipulate the margin and cared width and wrap the CardView with a FrameLayout in order to force the margin among cards:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="4dp"
    android:layout_marginVertical="4dp">

    <androidx.cardview.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:cardCornerRadius="30dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="Type: 1"
                android:textSize="18sp"
                android:textStyle="bold" />

        </RelativeLayout>

    </androidx.cardview.widget.CardView>
</FrameLayout>

Result: