Loading...

Android Material Design GridView

Android GridView is a view group which allows us to display items in a two dimensional grid. I have posted some android gridview tutorial post like Simple Android GridView Example, GridView with Image and Text and so on. This time you will learn to make material design android application using GridView with header view and material ripple effect.

In this tutorial example project I have used android design support library and a material ripple library. To make a android app with grid view you need to create a java file for adapter class and a XML custom gridview layout file.

Related:
Simple Android GridView Tutorial with Example
Parallax Header with Android ListView Example
Android ListView with Image and Text

Android Example: How to Make Material Application with GridView


Create a new android project to make material design android application and add android design support library and material ripple effect in your project build.gradle file as dependencies. Build.gradle file will look like below.

build.gradle

Now open your app styles.xml file and add two items windowActionBar to false and windowNoTitle to true. Following is the complete content of styles.xml file.

res/values/styles.xml

And update your colors.xml file which is look like below.

res/values/colors.xml

Again open dimense.xml file from res/values and add two dimen for app bar height and expanded toolbar title margin. Following is the complete content of dimense.xml file.

res/values/dimense.xml

XML Layout File

Open your main XML layout file and add CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, ImageView, Toolbar, NestedScrollView, LinearLayout and GridView which will look like below.

res/layout/activity_main.xml

Create a new XML layout file called gridview_custom_layout.xml to make custom grid view image and text design and add a LinearLayout as root layout. Inside LinearLayout add RippleView with proper attribute like the below and inside RippleView add ImageView and TextView in LinearLayout which will look like below.

res/layout/gridview_custom_layout.xml

Java Activity File

Open your java activity file and add define variable for Toolbar, CollapsingToolbarLayout, CoordinatorLayout, GridView, Context and ArrayList. Add strings and images for gridview items. Following is the complete code of java activity file.

src/MainActivity.java

Create a new java file with the name CustomAndroidGridViewAdapter.java and extend it to BaseAdapter. Following is the complete code of custom gridview adapter file.

src/CustomAndroidGridViewAdapter.java

Android Example: How to Make Material Application with GridView

Now, run your Android Material Design GridView application and scroll the page, you will see that the toolbar collapsing and expanding with animation. If you click on the GridView items, you will see material ripple effect. Above is the screenshot of this sample material design gridview android application.
UI 30528197302838094
Home item