I am trying to change the stars of my rating bar by creating new style, this what i did :
<style name="RatingBarSmall" parent="android:Widget.DeviceDefault.Light.RatingBar.Indicator">
<item name="android:progressDrawable">#drawable/rating_bar</item>
<item name="android:minHeight">36dp</item>
<item name="android:maxHeight">36dp</item>
</style>
drawable/rating_bar:
<?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/rating_star_empty" />
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_star_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_star_filled" />
</layer-list>
rating bar xml view:
<RatingBar
android:id="#+id/ratingBar"
style="#style/RatingBarSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:isIndicator="true"
android:rating="5" />
and here is the tow images:
but i don't know why i got vertical lines under the stars as you can see int the bellow picture:
EDIT: SOLVED:i just set the rating bar height as the image height.
thanks
I observe this problem in this way. You may create any values in res/values/dimens.xml for each screen (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) like:
<dimen name="rating_min_height">36dp</dimen>
<dimen name="rating_min_width">36dp</dimen>
And use this:
<style name="RatingBarSmall" parent="android:Widget.DeviceDefault.Light.RatingBar.Indicator">
<item name="android:progressDrawable">#drawable/rating_bar</item>
<item name="android:minHeight">#dimen/rating_min_height</item>
<item name="android:maxHeight">#dimen/rating_min_width</item>
</style>
Or you can apply that logic to your drawable (rating_star_empty and rating_star_filled)
Related
I'm trying to add an icon to a switch control via thumbIcon, but I can't find a way to resize the icon. I'm trying to learn about this on this Page but I haven't been able to.
If I use the drawable without a selector, the icon displays the correct size, but if I use the drawable with the selector, the icon size becomes large, larger than 16dp and unsightly. Is there a way to change the icon size with the drawable mode selector? or can this be done in some way? I want when the switch is in the unchecked position it shows a different icon than the checked position with the right size or fit.
Material Switch
<com.google.android.material.materialswitch.MaterialSwitch
android:id="#+id/SFilter_WorldWideValue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:checked="true"
android:fontFamily="#font/roboto_medium"
android:text="#string/search"
android:textAllCaps="true"
android:textColor="#color/Text_Base_White"
android:textIsSelectable="false"
android:textSize="16sp"
app:thumbIcon="#drawable/icon_check" --> **Normal Size**
app:thumbIcon="#drawable/default_switch_icon" --> **Size is not normal**
tools:ignore="TouchTargetSizeCheck" />
style.xml
<style name="Theme.Default" parent="Theme.Material3.Light.NoActionBar">
...
<item name="materialSwitchStyle">#style/Switch.Default</item>
</style>
<style name="Switch.Default" parent="Widget.Material3.CompoundButton.MaterialSwitch">
<item name="thumbIcon">#drawable/default_switch_icon</item>
<item name="checkedIconSize">16dp</item> // Not working
<item name="selectorSize">16dp</item> // Not working
<item name="iconSize">16dp</item> // Not working
<item name="drawableSize">16dp</item> // Not working
<item name="itemIconSize">16dp</item> // Not working
<item name="maxImageSize">16dp</item> // Not working
<item name="materialThemeOverlay">#style/Switch.Colors.Default</item>
</style>
<style name="Switch.Colors.Default" parent="">
...
...
</style>
drawable/default_switch_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:state_checked="true"
android:drawable="#drawable/icon_check"/>
<item
android:state_checked="false"
android:drawable="#drawable/icon_close"/>
</selector>
You can use a layer-list in your selector :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State Checked -->
<item android:state_checked="true">
<layer-list>
<item android:drawable="#drawable/ic_check"
android:height="16dp"
android:width="16dp"
android:gravity="center"/>
</layer-list>
</item>
<!-- State Unchecked -->
<item android:drawable="#color/transparent" />
</selector>
I had to set the gravity to center or the icon was not centered in the thumb.
Ratingbar star not showing properly.
i don't know what i am doing wrong with it.
when i used custom style then a single star is showing only and its length is equal to 5star.
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-15dp"
android:stepSize="1"
android:numStars="5"
style="#style/customRatingBar" />
Style is:
<style name="customRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/manual_ratingbar</item>
<item name="android:minHeight">32dip</item>
<item name="android:maxHeight">32dip</item>
</style>
manual_ratingbar file:
<?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/ic_star_unselect" />
<item android:id="#android:id/progress" android:drawable="#drawable/ic_star_select" />
</layer-list>
it looks like:
and when i changed the Ratingbar style to
style="?attr/ratingBarStyleIndicator"
then there is extra star visible in background.
what should i do?
#chandan you can resolve this issue by adding this on RatingBar Layout android:indeterminate="false"
I am having a bit of a problem when setting a custom rating bar in android. I have followed this tutorial:
How to create Custom Ratings bar in Android
However I am experiencing an issue when changing/selecting more than 4 stars. The selected star image is misplaced a bit. Here is an image to show you what it looks like.
Here is my XML for creating the custom rating bar.
Main xml where the rating bar view is defined:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:gravity="center" >
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="19dp"
android:numStars="50"
android:stepSize="1.0"
style="#style/AppCustomRatingBar"/>
Custom style for the RatingBar
<style name="AppCustomRatingBar"
parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_stars_custom</item>
<item name="android:minHeight">19dp</item>
<item name="android:maxHeight">19dp</item>
</style>
rating_stars_custom.xml
<item
android:id="#android:id/background"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_stars_yellow_full" />
rating_stars_yellow_empty.xml
<?xml version="1.0" encoding="utf-8"?>
<item
android:id="#android:id/background"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_stars_yellow_full" />
rating_stars_yellow_full.xml
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:drawable="#drawable/home_icon_star_fill_selected" />
What am I doing wrong to misplace the stars? The image sizes of the stars (both yellow and white) are the same.
I managed to fix it. If you look at the picture I provided in my post above the yellow stars are like off with 1pix compared to empty stars. So I took a look at my pictures I use and their sizes. After that it appeared that the yellow star was 1pix shorter (in width) compared to the image with the empty star. So this was my problem I got new pictures of stars and I made sure they are the same size. Now I have 2 pictures 30x30 and all is OK! This fixed my problem! So my advice for people who are facing the same issue is to take a vary careful look at the size of the pictures they are using (empty/full) and make sure they are the same size. This way you save time and unnecessary coding. GL&HF :)
well I had the same problem with the rating bar. after doing some research I've found a way to overcome the above issue.
first, you need 2 stars, one empty star and one colored star. and size should be the same. (in my case both are 25x25)
then put this code in styles xml
<style name="redbar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingbar_red</item>
<item name="android:minHeight">25dip</item>
<item name="android:maxHeight">25dip</item>
</style>
create another xml file called ratingbar_red.xml inside the drawable folder.
<?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" />
</layer-list>
Finally crate your RatingBar like this.
<RatingBar
android:id="#+id/RatingBar05"
style="#style/redbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="false"
android:numStars="5"/>
this error || problem is actually related to the sizes of your images, Both have to be in the same size, the way I fixed this err is that I didn't remove the stoke or the border of the filled image, both images must have the same width and height
Xml file:
<RatingBar
android:id="#+id/row_item_rbRatingAvg"
style="#style/CustomRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:isIndicator="true" />
Style file:
<style name="CustomRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingstars</item>
<item name="android:minHeight">#dimen/rating_bar_height</item>
<item name="android:maxHeight">#dimen/rating_bar_height</item>
</style>
ratingstars.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_icon_a" />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/star_icon_a" />
<item android:id="#+android:id/progress"
android:drawable="#drawable/star_icon" />
</layer-list>
dimens.xml
<dimen name="rating_bar_height">38px</dimen>
above files i used for set my custom ratingbar. i have also different size images for star_icon_a and star_icon. but still not working. in some devices, image get scaled and in some device image get cut. i dont know how to make for all screen sizes.
below is sample of drawable-xxhdpi size.
I'm trying to customize ToggleButton in my app. I'm setting 9-patch image as background as written here.
And then in my layout xml:
<ToggleButton
android:id="#+id/toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_toggle_bg"
android:checked="true"
android:gravity="center_horizontal|center_vertical" />
btn_toogle_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/btn_toggle"/>
</layer-list>
btn_toggle.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_toggle_off" android:state_checked="false"/>
<item android:drawable="#drawable/btn_toggle_on" android:state_checked="true"/>
</selector>
9-patch looks like this (btn_toggle_off):
The same image for checked state.
But when I'm applying this as background I get some unexpected top and bottom padding:
I've got the same result when applying this background to Button or using xml-drawable as background.
How to avoid unexpected padding? Help, please.
Update:
Also, when I'm adding this style to the app theme there is no padding but ToggleButton becames unclickable (doesn't change its state):
styles.xml:
<style name="Widget.Button.Toggle" parent="android:Widget">
<item name="android:background">#drawable/btn_toggle_bg</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
themes.xml:
<style name="MyThemeName" parent="#android:Theme.Black">
<item name="android:buttonStyleToggle">#style/Widget.Button.Toggle</item>
</style>
It seems that I needed to extend android:Widget.Button.Toggle style:
<style name="Widget.Button.Toggle" parent="android:Widget.Button.Toggle">
<item name="android:background">#drawable/btn_toggle_bg</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
The reason for the padding is your right black pixel that describes where the content should be placed, should be the whole length of the image from top to bottom.
try this: