Friday, April 8, 2016

RecyclerView including CardView(Single Row) with Text , Image & OnClick- Part 3

"Jai Saraswati Maa"

Hi ... Dear All ..Today I am uploading a superb example of RecyclerView in which each row is as a CardView.
In this example a have also added onClick event which display details in new Activity. 
Please check.
I am using Android Studio 1.5.1
Minimun SDK API 21 (Suggested)
Target SDK API 23
Please Like us & put your valuable suggestions in comment box.

****** Please add dependencies in build.gradle file as 
I have added...
compile 'com.android.support:recyclerview-v7:23.1.1'

compile 'com.android.support:cardview-v7:23.1.1'


****** Also take 10 images in drawable folder


A. Output will be like 
a. 












b. After Click on any row 




B. XML files 


a. activity_main.xml


<?xml version="1.0" encoding="utf-8"?>



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"



    xmlns:tools="http://schemas.android.com/tools"



    android:layout_width="match_parent"



    android:layout_height="match_parent"



    android:paddingBottom="@dimen/activity_vertical_margin"



    android:paddingLeft="@dimen/activity_horizontal_margin"



    android:paddingRight="@dimen/activity_horizontal_margin"



    android:paddingTop="@dimen/activity_vertical_margin"



    tools:context="com.exam.ravi.recyclerviewwithcardview.MainActivity">

    <android.support.v7.widget.RecyclerView



        android:layout_width="match_parent"



        android:layout_height="wrap_content"



        android:id="@+id/recyclerview">


    </android.support.v7.widget.RecyclerView>
</RelativeLayout>




b. Single Row with Card View row_cardview.xml




<?xml version="1.0" encoding="utf-8"?>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"



    android:orientation="vertical" android:layout_width="match_parent"



    android:layout_height="match_parent">


 <android.support.v7.widget.CardView



     android:layout_width="match_parent"



     android:layout_height="wrap_content"



     android:id="@+id/row_card">


     <RelativeLayout         android:layout_width="wrap_content"



         android:layout_height="match_parent"



         android:padding="10dp">
         <ImageView             android:layout_width="100dp"



             android:layout_height="100dp"



             android:id="@+id/flag_image"



             android:src="@drawable/img4"/>
         <TextView             android:layout_width="wrap_content"



             android:layout_height="wrap_content"



             android:id="@+id/country_title"



             android:layout_toRightOf="@+id/flag_image"



             android:text="India"             android:textSize="20dp"



             android:textStyle="bold"             android:layout_marginTop="10dp"



             android:layout_marginLeft="25dp"/>


         <TextView             android:layout_width="wrap_content"



             android:layout_height="wrap_content"



             android:id="@+id/country_desc"



             android:layout_toRightOf="@+id/flag_image"



             android:layout_below="@+id/country_title"



             android:text="Incrdible India"             android:textSize="15dp"



             android:textStyle="italic"             android:layout_marginTop="10dp"



             android:layout_marginLeft="25dp"/>
     </RelativeLayout>


 </android.support.v7.widget.CardView>
</LinearLayout>




c. activity_country_details.xml




<?xml version="1.0" encoding="utf-8"?>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"



    xmlns:tools="http://schemas.android.com/tools"



    android:layout_width="match_parent"



    android:layout_height="match_parent"



    android:paddingBottom="@dimen/activity_vertical_margin"



    android:paddingLeft="@dimen/activity_horizontal_margin"



    android:paddingRight="@dimen/activity_horizontal_margin"



    android:paddingTop="16dp"    android:orientation="vertical"



    tools:context="com.exam.ravi.recyclerviewwithcardview.County_Details">


    <ImageView        android:layout_width="300dp"



        android:layout_height="300dp"



        android:id="@+id/img_detail"        android:src="@drawable/img4"



        android:layout_gravity="center"/>


    <TextView        android:layout_width="match_parent"



        android:layout_height="wrap_content"



        android:id="@+id/title_detail"        android:text="India"



        android:gravity="center"        android:layout_gravity="center"



        android:textSize="30dp"        android:layout_marginTop="20dp"



        android:textStyle="bold"/>


    <TextView        android:layout_width="match_parent"



        android:layout_height="wrap_content"        android:id="@+id/desc_detail"



        android:gravity="center"        android:layout_gravity="center"



        android:text="Incredible India"        android:layout_marginTop="15dp"



        android:textSize="20dp"        android:textStyle="italic"/>


</LinearLayout>




C. Java Files 


a. MainActivity.java




package com.exam.ravi.recyclerviewwithcardview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    RecyclerView.Adapter adapter;
    RecyclerView.LayoutManager layoutManager;
    String act_title[],act_desc[];
    int img_src[] = {R.drawable.img1,R.drawable.img2,R.drawable.img3,


           R.drawable.img4,R.drawable.img5,R.drawable.img6,R.drawable.img7,
            R.drawable.img8,R.drawable.img9,R.drawable.img10};
    ArrayList<MyData> arrayList = new ArrayList<MyData>();
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        act_title = getResources().getStringArray(R.array.titles);
        act_desc = getResources().getStringArray(R.array.descriptions);
        int i=0;
        for(String data:act_title)
        {
            MyData myData = new MyData(img_src[i],data,act_desc[i]);
            arrayList.add(myData);
            i++;
        }
        adapter =  new MyRecyclerAdapter(arrayList,this);
        recyclerView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);
    }
}




b. MyRecyclerAdapter.java




package com.exam.ravi.recyclerviewwithcardview;


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.ImageView;
import android.widget.TextView;
import java.util.ArrayList;

public class MyRecyclerAdapter extends 


       RecyclerView.Adapter<MyRecyclerAdapter.MyViewHolder> {

    ArrayList<MyData> arrayList = new ArrayList<MyData>();
    Context context;
    public MyRecyclerAdapter(ArrayList<MyData> arrayList, Context ctx)
    {
        this.arrayList = arrayList;
        context=ctx;
    }
    @Override



    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 


    {
        View view = LayoutInflater.from(parent.getContext()).


                 inflate(R.layout.row_cardview,parent,false);
        MyViewHolder myViewHolder = new MyViewHolder(view,context,arrayList);
        return myViewHolder;
    }

    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {
        MyData myData =  arrayList.get(position);
        holder.imageView.setImageResource(myData.getImgsrc());
        holder.title.setText(myData.getName());
        holder.desc.setText(myData.getDescription());
    }

    @Override    public int getItemCount() {
        return arrayList.size();
    }
    public static class MyViewHolder extends RecyclerView.ViewHolder 


               implements View.OnClickListener
    {
        ImageView imageView;
        TextView title,desc;
        ArrayList<MyData> list = new ArrayList<MyData>();
        Context cobject;
        public MyViewHolder(View itemView,Context cob,ArrayList<MyData> lob) {
            super(itemView);
            cobject=cob;
            list=lob;
            itemView.setOnClickListener(this);
            imageView = (ImageView) itemView.findViewById(R.id.flag_image);
            title = (TextView) itemView.findViewById(R.id.country_title);
            desc = (TextView) itemView.findViewById(R.id.country_desc);
        }

        @Override        public void onClick(View v) {
            int position = getAdapterPosition();
            MyData data = list.get(position);
            Intent intent = new Intent(cobject,County_Details.class);
            intent.putExtra("image_id",data.getImgsrc());
            intent.putExtra("title_id",data.getName());
            intent.putExtra("desc_id",data.getDescription());
            cobject.startActivity(intent);
        }
    }
}




c. MyData.java




package com.exam.ravi.recyclerviewwithcardview;

public class MyData
{
    int imgsrc;
    String name,description;
    public MyData(int imgsrc, String name, String description)
    {
        this.setImgsrc(imgsrc);
        this.setName(name);
        this.setDescription(description);
    }
    public int getImgsrc() {
        return imgsrc;
    }

    public void setImgsrc(int imgsrc) {
        this.imgsrc = imgsrc;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}




d. Country_Details.java




package com.exam.ravi.recyclerviewwithcardview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class County_Details extends AppCompatActivity {
    ImageView imageView;
    TextView det_name,det_desc;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_county__details);
        imageView = (ImageView) findViewById(R.id.img_detail);
        det_name = (TextView) findViewById(R.id.title_detail);
        det_desc = (TextView) findViewById(R.id.desc_detail);
        imageView.setImageResource(getIntent().getIntExtra("image_id",0));
        det_name.setText(getIntent().getStringExtra("title_id"));
        det_desc.setText(getIntent().getStringExtra("desc_id"));
    }
}




D. strings.xml




<resources>
    <string name="app_name">RecyclerView with CardView</string>
    <string-array name="titles">
        <item>AUSTRALIA</item>
        <item>CANADA</item>
        <item> ENGLAND </item>
        <item> INDIA</item>
        <item> NEW ZEALAND</item>
        <item>PAKISTAN</item>
        <item>NETHERLAND</item>
        <item> SAUDI ARBIA</item>
        <item>SRI LANKA</item>
        <item>USA</item>

    </string-array>
    <string-array name="descriptions">
        <item>Largest City Sudeny</item>
        <item>Second Punjab</item>
        <item>Fish and Chips</item>
        <item>Traditional and Culture</item>
        <item>Famous for Kiwi</item>
        <item> Capital is Islamabad</item>
        <item>WindMills</item>
        <item>Burj Khalifa</item>
        <item>RamSetu Bridge India to Srilanka</item>
        <item> Economically Strong </item>

    </string-array>
</resources>
























Posted by



at







































1 comment:








  1. UnknownJuly 24, 2018 at 3:43 AM
    thanks a lot bro because of you now i can display imageview :D
    ReplyDelete




































        

      









Subscribe to:
Post Comments (Atom)