unknown os platform
Android Vertical list view using RecyclerView with an Example | Whats-online.info
whats-online-info

Android Vertical list view using RecyclerView with an Example


Android
2016:12:02 / Science and Tutorials

How to build an Android app that implements scrollable vertical list view of images and text using RecyclerView like google play store Android app.







You can download a working demo at the end of this tutorial. 



Hi, guys, this is another chance I would like to discuss the most 
Awaited tutorial by most programmers. Most Android developers get stuck on the way while implementing either the horizontal listview or the vertical listview on their app. I would like to say; listview is a retarded library which currently does not support the horizontal listing of elements but with recyclerview, you can easily implement both vertical and horizontal listview on your android app with very minimal lines of code. Most big companies, example, google play store app, uses both the recyclerView inside CardView to implement the vertical and horizontal listing of apps on their Android app. For this post, I will show how to implement vertical recyclerview using images and text. Besides, the view is scrollable, and on item click, a toast message displays.

First, we need to add our recyclerview library to our project by, Copy and paste the code below and add it to our dependencies in our .gradle file.

Our RecyclerView Library

compile 'com.android.support:recyclerview-v7:23.1.1'

Our dependencies

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

Then we need to create two classes and two XML layout files. 


Classes
-MainActivty.java
-Data.java

XML files
activity_main.xml
vertical_menu.xml

MainActivity.java

Contain the vertical adapter class and the list of images and text added to the vertical recycler view as shown below.

public class MainActivity extends Activity { RecyclerView vertical_recycler_view; VerticalAdapter verticalAdapter; private List<Data> data; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vertical_recycler_view= (RecyclerView) findViewById(R.id.horizontal_recycler_view); data = fill_with_data(); verticalAdapter=new VerticalAdapter(data, getApplication()); LinearLayoutManager horizontalLayoutManager = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.VERTICAL, false); vertical_recycler_view.setLayoutManager(horizontalLayoutManager); vertical_recycler_view.setAdapter(verticalAdapter); } public List<Data> fill_with_data() { List<Data> data = new ArrayList<>(); data.add(new Data( R.drawable.img1, "Image 1")); data.add(new Data( R.drawable.img2, "Image 2")); data.add(new Data( R.drawable.img3, "Image 3")); data.add(new Data( R.drawable.img1, "Image 1")); data.add(new Data( R.drawable.img2, "Image 2")); data.add(new Data( R.drawable.img3, "Image 3")); data.add(new Data( R.drawable.img1, "Image 1")); data.add(new Data( R.drawable.img2, "Image 2")); data.add(new Data( R.drawable.img3, "Image 3")); return data; } public class VerticalAdapter extends RecyclerView.Adapter<VerticalAdapter.MyViewHolder> { List<Data> horizontalList = Collections.emptyList(); Context context; public VerticalAdapter(List<Data> horizontalList, Context context) { this.horizontalList = horizontalList; this.context = context; } public class MyViewHolder extends RecyclerView.ViewHolder { ImageView imageView; TextView txtview; public MyViewHolder(View view) { super(view); imageView=(ImageView) view.findViewById(R.id.imageview); txtview=(TextView) view.findViewById(R.id.txtview); } } @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.vertical_menu, parent, false); return new MyViewHolder(itemView); } @Override public void onBindViewHolder(final MyViewHolder holder, final int position) { holder.imageView.setImageResource(horizontalList.get(position).imageId); holder.txtview.setText(horizontalList.get(position).txt); holder.imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String list = horizontalList.get(position).txt.toString(); Toast.makeText(MainActivity.this, list, Toast.LENGTH_SHORT).show(); } }); } @Override public int getItemCount() { return horizontalList.size(); } } }

Data.java

gets, sets and returns images and text as shown below.

public class Data {     public int imageId;     public String txt;     Data( int imageId, String text) {         this.imageId = imageId;         this.txt=text;     } }

vertical_menu.xml

Layout for our list of images and text

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="horizontal"     android:layout_marginLeft="20dp"     android:layout_marginTop="10dp"     android:layout_width="match_parent"     android:layout_height="match_parent">     <ImageView         android:layout_width="wrap_content"         android:paddingRight="30dp"         android:layout_height="wrap_content"         android:id="@+id/imageview"/>     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:textColor="#fff"         android:id="@+id/txtview"/> </LinearLayout>

activity_main.xml

The main layout of our application. Contains the recyclerview widget responsible for listing of our data vertically.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">     <LinearLayout         android:layout_width="fill_parent"         android:background="#27002b"         android:layout_height="wrap_content">         <android.support.v7.widget.RecyclerView             android:id="@+id/horizontal_recycler_view"             android:background="#27002b"             android:layout_width="wrap_content"             android:layout_height="fill_parent"             />     </LinearLayout> </RelativeLayout>

Copy paste the above code snippets and paste on your android project

Download Demo here













You may also like:


Leave a comment












Subscribe to get replies direct to your mailbox

Submit comment