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

Intro

• 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.

Let's go

1. Build.Gradle(App)

• 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'

}

2. DetailActivity

• 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;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

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

        //INITIALIZE VIEWS
        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
        nameTxt.setText(name);
        img.setImageResource(image);
    }

}

3. 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;

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;
    }

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

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

        //BIND DATA
        holder.nameTxt.setText(name);
        holder.img.setImageResource(image);

        holder.setItemClickListener(new ItemClickListener() {
            @Override
            public void onItemClick(int pos) {
                openDetailActivity(name,image);
                Toast.makeText(c,name,Toast.LENGTH_SHORT).show();
            }
        });

    }

    @Override
    public int getItemCount() {
        return spaceCrafts.size();
    }

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

        //PACK DATA TO SEND
        i.putExtra("NAME_KEY",name);
        i.putExtra("IMAGE_KEY",image);

        //open activity
        c.startActivity(i);

    }
}

4. MainActivity

• 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 {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

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

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

}

How To Run

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

More Resources

Good day.