Android RecyclerView → Android RecyclerView – With RatingBar,Images and Text – Camposha

Android RecyclerView

Android RecyclerView

Android RecyclerView

Android RecyclerView – With RatingBar,Images and Text

 

Android RecyclerView – With RatingBar,Images and Text

Ratingbars help us rate content and products. They are especially common in the web where content is plentiful.

Ratingbars help influence others opinions of the quality of content or product. Android also has a ratingbar widget that can help to easily rate anything imaginable.

So here we look at Android RecylerView with RatingBar. The RecyclerView shall comprise CardViews that have image,text and ratingbar. Users can then rate a single card and its contents.

We shall be setting the RatingBar values in our java code. We have a maximum of five stars but you can specify the quantity you desire in your XML code. We are using SimpleRatingBar library.

 

STEP 1 : Create Project

The first step is to create our project in android studio. We’ve chosen the basic activity as our template in android studio.

Step 2 : Our Build.Gradle

We then add our SimpleRatingBar as well as our CardView dependencies in our build.gradle.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'
    compile 'com.android.support:cardview-v7:24.2.1'
    compile 'com.iarcuschin:simpleratingbar:0.1.3'

}

Step 3 : Add Images

We also add images to our drawable folder from our computer.Am using Spacecraft images.

Step 4 : ActivityMain Layout

Heres our activity main.xml. It was generated by android studio when we chose the basic activity.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    
    
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    tools_context="com.tutorials.hp.recyclerviewratingbar.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        android_src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Step 5 : ContentMain Layout

  • We add the RecyclerView in our ContentMain.xml.
  • Give it an id.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    
    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"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.recyclerviewratingbar.MainActivity"
    tools_showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android_id="@+id/rv"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        />
</RelativeLayout>

Step 4 : Model Layout

  • Our model.xml layout shall get inflated into our RecyclerView viewitmes.
  • We have CardView as our root layout.
  • Each card then contains RatingBar,image and textview.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    
    
    android_orientation="horizontal"
    android_layout_width="match_parent"
    
    android_layout_margin="5dp"
    card_view_cardCornerRadius="10dp"
    card_view_cardElevation="5dp"
    android_layout_height="300dp">

    <LinearLayout
        android_orientation="vertical"
        android_layout_width="match_parent"
        android_layout_height="match_parent">

        <ImageView
            android_layout_width="wrap_content"
            android_layout_height="220dp"
            android_id="@+id/spacecraftImage"
            android_padding="5dp"
            android_src="@drawable/enterprise" />

    <LinearLayout
        android_orientation="horizontal"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_layout_weight="2">
        <TextView
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_textAppearance="?android:attr/textAppearanceLarge"
            android_text="Name"
            android_id="@+id/nameTxt"
            android_padding="5dp"
            android_layout_weight="1" />

        <com.iarcuschin.simpleratingbar.SimpleRatingBar
            android_id="@+id/ratingBarID"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_padding="5dp"
            app_srb_starSize="40dp"
            app_srb_numberOfStars="5"
            app_srb_rating="3"
            app_srb_stepSize="1"
            app_srb_borderColor="@color/colorPrimaryDark"
            app_srb_fillColor="@color/colorPrimary"
            android_layout_alignBottom="@+id/spacecraftImage"
            android_layout_alignParentRight="true"
            />
        </LinearLayout>

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

Step 7 : Spaceship class

  • This is our model class.
package com.tutorials.hp.recyclerviewratingbar.mData;

public class Spaceship {

    /*
    SPACESHIP PROPERTIES
     */
    private int rating;
    private String name;
    private int image;

    /*
    GETTERS AND SETTERTS
     */
    public float getRating() {
        return rating;
    }

    public void setRating(int rating) {
        this.rating = rating;
    }

    public String getName() {
        return name;
    }

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

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }
}

Step 8 : SpaceshipsCollections

  • This class contians a static method that shall return as an arraylist of spacecrafts.
package com.tutorials.hp.recyclerviewratingbar.mData;

import com.tutorials.hp.recyclerviewratingbar.R;
import java.util.ArrayList;

public class SpaceshipsCollection{
    /*
    1.CREATE SPACESHIP OBJECTS AND ASSIGN THEM PROPERTIES
    2.RETURN LIST OF THESE SPACESHIP OBJECTS
     */
    public static ArrayList<Spaceship> getSpaceships()
    {
        ArrayList<Spaceship> spaceships=new ArrayList<>();

        Spaceship s=new Spaceship();
        s.setName("Spitzer");
        s.setRating(4);
        s.setImage(R.drawable.spitzer);
        spaceships.add(s);

        s=new Spaceship();
        s.setName("Enterpise");
        s.setRating(3);
        s.setImage(R.drawable.enterprise);
        spaceships.add(s);

        s=new Spaceship();
        s.setName("Voyager");
        s.setRating(5);
        s.setImage(R.drawable.voyager);
        spaceships.add(s);

        s=new Spaceship();
        s.setName("Opportunity");
        s.setRating(3);
        s.setImage(R.drawable.opportunity);
        spaceships.add(s);

        s=new Spaceship();
        s.setName("Pioneer");
        s.setRating(2);
        s.setImage(R.drawable.pioneer);
        spaceships.add(s);

        s=new Spaceship();
        s.setName("WMAP");
        s.setRating(4);
        s.setImage(R.drawable.wmap);
        spaceships.add(s);

        s=new Spaceship();
        s.setName("Rosetter");
        s.setRating(1);
        s.setImage(R.drawable.rosetta);
        spaceships.add(s);

        s=new Spaceship();
        s.setName("Hubble");
        s.setRating(5);
        s.setImage(R.drawable.hubble);
        spaceships.add(s);

        return spaceships;
    }

}

Step 9 : RecyclerView Adapter

  • Here’s our RecyclerView Adapter.
  • It has an inner MyHolder class that extends RecyclerView.ViewHolder.
package com.tutorials.hp.recyclerviewratingbar.mAdapterView;

import android.content.Context;
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 com.iarcuschin.simpleratingbar.SimpleRatingBar;
import com.tutorials.hp.recyclerviewratingbar.R;
import com.tutorials.hp.recyclerviewratingbar.mData.Spaceship;

import java.util.ArrayList;

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyHolder> {

    private ArrayList<Spaceship> spaceships;
    private Context c;

    public RecyclerAdapter(Context c,ArrayList<Spaceship> spaceships) {
        this.spaceships = spaceships;
        this.c = c;
    }

    /*
    INITIALIZE VIEWHOLDER
     */

    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v= LayoutInflater.from(c).inflate(R.layout.model,parent,false);
        return new MyHolder(v);
    }

    /*
    BIND
     */
    @Override
    public void onBindViewHolder(MyHolder holder, int position) {
        Spaceship s=spaceships.get(position);

        holder.nameTxt.setText(s.getName());
        holder.img.setImageResource(s.getImage());
        holder.ratingBar.setRating(s.getRating());
    }

    /*
    TOTAL SPACECRAFTS NUM
     */
    @Override
    public int getItemCount() {
        return spaceships.size();
    }

    /*
    VIEW HOLDER CLASS
     */
    class MyHolder extends RecyclerView.ViewHolder
    {

        TextView nameTxt;
        ImageView img;
        SimpleRatingBar ratingBar;

        public MyHolder(View itemView) {
            super(itemView);

            nameTxt= (TextView) itemView.findViewById(R.id.nameTxt);
            img= (ImageView) itemView.findViewById(R.id.spacecraftImage);
            ratingBar= (SimpleRatingBar) itemView.findViewById(R.id.ratingBarID);

        }
    }
}

Step  11 : MainActivity

  • Finally our MainActivity is here.
  • Initialize RecyclerView then sets its LayoutManager.
  • Also set its adapter.
package com.tutorials.hp.recyclerviewratingbar;

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 com.tutorials.hp.recyclerviewratingbar.mAdapterView.RecyclerAdapter;
import com.tutorials.hp.recyclerviewratingbar.mData.SpaceshipsCollection;

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));
        rv.setAdapter(new RecyclerAdapter(this, SpaceshipsCollection.getSpaceships()));

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

}

How to Download and 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 Project importing start.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.

Leave a Reply

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

Join Us
X