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.

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.

RecyclerView Master View

RecyclerView Master View

 

 

Code

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

 

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

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

 

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

 

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.

Android Material Design - RecyclerView Cards Master Detail [Open Activity] [With SouceCode]

 

More

YouTube

  • Visit our channel for more examples like these.

Facebook

Oclemy,Cheers.

 

 



Rating :

Leave a Reply

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

14 − fourteen =

COMMENTS