Android GridView Tutorial
A gridview is an adapterview that shows items in a two-dimensional grid.
In this tutorial we cover GridView extensively then look at various usage examples.
These grids are scrollable. GridView is an adapterview because it works with adapters. Adapters can then bind data to the gridview.
This is important because then it means that the gridview is decoupled from it’s data source. So you can customize the gridview as you like without interfering with the data source. You can also work on the data source without affecting the visual appearance of the gridview.
GridView derives from AbsListview
.
public class GridView extends android.widget.AbsListView{}
Both reside in the android.widget
packages.
AbsListview
is an abstract class and you won’t use in directly. You’ll use it in case you want to implement your own custom view with unique properties.
Even the sister of GridView
which is ListView
also directly derives from AbsListview
. So AbsListview
is a base class. It’s used to implement virtualized list of items. Given it’s virtualized you can implement it to show lists in various forms:
- Lists -vertical and horizontal
- Grids
- Carousel
- Stack
And so on.
So in our case the gridview uses it to display items in a grid. And we call the implementation the Gridview
.
Some of the typical uses of gridview include:
- Showing image gallery.
- Showing list of movies.
- Showing list of products etc.
Like other views and widgets, gridview are first defined in the xml layout. This is because android views and widgets are normally defined using XML, a markup language. Though it’s also possible to create the views and widgets using raw java. However, XML has several advanatges:
- It’s easier compared to having to remember the various APIs for creating views programmatically.
- It’s more flexible and customizable.
- It decouples the user interface from the application logic. This leads to maintenable code.
- It’s more reusable. You can easily copy paste XML code from online and reuse as opposed to java code.
- We can use the designer to generate the XML code.
To work with XML, first we add the gridview xml definition inside our layout:
<?xml version="1.0" encoding="utf-8"?> <GridView android_id="@+id/gridview" android_layout_width="match_parent" android_layout_height="match_parent" android_columnWidth="90dp" android_numColumns="auto_fit" android_verticalSpacing="10dp" android_horizontalSpacing="10dp" android_stretchMode="columnWidth" android_gravity="center" />
Then we can move to our java code and reference the gridview and set its adapter:
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridview = (GridView) findViewById(R.id.gridview); gridview.setAdapter(new MyAdapter(this)); gridview.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View v, int position, long id) { Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show(); } }); }
Oclemy
Android GridView – CRUD – ADD UPDATE DELETE
GridView CRUD tutorial.
Hello.We see how to perform basic CRUD operations against GridView.
Let’s start.
1. CRUD.java
Our aim is to learn how to perform CRUD(Create Read Update Delete) while using a GridView. Hence it is better to create a separate concrete class that will:
add()
method.Updating basically means removing the existing and replacing it with a new one.
Deleting implies removing an existing data without any replacement ocurring:
Here’s the full class:
2. MainActivity.java
Here’s our main and only activity. Activity represent screens that the users act on. You can think of it as pages in an application. Your application can have several activities. However this is not a must. For example you can have an activity contain a fragment or a dialog.
A Fragment is a sub-activity that has to be hosted in a main activity. You can use it to display for example an input form. However the simplest way is to use a Dialog. Dialog don’t require us to create separate java files nor deal with complex lifecycle callbacks.
Instead we can just instantiate one and give it a layout. We will use a Dialog to display our input form. That form will just have some EditText and some buttons. The user will input data in the edittext and click any of those button depending on the action.
For example our CRUD doesn’t use any database for simplicity as our focus is GridView and not data source. So we will support:
3. activity_main.xml
This is the main layout for our
MainActivity.java
. This is also acting as our template layout in that it holds the general parts of our activity like ToolBar and AppBar.Then it includes the
content_main.xml
which will actually hold ourGridView
.4. content_main.xml
This is the content layout as the name suggests. It will hold contain our GridView. It is independent of other parts of the screen like the ToolBar and AppBar.
All we need is come and add a GridView right here.
5. input_dialog.xml
Thisis our input view. Users will input data via this layut. We shall inflate from an XML layout into a dialog. This ensures we have another screen without having to create a fragment or a new activity.
We have an EditText where users will type data. Then buttons for adding updating and deleting the items.
Download
Oclemy
Android Basic GridView Examples.
1. Populate GridView From String Array
Let’s put a GridView into practice by filling it with an array of strings. We are using GridView as it is without applying a custom layout. This means that a default textview will be used to render the view items in a grid.
For that we just need an arrayadapter to allow us bind data to our gridview. Adapters are important because they act as the bridge to the data source. In our case that data source is a simple string array.
(a). activity_main.xml
We add a GridView here. We’ve placed a header label using a TextView. We’ve wrapped them with a relativelayout.
Here’s the full layout:
You can see we’ve assigned our GridView an id using the
android:id
attribute. All views require an id for identification purposes. Assigning our gridview an id as we’ve done above means that from ourMainActivity.java
we will be able to reference it via thefindViewById()
method.We’ve also used the
android:numColumns
attribute, assigning it the valueauto_fit
. That will make our GridView flexible to adapt to the screen size and display the best number of columns based on the screen size.4. MainActivity.java
In our
MainActivity
we start by adding several import statements:Among them include:
android.app.Activity
– This is because ourMainActivity
class will inherit from the Activity class.android.widget.ArrayAdapter
– This is because our gridview needs an adapter for it to work.Why? Well because it is the adapter that will supply it with data.android.widget.GridView
– Our GridView. This is our adapterview. It will render our data.We then prepared the data source, in this case our array of galaxies.
How to Reference a GridView
We then reference our GridView, as we said, using the
findViewById
method.:The
myGridView
is an id we had specified for the GridView in our XML Layout.How to Set an Adapter to Our GridView
Well GridView itself as a class provides us the
setAdapter()
method. That method is supposed to take aListAdapter
object. ThatListAdapter
will be responsible for providing the grid’s data.It’s role is to Set the data behind this GridView.
Here’s an example:
In our case we’ve passed our string array of galaxies as our data source. Moreover we’ve passed a Context object as well as the type of layout to use.
android.R.layout.simple_list_item_1
will be used, which basically as a simple textview.How to Listen To GridView Click Events.
Listening to grid click events is very important as it allows users to react to individual items in our gridview. For example user can click a gridview item then navigate to a different activity or show a Toast message.
To handle click events we use the
setOnItemClickListener
method.Download
2. Android Simple GridView – Fill With List of Objects
Hello friends.Today we see how to work with a simple gridview and objects.In short here is what we do:
Demo
SECTION 1 : OUR MODEL CLASS
OUR MainActivity
OUR LAYOUT
We add our GridView here.
Download
You can download the full project here.