As you can read at my previous post, if you use
But now, Google has released
Now, take a few time to read some important steps in this "combining work"!
Firstly, you only need to put 2
Of course, you always need to creating layout for each
Now, we must create 2 adapter classes for 2
There is no special point in your activity or fragment programmatically code, locating all xml elements from layout file, create
You'll have this output after complete this project:
As you can see on the code above,
GridView to build a grid layout and ListView to make a list layout in Android, putting these 2 widgets into a single screen is not easy, my solution is making a custom GridView which expanding it's full height and set it as the ListView's header later.
But now, Google has released
RecyclerView - the successor of 2 old widgets (ListView and GridView), we can build this design easily because of it's own scroll and reuse mechanism.
Now, take a few time to read some important steps in this "combining work"!
Declaring Activity layout
RecyclerViews object to your activity/fragment layout. For better scroll later, please wrap theme in a NestedScrollView like this:
actiity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="#ffffe0"
tools:context="info.devexchanges.gridlistrecyclerview.MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="@string/os"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="@+id/grid"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="@string/corporation"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Providing custom layouts for grid/list row
RecyclerView item. In this project, every item is a CardView:
item_list.xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginLeft="5dp"
android:contentDescription="@string/app_name" />
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toRightOf="@+id/image"
android:gravity="center" />
</RelativeLayout>
</android.support.v7.widget.CardView>
item_grid.xml
<android.support.v7.widget.CardView 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:layout_margin="5dp"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="@+id/image"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:contentDescription="@null" />
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/image"
android:layout_marginTop="5dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:padding="5dp"
android:textColor="#ffffff"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Creating adapter classes
RecyclerViews based on RecyclerView.Adapter:
ListViewAdapter.java
package info.devexchanges.gridlistrecyclerview.adapter;
import android.app.Activity;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
import info.devexchanges.gridlistrecyclerview.R;
import info.devexchanges.gridlistrecyclerview.RecyclerViewItem;
public class ListViewAdapter extends RecyclerView.Adapter<ListViewAdapter.ViewHolder> {
private Activity activity;
private List<RecyclerViewItem> items;
public ListViewAdapter(Activity activity, List<RecyclerViewItem> items) {
this.activity = activity;
this.items = items;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = activity.getLayoutInflater();
View view = inflater.inflate(R.layout.item_list, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) {
viewHolder.imageView.setImageResource(items.get(position).getDrawableId());
viewHolder.textView.setText(items.get(position).getName());
}
@Override
public int getItemCount() {
return items.size();
}
/**
* View holder to display each RecylerView item
*/
protected class ViewHolder extends RecyclerView.ViewHolder {
private ImageView imageView;
private TextView textView;
public ViewHolder(View view) {
super(view);
imageView = (ImageView) view.findViewById(R.id.image);
textView = (TextView)view.findViewById(R.id.text);
}
}
}
GridViewAdapter.java
package info.devexchanges.gridlistrecyclerview.adapter;
import android.app.Activity;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
import info.devexchanges.gridlistrecyclerview.R;
import info.devexchanges.gridlistrecyclerview.RecyclerViewItem;
public class GridViewAdapter extends RecyclerView.Adapter<GridViewAdapter.ViewHolder> {
private List<RecyclerViewItem> items;
private Activity activity;
public GridViewAdapter(Activity activity, List<RecyclerViewItem> items) {
this.activity = activity;
this.items = items;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
LayoutInflater inflater = activity.getLayoutInflater();
View view = inflater.inflate(R.layout.item_grid, viewGroup, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(GridViewAdapter.ViewHolder viewHolder, int position) {
viewHolder.imageView.setImageResource(items.get(position).getDrawableId());
viewHolder.textView.setText(items.get(position).getName());
}
@Override
public int getItemCount() {
return items.size();
}
/**
* View holder to display each RecylerView item
*/
protected class ViewHolder extends RecyclerView.ViewHolder {
private ImageView imageView;
private TextView textView;
public ViewHolder(View view) {
super(view);
textView = (TextView)view.findViewById(R.id.text);
imageView = (ImageView) view.findViewById(R.id.image);
}
}
}
Configuration in Activity/Fragment
LayoutManager for RecyclerViews, initializing adapters and attaching them,...This is full code for my main activity:
MainActivity.java
And this is the POJO class of this project:
package info.devexchanges.gridlistrecyclerview;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import info.devexchanges.gridlistrecyclerview.adapter.GridViewAdapter;
import info.devexchanges.gridlistrecyclerview.adapter.ListViewAdapter;
public class MainActivity extends AppCompatActivity {
private RecyclerView listView;
private RecyclerView gridView;
private ListViewAdapter listViewAdapter;
private GridViewAdapter gridViewAdapter;
private ArrayList<RecyclerViewItem> corporations;
private ArrayList<RecyclerViewItem> operatingSystems;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = (RecyclerView) findViewById(R.id.list);
gridView = (RecyclerView) findViewById(R.id.grid);
setDummyData();
listView.setHasFixedSize(true);
gridView.setHasFixedSize(true);
//set layout manager and adapter for "ListView"
LinearLayoutManager horizontalManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
listView.setLayoutManager(horizontalManager);
listViewAdapter = new ListViewAdapter(this, corporations);
listView.setAdapter(listViewAdapter);
//set layout manager and adapter for "GridView"
GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
gridView.setLayoutManager(layoutManager);
gridViewAdapter = new GridViewAdapter(this, operatingSystems);
gridView.setAdapter(gridViewAdapter);
}
private void setDummyData() {
corporations = new ArrayList<>();
corporations.add(new RecyclerViewItem(R.drawable.microsoft, "Microsoft"));
corporations.add(new RecyclerViewItem(R.drawable.apple, "Apple"));
corporations.add(new RecyclerViewItem(R.drawable.google, "Google"));
corporations.add(new RecyclerViewItem(R.drawable.oracle, "Oracle"));
corporations.add(new RecyclerViewItem(R.drawable.yahoo, "Yahoo"));
corporations.add(new RecyclerViewItem(R.drawable.mozilla, "Mozilla"));
operatingSystems = new ArrayList<>();
operatingSystems.add(new RecyclerViewItem(R.drawable.bbos, "BlackBerry OS"));
operatingSystems.add(new RecyclerViewItem(R.drawable.ios, "iOS"));
operatingSystems.add(new RecyclerViewItem(R.drawable.tizen, "Tizen"));
operatingSystems.add(new RecyclerViewItem(R.drawable.android, "Android"));
operatingSystems.add(new RecyclerViewItem(R.drawable.symbian, "Symbian"));
operatingSystems.add(new RecyclerViewItem(R.drawable.firefox_os, "Firefox OS"));
operatingSystems.add(new RecyclerViewItem(R.drawable.wp_os, "Windows Phone OS"));
}
}
RecyclerViewItem.java
package info.devexchanges.gridlistrecyclerview;
public class RecyclerViewItem {
private int drawableId;
private String name;
public RecyclerViewItem(int drawableId, String name) {
this.drawableId = drawableId;
this.name = name;
}
public int getDrawableId() {
return drawableId;
}
public String getName() {
return name;
}
}
NOTE: Never forget to put RecyclerView and CardView dependencies to your app-level build.gradle file:
compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.android.support:cardview-v7:25.0.0'
Running application
Conclusions
RecyclerView can be put in ScrollView or NestedScrollView, which ListView/GridView cannot do. During work, as a Android developer, you should pay attention to the update features from Google to deal with the topic that problematic formerly. Through this post, I hope you can understand more about using RecyclerView in building list interface. Finally, you can take full code be click the button below!
