Home Android Master Detail RecyclerView Images Text

Android Master Detail RecyclerView Images Text

Android Master Detail RecyclerView Images Text

Android Master Detail Example with RecyclerView.The RecyclerView shall comprise CardViews with images and text.We work with two activities.


  • We are going to have two views or activities,the Master View and the Detail View.
  • The Master View shall be the Master Activity.
  • It shall be responsible for displaying a List of data.
  • The component of choice is recyclerView.
  • The data shall be images and text.
  • When clicked,we open the Detail Activity and pass the data via intents.
  • We display those data in the detail activity.
  • We have a video tutorial for this example below.You can also view the demo over there.
  • We've used Android Studio as our IDE.
  • The full source code is above for download.The instructions for importing to your android studio is below.

Tools Used

  • IDE : Android Studio
  • OS : Windows 8

How to Run

  • Download the project above.
  • You'll get a zipped file,extract it.
  • Open the Android Studio.
  • Now close, already open project
  • From the Menu bar click on File >New> Import Project
  • Now Choose a Destination Folder, from where you want to import project.
  • Choose an Android Project.
  • Now Click on “OK“.
  • Done, your done importing the project,now edit it.



The full source code reference is available above for download.If you prefer a step by step tutorial then watch our video tutorial at the bottom of this page.

RecyclerView Master View

RecyclerView Master View





  • First here's our dependencies closure in our app level build.gradle :


dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:design:23.3.0'
    compile 'com.android.support:cardview-v7:23.3.0'




  • Then here's our detail activity.It shall receive data passed via intent object.
  • It shall then display that data :


package com.tutorials.hp.masterdetailrecyclerview.mDetail;

import android.content.Intent;
import android.media.Image;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.tutorials.hp.masterdetailrecyclerview.R;

public class DetailActivity extends AppCompatActivity {

    TextView nameTxt;
    ImageView img;

    protected void onCreate(Bundle savedInstanceState) {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

        nameTxt= (TextView) findViewById(R.id.nameTxtDetail);
        img= (ImageView) findViewById(R.id.spacecraftImageDetail);

        //RECEIVE DATA
        Intent i=this.getIntent();
        String name=i.getExtras().getString("NAME_KEY");
        int image=i.getExtras().getInt("IMAGE_KEY");

        //BIND DATA


RecyclerView Adapter

  • We are suing recyclerView as our component of choice,here's our RecyclerView adapter.
  • It derives from RecyclerView.Adapter.
  • We pass it a Context and ArrayList as our parameters.
  • We override three methods : onCreateViewHolder,onBindViewHolder and getItemCount.


package com.tutorials.hp.masterdetailrecyclerview.mRecycler;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.tutorials.hp.masterdetailrecyclerview.R;
import com.tutorials.hp.masterdetailrecyclerview.mData.SpaceCraft;
import com.tutorials.hp.masterdetailrecyclerview.mDetail.DetailActivity;

import java.util.ArrayList;

 * Created by Oclemy on 5/11/2016 for ProgrammingWizards Channel and http://www.camposha.com.
public class MyAdapter extends RecyclerView.Adapter<MyHolder> {

    Context c;
    ArrayList<SpaceCraft> spaceCrafts;

    public MyAdapter(Context c, ArrayList<SpaceCraft> spaceCrafts) {
        this.c = c;
        this.spaceCrafts = spaceCrafts;

    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.model,parent,false);
        return new MyHolder(v);

    public void onBindViewHolder(MyHolder holder, int position) {
        final String name=spaceCrafts.get(position).getName();
        final int image=spaceCrafts.get(position).getImage();

        //BIND DATA

        holder.setItemClickListener(new ItemClickListener() {
            public void onItemClick(int pos) {


    public int getItemCount() {
        return spaceCrafts.size();

    private void openDetailActivity(String name,int image)
        Intent i=new Intent(c, DetailActivity.class);


        //open activity




  • Here's our MainActivity class,our launcher activity in this case.
  • We reference our RecyclerView by its id from our xml layout.
  • We instantiate our adapter.
  • We set the layoutmanager to the recyclerview and set its adapter.


package com.tutorials.hp.masterdetailrecyclerview;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

import com.tutorials.hp.masterdetailrecyclerview.mData.SpaceCraftsCollection;
import com.tutorials.hp.masterdetailrecyclerview.mRecycler.MyAdapter;

public class MainActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        RecyclerView rv= (RecyclerView) findViewById(R.id.rv);
        rv.setLayoutManager(new LinearLayoutManager(this));

        MyAdapter adapter=new MyAdapter(this, SpaceCraftsCollection.getSpaceCrafts());



Detail View

Detail View



Look,the full source code is available above.You can download it.Its well named and commented.If you are a complete newbie then you can do with our video tutorial below.It contains the demo also :

Video tutorial/Demo

  • We also have a video tutorial for this example explained in a step by step manner.
  • Moreover you can view the project demo there.
  • The full source code reference is of course in the link above.




  • Visit our channel for more examples like these.





Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    5 × 2 =

    Leave a Comment

    4 × 4 =