Giter VIP home page Giter VIP logo

smileyrating's Introduction

Smiley Rating

SmileyRating is a simple rating bar for android. It displays animated smileys as rating icon.

  • Drawn completely using android canvas
  • Inspired by Bill Labus

Demo

Integration

Integrating SmileyRating in your project is very simple.

Step 1:

Add this dependency in your project's build.gradle file which is in your app folder

compile 'com.github.sujithkanna:smileyrating:1.6.8'

add this to your dependencies.

Step 2:

Now place the SmileyRating in your layout.

Note: The height of the SmileyRating will be automatically adjusted according to the width of this component.
<com.hsalf.smilerating.SmileRating
        android:id="@+id/smile_rating"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

Step 3:

Initialize your view

SmileRating smileRating = (SmileRating) findViewById(R.id.smile_rating);

Set this SmileySelectionListener to get notified when user selects a smiley

By default the selected smiley will be NONE

smileRating.setOnSmileySelectionListener(new SmileRating.OnSmileySelectionListener() {
            @Override
            public void onSmileySelected(@BaseRating.Smiley int smiley, boolean reselected) {
	            // reselected is false when user selects different smiley that previously selected one
		        // true when the same smiley is selected.
		        // Except if it first time, then the value will be false.
                switch (smiley) {
                    case SmileRating.BAD:
                        Log.i(TAG, "Bad");
                        break;
                    case SmileRating.GOOD:
                        Log.i(TAG, "Good");
                        break;
                    case SmileRating.GREAT:
                        Log.i(TAG, "Great");
                        break;
                    case SmileRating.OKAY:
                        Log.i(TAG, "Okay");
                        break;
                    case SmileRating.TERRIBLE:
                        Log.i(TAG, "Terrible");
                        break;
                }
            }
        });

If you want to know the level of user rating, You can listen for OnRatingSelectedListener

smileRating.setOnRatingSelectedListener(new SmileRating.OnRatingSelectedListener() {
            @Override
            public void onRatingSelected(int level, boolean reselected) {
                // level is from 1 to 5 (0 when none selected)
                // reselected is false when user selects different smiley that previously selected one
		        // true when the same smiley is selected.
		        // Except if it first time, then the value will be false.
            }
        });

Get current selection

@Smiley int smiley = mSmileRating.getSelectedSmile();
switch (smiley) {
    case SmileRating.BAD:
        Log.i(TAG, "Bad");
        break;
    case SmileRating.GOOD:
        Log.i(TAG, "Good");
        break;
    case SmileRating.GREAT:
        Log.i(TAG, "Great");
        break;
    case SmileRating.OKAY:
        Log.i(TAG, "Okay");
        break;
    case SmileRating.TERRIBLE:
        Log.i(TAG, "Terrible");
        break;
    case SmileyRating.NONE:
	    Log.i(TAG, "None");
	    break;
}

this will return you an int value which indicated the current selected smiley

Get current rating level

int level = mSmileRating.getRating(); // level is from 1 to 5
// Will return 0 if NONE selected

You can set selected smiley without user interaction

Without animation

smileRating.setSelectedSmile(BaseRating.GREAT);

OR

smileRating.setSelectedSmile(BaseRating.GREAT, false);

The smiley will be selected without any animation and the listeners won't be triggered

With animation

smileRating.setSelectedSmile(BaseRating.GREAT, true);

Smiley will be selected with animation and listeners will also be triggered(Only if the second param is true)

You can even set the smiley to NONE with/without animation by passing NONE using same API.

You can change the smiley name also

Raw string

mSmileRating.setNameForSmile(BaseRating.TERRIBLE, "Angry");

String resources

mSmileRating.setNameForSmile(BaseRating.TERRIBLE, R.string.anyTitle);

Angry

Custom font

You can change the title color of smileys.

mSmileRating.setTypeface(yourTypeface);

Change colors

You can set change the colors by xml

<com.hsalf.smilerating.SmileRating
        android:id="@+id/ratingView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        app:angryColor="#f29a68"
        app:drawingColor="#353431"
        app:normalColor="#f2dd68"
        app:isIndicator="false"
        app:placeHolderBackgroundColor="#e6e8ed"
        app:placeHolderSmileColor="#ffffff"
        app:textNonSelectionColor="#AEB3B5"
        app:textSelectionColor="#000000" />
Params Description
app:angryColor To set the color of the Angry/Terrible smiley's background color.
app:normalColor To change the color of all smileys background color except Angry/Terrible smiley.
app:drawingColor To change the color of all smileys (Smile and eyes).
app:placeHolderSmileColor To set the color of all placeholder smiley's (Smile and eyes) color.
app:placeHolderBackgroundColor To set the color of all placeholder smiley's background color.
app:textSelectionColor To set the color of the selected smiley's text color.
app:textNonSelectionColor To set the color of the non-selected smiley's text color
app:isIndicator A boolean to switch modes between editable and non editable bar

Or, you can change colors on runtime also

smileyRating.setAngryColor(int color);
smileRating.setNormalColor(int color);
smileRating.setDrawingColor(int color);
smileRating.setPlaceHolderSmileColor(int color);
smileRating.setPlaceHolderBackgroundColor(int color);
smileRating.setTextSelectionColor(int color);
smileRating.setTextNonSelectionColor(int color);

All colors should have be provided as color int.

Example

smileRating.setAngryColor(Color.RED);
smileRating.setAngryColor(Color.parseColor("#f29a68"));
smileRating.setNormalColor(ContextCompat.getColor(context, R.color.your_color));

Show/Hide line

You can customize wheather to show or hide the line behind smileys.

mSmileRating.setShowLine(true/false);

or

app:showLine="true/false"

passing true will show the line and passig false will hide the line. You can get the current visibility of the line by calling

boolean showing = mSmileRating.isShowingLine();

####Indicator To set the mode of the RatingBar. java mSmileyRating.setIndicator(false); passing false will allow the user to set smiley rating. passing true will make the RatingBar just an inticator which is untouchable and will be used to just show some rating by default.

smileyrating's People

Contributors

sujithkanna avatar addisonelliott avatar harsh159357 avatar paulomcnally avatar

Watchers

James Cloos avatar Tiago Sardi avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.