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
- Download the project.
- 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.
More Resources
| Resource | Link |
|---|---|
| GitHub Browse | Browse |
| GitHub Download Link | Download |
Good day.