Currently I'm developing an app which uses the RatingBar. I accidentally changed some styling values and now my RatingBar has some kind of stroke on it.
1 http://qs.lc/3ns3n
Like this.
I know this is a really silly question but I just can't remove it haha. Thank you!
<RatingBar android:layout_width="146dp"
android:layout_height="wrap_content"
style="?android:attr/ratingBarStyleSmall"
android:id="#+id/card_main_inner_ratingbar"
android:stepSize="1" android:numStars="10" />
I had the same problem and I solved it by setting the layout_width and the layout_height with only wrap_content
Create a selector file in the drawable folder:
custom_ratingbar_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/star_off" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/star_off" />
<item android:id="#android:id/progress"
android:drawable="#drawable/star_on" />
</layer-list>
In the layout set the selector file as progressDrawable:
<RatingBar
android:id="#+id/ratingBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:progressDrawable="#drawable/custom_ratingbar_selector"
android:numStars="8"
android:stepSize="0.2"
android:rating="3.0" />
And that's all we need.
If it was the same case for you just use:
<androidx.appcompat.widget.AppCompatRatingBar
...
android:secondaryProgressTint="YOUR_COLOR_HERE"/>
Before:
After:
Related
I am facing a strange problem with my custom RatingBar drawable. My images of drawables are stretched as you can see in the image.
I don't know what is the issue. I tried different solutions from here but none of them helped me.
Here is my rating bar xml code
<RatingBar
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:maxHeight="30dp"
android:numStars="5"
android:progressDrawable="#drawable/ratingbar_custom"
android:rating="4"
android:stepSize="1" />
here is drawable xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:drawable="#drawable/star_empty" />
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/star_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/star_filled" />
</layer-list>
And these are 2 images star_empty and star_filled
I want to change colour of RatingBar stars in every mode(highlighted, notHighlited, progress), but I already use style Widget.AppCompat.RatingBar.
I don't want to change style cause, I like star shapes and staff, I only want to change star colors, Is it possible?
Here's my code:
<RatingBar
android:id="#+id/ratingBar"
style="#style/Widget.AppCompat.RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1.0"
android:layout_gravity="center_horizontal"
android:rating="0.0" />
Use styles:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:drawable="#drawable/background" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/secondary_progress" />
<item android:id="#android:id/progress" android:drawable="#drawable/progress" />
</layer-list>
You can use this style following way. Add this line to the RatingBar:
android:progressDrawable="#drawable/rating"
I wanted to create a RatingBar that does not use an image to have a border. But I can't seem to get it right.
Here's what I wanted it to look like:
Here's what I got (filled - half empty - empty):
Here's my layout:
<RatingBar
android:id="#+id/ratingbar_rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:numStars="5"
android:rating="2.5"
android:stepSize="0.5"
android:scaleX="3.5"
android:scaleY="3.5"
style="?android:attr/ratingBarStyleIndicator"
android:isIndicator="false"
android:progressTint="#color/star"
android:progressBackgroundTint="#color/star_border"
android:secondaryProgressTint="#color/star_partially_empty"
android:backgroundTint="#color/star_partially_empty"
/>
Maybe any of these additional libraries: http://android-arsenal.com/tag/84
would do a disired work for you. Notice, that some of these doesn't use image.
Hope it help
Okay, so I used a custom drawable layer-list and Android will be the one to do the rest.
My RatingBar:
<RatingBar
android:id="#+id/ratingbar_rate"
style="#style/rateUsBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="0"
android:stepSize="1"
android:layout_gravity="center"
/>
In styles.xml:
<resources>
...
...
<style name="rateUsBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_stars</item>
<item name="android:minHeight">#dimen/rate_us_star_minheight</item>
<item name="android:maxHeight">#dimen/rate_us_star_maxheight</item>
</style>
</resources>
In rating_stars.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:drawable="#drawable/rate_empty" /> //gray star for empty
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rate_empty" /> //gray star for empty
<item
android:id="#android:id/progress"
android:drawable="#drawable/rate_filled" /> //yellow star for filled
</layer-list>
In dimens.xml:
<resources>
...
...
<dimen name="rate_us_star_minheight"> <!--height of your image--> </dimen>
<dimen name="rate_us_star_maxheight"> <!--height of your image--> </dimen>
</resources>
And that's it!
By following this article I was able to create a toggle button that's made out of images. My toggle doesnt have any text, just on/off images.
When my toggle button is created it's being stretched and loses it's proportions, how do I make it retain it's original size?
These are the images im using:
The code:
main.xml:
<ToggleButton
android:id="#+id/changeNumerals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:checked="true"
android:background="#drawable/toggle_bg"
android:textOn=""
android:textOff=""
/>
drawable/toggle.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/toggle_off" />
<item android:state_checked="true" android:drawable="#drawable/toggle_on" />
</selector>
drawable/toggle_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background" android:drawable="#android:color/transparent" />
<item android:id="#+android:id/toggle" android:drawable="#drawable/toggle" />
</layer-list>
Try following attributes for <ToggleButton>
android:background="#android:color/transparent"
android:button="#drawable/toggle_bg"
It should work. Good luck :)
The dimensions are "hardcoded" but they'll scale with the size of your screen.
So the xml could look like:
android:layout_width="64dp"
android:layout_height="24dp"
The official documentation for dps is here
To support versions from GINGERBREAD up to the current ones, I ended up using:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/filterPhotos"
android:checked="true"
android:textOn=""
android:textOff=""
android:paddingLeft="5dp"
android:drawableRight="#drawable/toggle_filter_photos"
android:background="#null"/>
and the drawable toggle_filter_photos.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/picture_filter_icons"
android:state_checked="true" />
<item android:drawable="#drawable/picture_inactive_filter_icons" />
</selector>
The other solutions above didn't work well for GINGERBREAD and newer as either the icons wouldn't show up at all (with android:button on GINGERBREAD) or the aspect ratio was lost (with android:background on JELLY_BEAN_MR1 (4.2.2)).
Spacing between the stars of a rating bar?
I have similar problem but I didn't find solution to make it without changes of images.
Maybe someome faced with such problem and solved it.
Thanks in advance.
Create a custom style that uses your own images with different spacing between them.
Use it in a layout like this:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/RatingBarLarge"/>
Define the style like this:
<style name="RatingBarLarge">
<item name="android:progressDrawable">#drawable/ic_rating_star_large</item>
<item name="android:minHeight">29dp</item>
</style>
Set the minHeight to whatever the height of your drawable is.
Then, define ic_rating_star_large as a layer list like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:drawable="#drawable/ic_rate_star_large_off" />
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/ic_rate_star_large_off" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/ic_rate_star_large_on" />
</layer-list>
Are you using this same kind of code for your rating bar?
// ?android:attr/ratingBarStyle- normal star
// ?android:attr/ratingBarStyleSmall - small star
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#android:drawable/toast_frame">
<RatingBar android:layout_width="wrap_content"
android:layout_height="wrap_content" style="?android:attr/ratingBarStyle"
android:id="#+id/ratingbar_default"
android:layout_marginTop="5dp"
android:layout_marginLeft="-8dp"
/>
</RelativeLayout>