Android Master Detail RecyclerView Images Text

Read-only properties in JavaFX 8

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 *

13 − twelve =

COMMENTS