Android Tutorials 2023 - Cardview Gridview Example App

Develop Android Apps, how to code a Hyperlink

New Tutorial 2022

Android Tutorial- Gridview with Cardview - Art Exhibits

Added June 2022

For this tutorial, we are going to learn how to add a Gridview layout with a Cardview design. So we must use the Gridview in our apps' homepage layout. Then we add the Cardview design to it. Because we are showcasing art works, we wanted a two column design that is scrollable. And, we want to have Titles where we could add info for each art exhibit as well.
To do so, we must create an ArrayList in code as shown in this image.

Android Tutorial, Gridview Cardview with Arraylist

Android Tutorial, Gridview Cardview with Arraylist

ListPojo.java must be created and code added as shown in this image.

Android Tutorial, Gridview Cardview with list Pojo

And, lastly, for our java pages, we create AdapterList.java, as shown in this image.

Android Tutorial, Gridview Cardview with Adapter List

Also note the 'import statements' that have been added for each code class we added in these java pages.(ListPojo.java does not require them).

We are going to create a new app for this tutorial, and name is - Gridview Cardview

Android Tutorial, Gridview with Cardview

Android Tutorial, Gridview with Cardview

Creating Our New App

Open AIDE, Select New Project, from the left menu, or center menu hierachy of files; and do the following:

Select
Create an Android app, choose java xml programming language

Create an Android app, choose java xml programming language

choose NEW ANDROID APP(Gradle/Android SDK/java/xml) if your using the newest version of AIDE.

Choose HELLO WORLD example app template(java/xml);if your using an older version of AIDE,

For app name; type 'Gridview Cardview'

For app package name type: com.aac.gridview_example

Click Create

Your new app is now created for you - named 'Gridview Cardview'. For now, you will have the 'little green Android image' as your app icon.
Once you add your apps' icon image and run your app with the updated and new pages you create, and the apps' other images; you'll see the customized 'App Icon' instead of little green Android icon.
Note: Not all tutorials have a customized icon or require new pages to be created.

AIDE automatically opens your new app in the editor for you.

Where Code is Coded

For our Gridview Cardview app, we must edit the activity_main.xml, and edit the MainActivity.java aka our java class.

We must also edit the AndroidManifest.xml, and the build.gradle page.

And, new pages must be created for this app; custom_list.xml, ListPojo.java, Adapter_List.java.

Our layout pages are activity_main.xml, and custom_list.xml. Activity_main has the code for the Gridview layout, while custom_list has the code for the Cardview design. By default, the Cardview widget is one column, but you can customize it as you want. For this app we chose 2 columns so we could showcase two exhibits per row.

Additionally, ten images must be added for the Art Exhibits, and one image for the app icon which is also a photo of abstract art. You can download/save them at the Example Code section.

You can just copy and paste the code for each page that must be edited; same for pages you must create, just copy the code from the Example Code section on this page.

When coding and editing pages you can code the pages as you want. For this app we will first code the build.gradle. Since this page was already created for us when we created our template for this app, we only have to add the 'cardview dependency', where it says dependencies as shown in this photo.

Note: Because we are adding the Androidx code for Cardview at build gradle we must code our SDK target as 28. That is because Androidx is only available as of api 28.

dependencies for android gridview example

dependencies for android gridview example

All code for this tutorial is at the Example Code section on this page. Only copy and replace code for the pages mentioned that require updating.
At Example Code section on this page; any page notated as 'no edit required', means you dont have to copy and paste that page - added only for you to view it.

TIPS

Navigating The App Project Hierachy

To view A FILE do either: from right menu choose FILES or GOTO, this will show the apps files along the top of editor, dropdown, and left side menu. After editing a file, SAVE it, right side menu, choose SAVE.

Creating Pages

Check for the filename extensions of page your creating. If for example, your creating a new Java page, (java folder)you want to see pages already created in that folder that have the .java file extension. Click 'create new java class' to create your page.

For xml files, you must create these in the 'res/layout' folder of your app project. Click 'add new xml file', to create your page.

Additional Reading on Gridview, at Android Developer website
Gridview - Android Developer

In Summary,
App Name is 'Gridview Cardview' - located at AppProjects/ in AIDE; OPEN the AIDE app, then open App Projects, THEN select the 'Gridview Cardview', app from your files hierachy(left menu); then DOUBLE CLICK on any file from the app, like strings.xml, to open it in AIDE.

Make sure at top of page, the app name 'Gridview Cardview" is there next to AppProjects like so: AppProjects/GridviewCardview, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, install, to Open your app.

You can open the app Simply by Clicking on the Android little green App Icon,with the wording 'Gridview Cardview' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again.

EXAMPLE CODE - Code For This Tutorial.

JUST copy the code for this tutorial from the Example Code in this section.

Example Code:
Copy Paste the Code

//in build gradle we add the required library at dependencies and our sdk target must be 28 because we included androidx as our support library

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.0"

defaultConfig {
        applicationId "com.aac.gridview_example"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
	implementation 'androidx.cardview:cardview:1.0.0'
}
___________

//in manifest we add the name of our customized app icon

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.aac.gridview_example" >

</manifest>
____________

//copy and paste all this code
just rename main.xml to activity_main.xml and then add this code instead

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout 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"
		android:background="#CCC5C5"
		android:orientation="vertical"
		tools:context=".MainActivity">
		
	 <GridView
	android:id="@+id/grid_list"
	android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:numColumns="2"/>
	 </LinearLayout>

_____________
	
	//create this page then add all this code
	
	custom_list.xml
	
	
	<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical"
	android:padding="1dp">
	
	 <androidx.cardview.widget.CardView
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_margin="2dp"
		android:focusable="true"
		android:scrollbars="vertical"
		app:cardCornerRadius="12dp"
		app:contentPadding="6dp">
		
		<LinearLayout
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:gravity="center"
			android:orientation="vertical">
			
			 <ImageView
				android:id="@+id/image_design"
				android:layout_width="145dp"
				android:layout_height="100dp"
				android:layout_gravity="center"
				android:src="@drawable/grid_image1" />
			
			 <TextView
				android:id="@+id/text_design"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_gravity="center"
				android:text="Art"
				android:textColor="@android:color/black"
				android:textSize="16sp" />
			
			 </LinearLayout>
		 </androidx.cardview.widget.CardView>
</LinearLayout>

______________

//add all this code to replace code that is on the page now

MainActivity.java

package com.aac.gridview_example;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
import java.util.ArrayList;

public class MainActivity extends Activity {
	
	
	GridView gridView;
	ArrayList<ListPojo> list;
	AdapterList adapterGrid;
	
    @Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		gridView = findViewById(R.id.grid_list);
		gridList();
		adapterGrid = new AdapterList(this, list);
		gridView.setAdapter(adapterGrid);
		
		}
	private void gridList() {
		list = new ArrayList<ListPojo>();
		list.add(new ListPojo("Art", R.drawable.grid_image1));
		list.add(new ListPojo("Art", R.drawable.grid_image2));
		list.add(new ListPojo("Art", R.drawable.grid_image3));
		list.add(new ListPojo("Art", R.drawable.grid_image4));
		list.add(new ListPojo("Art", R.drawable.grid_image5));
		list.add(new ListPojo("Art", R.drawable.grid_image6));
		list.add(new ListPojo("Art", R.drawable.grid_image7));
		list.add(new ListPojo("Art", R.drawable.grid_image8));
		list.add(new ListPojo("Art", R.drawable.grid_image9));
		list.add(new ListPojo("Art", R.drawable.grid_image10));
		
		}}
		_____________
		
		//create this java page then add this code
		
		ListPojo.java
		
		package com.aac.gridview_example;

public class ListPojo {
	private String title;
	private int images;
	
	public ListPojo(String title, int images) {
		this.title = title;
		this.images = images;
		}
	public String getTitle() {
		return title;
		}
	public int getImages() {
		
		return images;
		}
		}
		____________
		
		//create this java page then add this code
		
		AdapterList.java
		
		
		package com.aac.gridview_example;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;

public class AdapterList extends BaseAdapter {
	Context context;
	ArrayList<ListPojo> gridPojos;
	
	public AdapterList(Context context, ArrayList<ListPojo> gridPojos) {
		this.context = context;
		this.gridPojos = gridPojos;
		}
		@Override
		public int getCount() {
			return gridPojos.size();
			}
			@Override
			public Object getItem(int position) {
				return null;
				}
				@Override
				public long getItemId(int position) {
					return 0;
					}
					
					@Override
					public View getView(final int position, View view, ViewGroup parent) {	
						view = LayoutInflater.from(context).inflate(R.layout.custom_list, parent, false);
						
						TextView title = view.findViewById(R.id.text_design);
						
	ImageView image = view.findViewById(R.id.image_design);
	title.setText(gridPojos.get(position).getTitle());
						
	image.setImageResource(gridPojos.get(position).getImages());
	view.setOnClickListener(new View.OnClickListener() {
		@Override
			public void onClick(View v) {
	Toast.makeText(context, "Abstract " + position, Toast.LENGTH_SHORT).show();
		}
		
	});
	
	return view;
	}}
	
	___________
	
	//only the app name string is added here
	
	strings.xml
	
	<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">GridView with CardView</string>

</resources>

End of Code<br>

Add the following images to the drawable folder.

This app has 10 images, and 1 app icon image.
Save each image as named to the res/drawable-hdpi folder of your app project - Gridview Cardview.
SAVE IMAGE(S): Save As
art_app_icon.jpg

grid_image1.jpg

grid_image2.jpg

grid_image3.jpg

grid_image4.jpg

grid_image5.jpg

grid_image6.jpg

grid_image7.jpg

grid_image8.jpg

grid_image9.jpg

grid_image10.jpg

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas