Saturday, April 2, 2016

RecyclerView With Text & Images in Android Lollipop - Part2

"Jai Saraswati Maa"

Hi ... Dear All ..Today I am uploading a superb example of RecyclerView which is replacement of ListView in Android Lollipop.
In this example i displayed Image with Two Text using RecyclerView.
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'

A. Output- Layout  
             


B. Layout xml code
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.recyclerviewex2.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. <?xml version="1.0" encoding="utf-8"?>

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

    android:layout_width="match_parent" android:layout_height="105dp">


    <ImageView        android:layout_width="80dp"

        android:layout_height="100dp"        android:id="@+id/imageView"

        android:layout_alignParentLeft="true"        android:padding="4dp"

        android:layout_marginLeft="10dp"        android:src="@drawable/img4" />

    <TextView        android:layout_width="match_parent"

        android:layout_height="40dp"        android:text="New Text"

        android:id="@+id/name"        android:layout_toRightOf="@+id/imageView"

        android:gravity="center"        android:textSize="15dp"

        android:textStyle="bold"/>
    <TextView        android:layout_width="match_parent"

        android:layout_height="60dp"        android:text="Description...."

        android:id="@+id/desc"        android:layout_toRightOf="@+id/imageView"

        android:layout_below="@+id/name"        android:gravity="center"

        android:textSize="15dp"        android:textStyle="bold"/>
  <View    android:layout_width="match_parent"

    android:layout_height="1dp"    android:background="@color/colorPrimary"

    android:layout_below="@+id/imageView"    android:layout_alignParentBottom="true"

    android:layout_marginTop="3dp" />
</RelativeLayout>

C.  Resources  string.xml

<resources>
    <string name="app_name">RecyclerViewEx2</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>

@@@@@@ please add 10 images in your drawable folder @@@@

D. Java Files 
a. MainActivity.java

package com.exam.ravi.recyclerviewex2;

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);
        recyclerView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);
    }
}

b. MyData.java

package com.exam.ravi.recyclerviewex2;

/** * Created by Ravi on 4/3/2016. */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;
    }
}

c. MyRecyclerAdapter.java

package com.exam.ravi.recyclerviewex2;

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>();
    public MyRecyclerAdapter(ArrayList<MyData> arrayList)
    {
        this.arrayList = arrayList;
    }
    @Override

    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate
                                   (R.layout.row_layout,parent,false);
        MyViewHolder myViewHolder = new MyViewHolder(view);
        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
    {
        ImageView imageView;
        TextView title,desc;
        public MyViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageView);
            title = (TextView) itemView.findViewById(R.id.name);
            desc = (TextView) itemView.findViewById(R.id.desc);
        }
    }
}

No comments:

Post a Comment