Android CardView - With RatingBar,Image,Text

September 6, 2017 Oclemy Android CardView, Android RatingBar 3 minutes, 46 seconds

Nowadays there are many applications of a ratingbar.Be it rating a product,rating a movie or jsut favoriting stuff, its important to have a simple widget that we can simply use to set rating on by specifying a rating value. We are going to use SimpleRatingBar library.We choose it cause its going to give us alot of control on the look and feel of our ratingbar.We can change the number of stars that get shown, the size of stars,their colors, their step size etc. Our aim in this tutorial is simple :

  • Have a CardView with an image, a text and ratingbar.
  • Set the default values of our rating in code.
  • Get the values of the ratingbar when the user clicks the floatingactionbutton.

Step 1 : Our Build.Gradle

  • We need to add dependency of our SimpleRatingBar library we are using as well as that of our CardView.
  • You then sync your project to download it.

 


apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "25.0.1"

    defaultConfig {
        applicationId "com.tutorials.hp.simplerater"
        minSdkVersion 15
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

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 2 : Our MainActivity

  • This is the only class we deal with here.
  • Initialize the ratingbar by referencing it from our layout specification.
  • When the user clicks the FloatingActionButton, show a toast with the value of ratingbar.

 

package com.tutorials.hp.simplerater;

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 com.iarcuschin.simpleratingbar.SimpleRatingBar;

public class MainActivity extends AppCompatActivity {

    SimpleRatingBar ratingBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ratingBar= (SimpleRatingBar) findViewById(R.id.ratingBarID);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Snackbar.make(view,String.valueOf(ratingBar.getRating()), Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

}

       

Step 3 : Our Layout

  • Layout fro our CardView, which is our root layout.
  • Its children include our SimpleRatingBar.
  • Take note we set various properties of our ratingbar here like : step size,star size, number of stars, color of stars, default value of star etc.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.tutorials.hp.simplerater.MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.CardView
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="10dp"
        card_view:cardElevation="5dp"
        android:layout_height="300dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/spacecraftImage"
                android:padding="10dp"
                android:src="@drawable/enterprise" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Spacecraft"
                android:id="@+id/nameTxt"
                android:padding="10dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"

                />

            <com.iarcuschin.simpleratingbar.SimpleRatingBar
                android:id="@+id/ratingBarID"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                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"
                />

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

</RelativeLayout>

Step 4 : 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.

 

Resources

No. Resource Direct Links
1. GitHub Source Code Browse
2. Source Code Download
3. YouTube Video Tutorial
4. Facebook Page
5. YouTube Channel

Comments