RecyclerView, building list view is now more simple, especially with new "scrolling mechanism", we now can put multiple RecyclerViews into a single screen (Activity or Fragment) without customizing in code.In this tip, I will present this solution through combining
NestedScrollView and RecyclerView in the activity layout file. Of course, if you use ListView, please read my previous post to find out the way to expand it's height to maximum to display all list items.Configuration in the layout (XML) file
NestedScrollView work as the root view and put 2 RecyclerView objects as it's children views to build this layout:
activity_main.xml
And this is layout for each <?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"
tools:context="info.devexchanges.multiplerecyclerview.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingBottom="10dp"
android:text="Asia"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:gravity="center_vertical"
android:paddingBottom="10dp"
android:text="Europe"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
RecyclerView item:
item_recycler_view.xml
<?xml version="1.0" encoding="utf-8"?>
<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="80dp"
android:layout_height="80dp"
android:src="@drawable/world"
android:contentDescription="@null" />
<TextView
android:id="@+id/text"
android:textColor="@color/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/image"
android:layout_toEndOf="@+id/image"
android:padding="10dp"
android:text="@string/app_name" />
</RelativeLayout>
</android.support.v7.widget.CardView>
NOTE: In order to use RecyclerView, CardView and NestedScrollView from Design Support Library, you must add these dependencies to your app level build.gradle:
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:recyclerview-v7:25.1.0'
compile 'com.android.support:cardview-v7:25.1.0'
Set LayoutManager and data in programmatically code
LayoutManager for each RecyclerView (here is LinearLayoutManager) and initializing data/"adapter" for them:
MainActivity.java
And this is the sample "adapter" class for these package info.devexchanges.multiplerecyclerview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
public class MainActivity extends AppCompatActivity {
private String[] asiaCountries = {"Vietnam", "China", "Japan", "Korea", "India", "Singapore", "Thailand", "Malaysia"};
private String[] europeCountries = {"France", "Germany", "Sweden", "Denmark", "England", "Spain", "Portugal", "Norway"};
private RecyclerView firstRecyclerView;
private RecyclerView secondRecyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
firstRecyclerView = (RecyclerView)findViewById(R.id.recycler);
secondRecyclerView = (RecyclerView)findViewById(R.id.recycler_1);
//create and set layout manager for each RecyclerView
RecyclerView.LayoutManager firstLayoutManager = new LinearLayoutManager(this);
RecyclerView.LayoutManager secondLayoutManager = new LinearLayoutManager(this);
firstRecyclerView.setLayoutManager(firstLayoutManager);
secondRecyclerView.setLayoutManager(secondLayoutManager);
//Initializing and set adapter for each RecyclerView
RecyclerViewAdapter firstAdapter = new RecyclerViewAdapter(this, asiaCountries);
RecyclerViewAdapter secondAdapter = new RecyclerViewAdapter(this, europeCountries);
firstRecyclerView.setAdapter(firstAdapter);
secondRecyclerView.setAdapter(secondAdapter);
}
}
RecyclerViews:
RecyclerViewAdapter.java
package info.devexchanges.multiplerecyclerview;
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.TextView;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private Activity activity;
private String[] strings;
public RecyclerViewAdapter(Activity activity, String[] strings) {
this.activity = activity;
this.strings = strings;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = activity.getLayoutInflater();
View view = inflater.inflate(R.layout.item_recycler_view, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) {
viewHolder.textView.setText(strings[position]);
}
@Override
public int getItemCount() {
return strings.length;
}
class ViewHolder extends RecyclerView.ViewHolder {
private TextView textView;
public ViewHolder(View view) {
super(view);
textView = (TextView) view.findViewById(R.id.text);
}
}
}
Running the project
Final thought
RecyclerViews. Further, please check other posts about this widget on my blog:
- Combining list view and grid view in a single screen (by
RecyclerView) - Build list and grid layout by
RecyclerView(explicit explanation) - All posts about
RecyclerView: visit this TAG link