Monday, 18 January 2016

Android RecyclerView and CardView tutorial | Android RecyclerView and CardView widgets | Android RecyclerView and CardView with backward compatibility

Hello Friends,
         Today, I am going to share my another post on Android RecyclerView and CardView.
This widgets come in android  latest release i.e Lollipop, Android 5.0 and API Level 21.
We can also add support on lower devices above API Level 7 by adding support library.
For creating complex Listview we need RecyclerView  and CardView.



Android RecyclerView: The advance version of Listview is RecyclerView, It is more
                                        advance and flexible. RecyclerView uses Layout manager for
managing position of item inside the recycler view. Recycler view provides three
built in Layout manager :

1. LinearLayoutManager : shows items in a vertical or horizontal scrolling list.
2. GridLayoutManager: shows items in a grid.
3. StaggeredGridLayoutManager: shows items in a staggered grid.

For more check this Link


CardView Widget:  It help us in showing information inside cards that have a consistent
                                  look across the platform. CardView widgets can have shadows and
                                  rounded corners.
 Note:
       1. To create a card with a shadow, use the card_view:cardElevation attribute. 
       2. To set the corner radius in your layouts, use the card_view:cardCornerRadius
           attribute.
      3. To set the corner radius in your code, use the CardView.setRadius method.
      4. To set the background color of a card, use the card_view:cardBackgroundColor
            attribute.


Here is Sample Code:

1. MainActivity.java

package solutions.developer.android.com.recyclerview;

import android.app.Activity;
import android.database.Cursor;
import android.os.AsyncTask;
import android.os.Bundle;
import android.provider.MediaStore;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;

import java.util.ArrayList;
import java.util.List;


/**
 * Created by Mukesh on 12/20/2015.
 */

public class MainActivity extends Activity {

    /**
     * Cursor used to access the results from querying for images
     * on the SD card.
     */
    private Cursor cursor;
    /*
     * Column index for the Thumbnails Image IDs.
     */
    private int columnIndex;
    private static final String TAG = "RecyclerViewExample";

    private List mediaList = new ArrayList();

    private RecyclerView mRecyclerView;

    private MediaRVAdapter adapter;

    String type = "";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /* Initialize recyclerview */
        mRecyclerView = (RecyclerView) findViewById(R.id.list);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());

        type = "audio";
        new MediaAsyncTask().execute(type);

    }

    private void parseAllAudio(String type) {
        try {
          String TAG = "Audio";
          Cursor cur = getContentResolver().query(
                 MediaStore.Audio.Media.EXTERNAL_CONTENT_URI, null, null, null,
                  null);

          if (cur == null) {
              // Query failed...
              Log.e(TAG, "Failed to retrieve music: cursor is null :-(");
          } else if (!cur.moveToFirst()) {
             // Nothing to query. There is no music on the device. How boring.
              Log.e(TAG, "Failed to move cursor to first row (no query results).");
          } else {
              Log.i(TAG, "Listing...");
              // retrieve the indices of the columns where the ID,
              //title, etc. of the song are
              // add each song to mItems
             do {
                 int artistColumn = cur.getColumnIndex(MediaStore.Audio.Media.ARTIST);
                 int titleColumn = cur.getColumnIndex(MediaStore.Audio.Media.TITLE);
                 int albumColumn = cur.getColumnIndex(MediaStore.Audio.Media.ALBUM);
                 int durationColumn = cur.getColumnIndex(MediaStore.Audio.Media.DURATION);
                 int idColumn = cur.getColumnIndex(MediaStore.Audio.Media._ID);
              int filePathIndex = cur.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
                 Log.i(TAG, "Title column index: " + String.valueOf(titleColumn));
                 Log.i(TAG, "ID column index: " + String.valueOf(titleColumn));

                 Log.i("Final ", "ID: " + cur.getString(idColumn) + " Title: "
                 + cur.getString(titleColumn) + "Path: " +
                   cur.getString(filePathIndex));
                 MediaFileInfo audio = new MediaFileInfo();
                 audio.setFileName(cur.getString(titleColumn));
                 audio.setFilePath(cur.getString(filePathIndex));
                 audio.setFileType(type);
                 mediaList.add(audio);

              } while (cur.moveToNext());
          }

      } catch (Exception e) {
            e.printStackTrace();
      }
  }

  public class MediaAsyncTask extends AsyncTask {

      @Overrid
      protected void onPreExecute() {
        //setProgressBarIndeterminateVisibility(true);
      }

     @Override
     protected Integer doInBackground(String... params) {
         Integer result = 0;
         String type = params[0];
         try {
             mediaList = new ArrayList();
              if (type.equalsIgnoreCase("audio")) {
                   parseAllAudio(type);
                   result = 1;
              }
        } catch (Exception e) {
              e.printStackTrace();
              result = 0;
        }
       return result; //"Failed to fetch data!";
   }
    @Override
    protected void onPostExecute(Integer result) {

      // setProgressBarIndeterminateVisibility(false);
      /* Download complete. Lets update UI */
      if (result == 1) {
          adapter = new MediaRVAdapter(MainActivity.this, mediaList);
          mRecyclerView.setAdapter(adapter);
      } else {
          Log.e(TAG, "Failed to fetch data!");
      }
   }
 }
} 

2. MediaRVAdapter.java

package solutions.developer.android.com.recyclerview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.media.MediaMetadataRetriever;
import android.media.ThumbnailUtils;
import android.net.Uri;
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.io.File;
import java.util.List;

/**
 * Created by Mukesh on 12/20/2015.
 */
public class MediaRVAdapter extends RecyclerView.Adapter {


    private List itemList;

    private Context mContext;

    public MediaRVAdapter(Context context, List itemList) {
        this.itemList = itemList;
        this.mContext = context;
    }

    @Override
    public MediaListRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, null);
        MediaListRowHolder mh = new MediaListRowHolder(v);

        return mh;
    }

    @Override
    public void onBindViewHolder(MediaListRowHolder mediaListRowHolder, int i) {
        try {
            MediaFileInfo item = itemList.get(i);
            mediaListRowHolder.title.setText(item.getFileName());
            Uri uri = Uri.fromFile(new File(item.getFilePath()));
            if (item.getFileType().equalsIgnoreCase("audio")) {
                MediaMetadataRetriever mmr = new MediaMetadataRetriever();
                mmr.setDataSource(item.getFilePath());
                try {
                    if (mmr != null) {
                        byte[] art = mmr.getEmbeddedPicture();
                        if (art != null && art.length > 0) {
                            Bitmap bmp = BitmapFactory.decodeByteArray(art, 0, art.length);
                            if (bmp != null) {
                                bmp = ThumbnailUtils.extractThumbnail(bmp, 80, 50);
                                mediaListRowHolder.thumbnail.setImageBitmap(bmp);
                            }
                        }
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public int getItemCount() {
        return (null != itemList ? itemList.size() : 0);
    }

    public class MediaListRowHolder extends RecyclerView.ViewHolder {
        protected ImageView thumbnail;
        protected TextView title;

        public MediaListRowHolder(View view) {
            super(view);
            this.thumbnail = (ImageView) view.findViewById(R.id.image);
            this.title = (TextView) view.findViewById(R.id.name);
        }
    }
} 


Download Complete Code from here

Hope this will help some one.....
Enjoy coding.......
Cheers  :)

Mukesh Yadav

Hi Guys I am from Delhi working as Web/Mobile Application Developer(Android Developer), also have knowledge of Roboelctric and Mockito ,android test driven development... Blogging has been my passion and I think blogging is one of the powerful medium to share knowledge and ideas....

2 comments:

  1. thank u mukhesh ji fr sharing codes!!
    kind hearted man!!!!!!!!!!!!!

    ReplyDelete

 

Copyright @ 2013 Android Developer Blog.

Blog Widget by LinkWithin