Code Monkey home page Code Monkey logo

materialratingbar's Introduction

MaterialRatingBar

Icon

Material Design RatingBar with better appearance, compatible with Android 3.0+.

Why MaterialRatingBar?

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

Preview

Google Play

Sample APK

Sample app

Integration

Gradle:

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

Usage

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" />

In order to make your RatingBar take the correct and consistent size on all versions, you will always need to use one of the styles from this library. The trick inside it is android:minHeight and android:maxHeight that controls the drawable height.

You can checkout more small or indicator variants in styles.xml.

You can use app:mrb_fillBackgroundStars to control whether background stars are filled, otherwise it defaults to the same value as android:isIndicator which is the behavior of Google apps.

8 tint-related attributes such as app:mrb_progressTint and app:mrb_progressTintMode are also supported so that they can control the tinting of rating drawables. The default tint color is ?colorControlActivated, and the default tint mode is src_in.

An OnRatingChangeListener interface is also added to MaterialRatingBar, which enables callback while user is dragging, just as the listener in SeekBar.

For a detailed example, you can refer to the sample app's layout, where you can find examples such as tinting and wide layout.

Design

Filled star or star border

The framework's RatingBar uses filling stars with grey color as track, however as per the Material Icons site, star border icons are given.

Material Icons

And as for the Google Play Store and Google I/O app, they are both using the star borders as track.

Google Play Store Google I/O

With Google's design practice and aesthetic considerations taken into account, I decided to use the star border style.

Star size

Google Play Store has stars of optical size 24dp, while Google I/O app and framework Widget.Material.RatingBar.Indicator have stars of size 36dp (which are of optical size 30dp). (The framework's default size of 64dp is ridiculously large and thus not taken into consideration.)

Also noticing that the Material Icons site gives icons of 24dp (optical 20dp) and 36dp (optical 30dp), I decided to stick to the 36dp approach which is also visually pleasant.

Star border width

The ring for radio button in Material Design has a width of 2dp, and with experiments on other border widths, I decided to adopt the 2dp border width.

The star border icon is drawn with the help of Inkscape, by downloading the star icon SVG from Material Icons, duplicating the outer border path of the star, setting a stroke of 4dp, running stroke to path on it, extracting the inner border path, and finally combining this path and the original outer border path.

Wide layout

Framework RatingBar gives erroneous rendering for RatingBar when layout_width is set to match_parent by tiling the stars without any gap. Since Google Play Store employed the wide design, I implemented it inside this library as well, so that match_parent will work properly for MaterialRatingBar.

Dragging

Google Play Store and Google I/O app both used an implementation other than RatingBar, which means dragging on the bar across stars won't work (it is the functionality of AbsSeekBar). I think this is a handy way of interaction for users, and it enables the setting of 0 star which can be useful if you want to enable users to reset their rating to unrated.

License

Copyright 2016 Zhang Hai

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

materialratingbar's People

Contributors

tolriq avatar zhanghai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

materialratingbar's Issues

Bug

isIndicator设为true时
如果设置了mrb_secondaryProgressTint属性
当rating=2.5会显示3个星星

MaterialRatingBar中心是空心的问题

大神您好,原生的RatingBar位选中的star中心可以填充, 但是使用MaterialRatingBar后star中心是空心的,并且不能修改,未选中的星星需要是实心全白的,但是只能改变star边缘的颜色是怎么回事??? 还有请问原生的RatingBar点击状态为啥外围又一层类似于光圈的东西? 我用的是sdk23

Rating value on recyclerview scroll

Hi , i use this ratingbar library in my project
i use this in recyclerview but when user scroll to down , setOnRatingChangeListener called and value change

How can i check if just user submit rate , setOnRatingChangeListener called?

Tinting the border

Yo! How do you tint the non-filled stars? I found that you use png drawables but they come up as white ones instead of black. Do you default some tinting mode?

Not working with Jetifier

Unable to resolve dependency for ':app@quality_assuranceDebug/compileClasspath': Failed to transform file 'library-1.2.0.aar' to match attributes {artifactType=jetified-aar} using transform JetifyTransform

When trying to refactor to androidX, whenever i remove this library, everything works fine.

Different Border Color?

Is it possible to have a different border color? I see some styles for RatingBar that have many different colors and styles, but the border seems to be something very much bound to the Progress Drawable or the Indeterminate Drawable.

It would be great, for me, being able to control the border color at runtime.

如果不添加app:mrb_progressTint等参数,运行结果为空白

如果不添加app:mrb_progressTint和app:mrb_progressBackgroundTint,运行结果为空白,我还以为是没有成功导入库,或者这个库本身存在问题,其实只是没有显示出来。
If you can't understand Chinese, I'll rewrite it in English.

Click MaterialRatingBar with isIndicator attribute

I have a XML: <me.zhanghai.android.materialratingbar.MaterialRatingBar android:id="@+id/ratingBar" android:layout_width="0dp" android:layout_weight="8" android:layout_height="wrap_content" android:rating="0" android:layout_gravity="center" android:isIndicator="true" app:mrb_progressTint="@color/yellow_stars" app:mrb_progressBackgroundTint="@color/divider_gray" style="@style/Widget.MaterialRatingBar.RatingBar" />

and in my Java code i set clickListener method, but it's never called. If i remove isIndicator attribute, this works

Android Naugat rating count is wrong in OnRatingBarChangeListener

Android version : 7.0
Lib Version : compile 'me.zhanghai.android.materialratingbar:library:1.0.2'

The callback method is giving wrong rating count. When i am clicking 1 star count is coming as 2. This is happening with each star.

Rating is 1.000000 : fromUser true
Rating is 2.000000 : fromUser true
Rating is 4.000000 : fromUser true
Rating is 5.000000 : fromUser true
Rating is 3.000000 : fromUser true

If i click on the first half of the star Rating count is proper. If i click on second half then it adds +1 to count and sets it in UI.

Activity :

 ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
      @Override
      public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {

        Log.i(TAG,String.format("Rating is %f : fromUser %b",rating,fromUser));

        mTextView.setText(String.format("Rating is %f ",rating));

      }
    });

XML :

<me.zhanghai.android.materialratingbar.MaterialRatingBar
      android:id="@+id/ratingBar2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:isIndicator="false"
      android:stepSize="1"
      android:rating="5"
     
  />

What's the difference between rating bar and rating bar indicator?

Thanks for your great work! Once more thing is, what's the difference between
style="@style/Widget.MaterialRatingBar.RatingBar.Indicator.Small and style="@style/Widget.MaterialRatingBar.RatingBar.Small" ? I just want to make sure that I've used the correct one.
Thanks!

star size

any way to change the size of stars?

mrb_secondaryProgressTint color issue

I have set color in mrb_secondaryProgressTint but it does not apply.I want to apply empty star color.But how can apply empty(Non-progress) star color? (Now, It looks transparent. I want to apply color in empty star)

Stars not reflecting user input

I think this is a general issue with the RatingBar for Android, but wanted to post here to be sure as I couldn't find a definitive answer.

We have the MaterialRatingBar in our app (love it btw), using width=match_parent.

On some devices, when the user taps 1 star, the 2nd star updates. If they tap the 2nd star, the 3rd updates etc. User can never select 1 star and the star they select is never the correct one.

Samsung devices seem to suffer the worst with this issue. It works fine as well on plenty of devices. If we get rid of match_parent, it seems to work on all devices too.

Dynamic Star Count

Does the library support dynamic star count, i.e. 3/6/10 stars instead of 5 as per the dynamic need of the user?

I have not found any such option given & even easily manageable in the code. If there is no such feature, what is the right way to implement it?

Tinting border and isIndicator not working properly

I need to have the stars yellow and the user can't change the rating.
So I used the properties :

@color/yellow = #fae22f
app:mrb_progressTint="@color/yellow"
app:mrb_progressBackgroundTint="@color/yellow"
app:mrb_secondaryProgressTint="@color/yellow"
android:isIndicator="true"
android:numStars="5"
android:rating=3.5"

Should have 3.5 stars filled with yellow and 1.5 stars with only the border colored, but with isIndicator, every stars are filled.

So I used this instead

RatingBar ratingBar = (RatingBar)findViewById(R.id.ratingBar);
ratingBar.setOnTouchListener(new OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {
            return true;
        }
    });

Do you plan to fix this ?

Changing star color for API level < 21

How can I change the star colors on XML file?

I made it work with <item name="android:progressTint">@color/ratingbarColor</item>, but Android Studio warns me about this not working for devices with API level below 21.

How to disable selecting rate?

Hi, I would like to disable selecting rate value.

ratingBar.setEnable(false);

If I have set like above, it is blur a little.
So I want keep view color and brightness and disable touch.
What is the solution?
Thanks.

MaterialRatingBar is not working in MI Devices

I am using material rating bar in my application everything is working in all android devices except Redmi 3s prime (MIUI).Star is not looks like material rating bar. Kindly provide me a solution asap.

Help me

How do you call the onchangelistener?

Setting the clickable does not work. I tried to fix it this way.

is that right?
@OverRide
public boolean onTouchEvent(MotionEvent event) {

   //add this  
    if (!isClickable()) {
        return false;
    }
    if (isIndicator()) {
        return false;
    }
    float eventX = event.getX();
    float eventY = event.getY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mStartX = eventX;
            mStartY = eventY;
            mPreviousRating = mRating;
            break;
        case MotionEvent.ACTION_MOVE:
            if (!isScrollable()) {
                return false;
            }

            handleMoveEvent(eventX);
            break;
        case MotionEvent.ACTION_UP:
            if (!RatingBarUtils.isClickEvent(mStartX, mStartY, event) || !isClickable()) {
                return false;
            }

            handleClickEvent(eventX);
    }

    getParent().requestDisallowInterceptTouchEvent(true);
    return true;
}

setRating

How can I use setRating set the value is 8.9 or 6.8 and so on ,like this picture
image
my code is :
image

the result is:
image

Thank you

怎么设置不可触摸啊

MaterialRatingBar ratingBar = findViewById(R.id.library_wide_ratingbar);
ratingBar.setIsIndicator(false);

为什么无效呢

MaterialRatingBar is not showing on ListView Item placed in DrawerLayout NavigationView.

I have placed the xml Of MaterialDesignRatingBar in a expandible lisview item and it is not showing at all. its working on my other listviews with in Activities and fragments.

<me.zhanghai.android.materialratingbar.MaterialRatingBar
android:id="@+id/ratingBar"
style="@style/Widget.MaterialRatingBar.RatingBar"
android:layout_width="@dimen/_150sdp"
android:layout_height="@dimen/_25sdp"
android:layout_centerInParent="true"
android:rating="5"
android:layout_marginLeft="@dimen/_5sdp"
android:layout_marginStart="@dimen/_5sdp" />

I don't want to go for another custom library for rating bar because i have used it in my project.

Change star color in onRatingChanged

I'd like to change the color of all the stars as the rating value changes. I have ranges where a rating of [0-1] is red, (1-3) is yellow and [3-5] is green.

I added an OnRatingChangeListener to my class, but I can't figure out the proper way to set the color for the stars. Can you provide a specific example for how to programmatically change the fill color of the stars?

I think it has to do with the tint color, but I couldn't find good documentation to explain this. Thanks in advance!

OnRatingBarChangeListener is not raised!

When I set rating to 6, MaterialRatingBar does not raise OnRatingChangeListener!!

<me.zhanghai.android.materialratingbar.MaterialRatingBar
        android:id="@+id/ratingBar"
        android:layout_width="260dp"
        android:layout_height="24dp"
        android:numStars="10"
        android:rating="6"
        android:stepSize="1"
        />
MaterialRatingBar ratingBar = (MaterialRatingBar) findViewById(R.id.ratingBar);
ratingBar.setOnRatingChangeListener(new MaterialRatingBar.OnRatingChangeListener() {
            @Override
            public void onRatingChanged(MaterialRatingBar ratingBar, float rating) {
                Log.d("Test", String.format(Locale.US, "Rating: %f", rating));
            }
        });
ratingBar.setRating(6);

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.