Adv

Android RatingBar

Android RatingBar Examples here. The concept here is:

  • RatingBar Usage with or without adapterviews.
Share

Related Concepts

Adv

4 Examples

  1. This answer was edited.

    Android MaterialRatingBar

    Another way for you to use a rating bar is the usage of a third party library. Through this you get a more beautiful and customizable library than the standard ratingbar.

    One of those libraries is material rating bar. It’s basically a material Design RatingBar with better appearance, compatible with Android 3.0+.

    Here are its features:

    1. Consistent appearance on Android 3.0+.
    2. Extends framework RatingBar.
    3. Get the 2dp star border background as in Material Icons and Google apps.
    4. Correct custom tinting across platforms.
    5. Able to render correctly when layout_width is set to match_parent, as in Google Play Store.
    6. Able to scale correctly when layout_height is set to values other than 16dp, 36dp and 48dp.
    7. Able to display ratings such as 4.3 correctly, which will be filled to 4.5 by framework’s incorrect implementation.
    8. Avoid framework’s sunken half star visual glitch.
    9. Used as a drop-in replacement for framework RatingBar.

    Here are the steps to use it:

    Step 1- Installation

    Install it from jcenter using the following statement:

    implementation 'me.zhanghai.android.materialratingbar:library:1.4.0'

    Step 2 – Layout

    Simply replace your RatingBar with MaterialRatingBar, and remember to apply a corresponding style for correct behavior.

    For example, to create a normal MaterialRatingBar:

    <me.zhanghai.android.materialratingbar.MaterialRatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialRatingBar.RatingBar" />

    Demos

    Here is the demo:

    MaterialRatingBar

    Links

    1. Read more or find code here.
    2. Follow author here.
  2. Adv
  3. 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.

  4. Adv
  5. Android ListView – With RatingBar, Images and Text

    Android ListView – With RatingBar, Images and Text Tutorial and Example.

    Lets see how to work with a Custom ListView with RatingBar.

     

    Moreover, the ListView shall hava images and text. We shall be using five stars in our ratingbar, and set their values programmatically in java code.

    When the user clicks a single ListView viewitem, we display the value of the associated card.Our viewitems shall be cardviews. We are using SimpleRatingBar library. We shall set the ratingbar properties in xml code, e.g number of stars, step size, star size etc.

    STEP 1 : Build.Gradle.
    • Add Dependency for CardView and SimpleRatingBar.
    • Then sync.SimpleRatingBar is fetched from online.
    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 : Add Images
    • Just add images to your drawable folder.Our recyclerview shall be displaying images.
    STEP 3 : ActivityMain.xml
    • This is a layout that gets generated by android studio in case you chose Basic Activity as template during project creation.
    <?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.listviewratingbar.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 4 : ContentMain.xml
    •  Add the ListView here.
    <?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.listviewratingbar.MainActivity"
        tools_showIn="@layout/activity_main">
    
        <ListView
            android_id="@+id/lv"
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            />
    </RelativeLayout>
    STEP 5 : Model.xml
    • Our model layout.
    • We add imageview,textview and ratingbar.
    • Set the ratingbar properties like number of stars and step size here.Also the colors.
    <?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 6  : Spaceship class
    • This is our data object class.
    package com.tutorials.hp.listviewratingbar.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 7 : SpaceshipCollection class
    • Exposes a static method that acts as our data source.
    package com.tutorials.hp.listviewratingbar.mData;
    
    import com.tutorials.hp.listviewratingbar.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 8  : CustomAdapter class
    • Our adapter class.
    • Binds our dataset to our listview.
    • Inflates the model layout to viewitem.
    package com.tutorials.hp.listviewratingbar.mAdapterView;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.iarcuschin.simpleratingbar.SimpleRatingBar;
    import com.tutorials.hp.listviewratingbar.R;
    import com.tutorials.hp.listviewratingbar.mData.Spaceship;
    
    import java.util.ArrayList;
    
    public class CustomAdapter extends BaseAdapter {
    
        private ArrayList<Spaceship> spaceships;
        private Context c;
    
        public CustomAdapter(Context c,ArrayList<Spaceship> spaceships) {
            this.spaceships = spaceships;
            this.c = c;
        }
    
        @Override
        public int getCount() {
            return spaceships.size();
        }
    
        @Override
        public Object getItem(int i) {
            return spaceships.get(i);
        }
    
        @Override
        public long getItemId(int i) {
            return i;
        }
    
        /*
        INFLATE XML LAYOUT TO VIEW
         */
        @Override
        public View getView(int pos, View view, ViewGroup viewGroup) {
            if(view==null)
            {
                view= LayoutInflater.from(c).inflate(R.layout.model,viewGroup,false);
            }
    
            TextView nameTxt= (TextView) view.findViewById(R.id.nameTxt);
            ImageView img= (ImageView) view.findViewById(R.id.spacecraftImage);
            SimpleRatingBar ratingBar= (SimpleRatingBar) view.findViewById(R.id.ratingBarID);
    
            final Spaceship s= (Spaceship) this.getItem(pos);
    
            nameTxt.setText(s.getName());
            ratingBar.setRating(s.getRating());
            img.setImageResource(s.getImage());
    
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(c, s.getName()+ " Rating : "+String.valueOf(s.getRating()), Toast.LENGTH_SHORT).show();
                }
            });
            return view;
        }
    }
    STEP 9 : MainActivity
    • Initialize ListView, set its adapter.
    package com.tutorials.hp.listviewratingbar;
    
    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.ListView;
    
    import com.tutorials.hp.listviewratingbar.mAdapterView.CustomAdapter;
    import com.tutorials.hp.listviewratingbar.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);
    
            ListView lv= (ListView) findViewById(R.id.lv);
            lv.setAdapter(new CustomAdapter(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 Run
    1. Download the project.
    2. You’ll get a zipped file,extract it.
    3. Open the Android Studio.
    4. Now close, already open project.
    5. From the Menu bar click on File >New> Import Project.
    6. Now Choose a Destination Folder, from where you want to import project.
    7. Choose an Android Project.
    8. Now Click on “OK“.
    9. Done, your done importing the project,now edit it.
    More Resources
    Resource Link
    GitHub Browse Browse
    GitHub Download Link Download

    Good day.

  6. Adv
  7. Android CardView – With RatingBar,Image,Text

    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



Share an Example

Share an Example

Browse
What is the capital of Egypt? ( Cairo )