ANDROID STAGGEREDGRIDLAYOUTMANAGER EXAMPLE TUTORIAL

ANDROID STAGGEREDGRIDLAYOUTMANAGER EXAMPLE TUTORIAL

In this tutorial we are going to learn how to create a simple android application that demonstrate the use of android StaggeredGridLayoutManager.

According to Google android developers guide – A LayoutManager that lays out children in a staggered grid formation. It supports horizontal & vertical layout as well as an ability to layout children in reverse.

There are other different layout manger you can be used to layout your child views in a way that suits your application. You can use LinearLayoutManager or GridLayoutManager. For detailed android example tutorial on GridLayoutManager, I will suggest you read my post on Android GridLayoutManager with RecyclerView in Material Design.

We are not going to make use of Material Design in this android example tutorial but if you wantto learn more about android Material Design and Navigation Drawer you should read my post onAndroid Navigation Drawer with Material Design.

Now lets briefly show case what we will like to achieve in this android tutorial. The screen shot below represent the user interface.

If you are using a version of android Studio without support for updated version of appcompat V7 library, you should endeavor to add the compile dependency to your project build.gradle file.

We are also going to add two dependency libraries for Android RecyclerView and CardView. The updated build.gradle file will look as shown below.

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    compile 'com.android.support:appcompat-v7:22.2.0'    compile 'com.android.support:cardview-v7:21.0.+'    compile 'com.android.support:recyclerview-v7:21.0.+'}

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidStaggeredGridLayoutManager

Package: com.inducesmile.androidstaggeredgridlayoutmanager

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

First, we will copy all the images we will use for our application in the drawer folder. The image is provided in the download section or feel free to use your own images. I have added four images.

Open that main activity layout file (activity_main.xml) and copy and paste the following codes.

<RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:padding="8dp">    <android.support.v7.widget.RecyclerView        android:id="@+id/recycler_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scrollbars="vertical" /></RelativeLayout>

We have added a RecyclerView in our main layout. We going to create a RecyclerView Adapter which we will use to bind our data source to RecyclerView component. Each item in the RecyclerView will represent an ImageView and a TextView.

The RecyclerView Adapter will extends RecyclerView.Adapter<SolventViewHolders> . The SolventViewHolder is a ViewHolder class that holds references to the View components of each item.

The RecyclerView Adapter must override two methods of its parent class –onCreateViewHolder(ViewGroup parent, int viewType)  and onBindViewHolder(SolventViewHolders holder, int position) 

Copy the code for the adapter as shown below.

package inducesmile.com.androidstaggeredgridlayoutmanager;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.List;public class SolventRecyclerViewAdapter  extends RecyclerView.Adapter<SolventViewHolders> {    private List<ItemObjects> itemList;    private Context context;    public SolventRecyclerViewAdapter(Context context, List<ItemObjects> itemList) {        this.itemList = itemList;        this.context = context;    }    @Override    public SolventViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {        View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.solvent_list, null);        SolventViewHolders rcv = new SolventViewHolders(layoutView);        return rcv;    }    @Override    public void onBindViewHolder(SolventViewHolders holder, int position) {        holder.countryName.setText(itemList.get(position).getName());        holder.countryPhoto.setImageResource(itemList.get(position).getPhoto());    }    @Override    public int getItemCount() {        return this.itemList.size();    }}

The custom RecyclerView Adapter requires a layout to manager how its View components will appear. The onCreateViewHolder(ViewGroup parent, int viewType)  method of the class inflate a layout that will be used to the RecyclerView UI.

Lets create a layout file in the project layout folder and name this file solvent_list.xml. Add one ImageView and a TextView and set it to align horizontal.

Copy and paste the code as shown below.

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView    xmlns:card_view="http://schemas.android.com/apk/res-auto"    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/card_view"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    card_view:cardUseCompatPadding="true"    card_view:cardCornerRadius="8dp"    android:layout_marginBottom="16dp">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <ImageView            android:id="@+id/country_photo"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:contentDescription="@string/action_settings"            android:scaleType="centerCrop" />        <TextView            android:id="@+id/country_name"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:textSize="13sp"            android:text="@string/hello_world"            android:textColor="#ffffff"            android:layout_below="@+id/country_photo"            android:paddingBottom="8dp"            android:paddingTop="8dp"            android:gravity="center_horizontal"            android:layout_alignParentBottom="true"            android:background="#1976D2"/>    </RelativeLayout></android.support.v7.widget.CardView>

The ViewHolder class uses the ViewHolder Pattern and it is use to get a handle for all View in each item of the RecyclerView object.

The code is simple and easy to understand. You can copy and paste the code in your project.

package inducesmile.com.androidstaggeredgridlayoutmanager;import android.support.v7.widget.RecyclerView;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;public class SolventViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener {    public TextView countryName;    public ImageView countryPhoto;    public SolventViewHolders(View itemView) {        super(itemView);        itemView.setOnClickListener(this);        countryName = (TextView) itemView.findViewById(R.id.country_name);        countryPhoto = (ImageView) itemView.findViewById(R.id.country_photo);    }    @Override    public void onClick(View view) {        Toast.makeText(view.getContext(), "Clicked Position = " + getPosition(), Toast.LENGTH_SHORT).show();    }}

Lets move over to the MainActivity.java file. In this class, we will get a handle for the RecyclerView object. We will go ahead and create an instance of the StaggeredGridLayoutManager and pass it as a parameter to setLayoutManager method of the RecyclerView class.

Create the object of the RecyclerView Adapter class. We will pass the application context and our data source as parameter in setAdapter method of the RecyclerView.

The complete code for the class is as shown.

package inducesmile.com.androidstaggeredgridlayoutmanager;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.StaggeredGridLayoutManager;import android.view.Menu;import android.view.MenuItem;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private StaggeredGridLayoutManager gaggeredGridLayoutManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recycler_view);        recyclerView.setHasFixedSize(true);        gaggeredGridLayoutManager = new StaggeredGridLayoutManager(3, 1);        recyclerView.setLayoutManager(gaggeredGridLayoutManager);        List<ItemObjects> gaggeredList = getListItemData();        SolventRecyclerViewAdapter rcAdapter = new SolventRecyclerViewAdapter(MainActivity.this, gaggeredList);        recyclerView.setAdapter(rcAdapter);    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.menu_main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }    private List<ItemObjects> getListItemData(){        List<ItemObjects> listViewItems = new ArrayList<ItemObjects>();        listViewItems.add(new ItemObjects("Alkane", R.drawable.one));        listViewItems.add(new ItemObjects("Ethane", R.drawable.two));        listViewItems.add(new ItemObjects("Alkyne", R.drawable.three));        listViewItems.add(new ItemObjects("Benzene", R.drawable.four));        listViewItems.add(new ItemObjects("Amide", R.drawable.one));        listViewItems.add(new ItemObjects("Amino Acid", R.drawable.two));        listViewItems.add(new ItemObjects("Phenol", R.drawable.three));        listViewItems.add(new ItemObjects("Carbonxylic", R.drawable.four));        listViewItems.add(new ItemObjects("Nitril", R.drawable.one));        listViewItems.add(new ItemObjects("Ether", R.drawable.two));        listViewItems.add(new ItemObjects("Ester", R.drawable.three));        listViewItems.add(new ItemObjects("Alcohol", R.drawable.four));        return listViewItems;    }}

The private method getListItemData return a object of theList that wraps an entity object that contains data for the ImageView and TextView controls.

转自