I use two RatingBars in my xml layout:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="0.25"
android:rating="4.25"/>
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="0.25"
android:rating="4.5"/>
Even though I set ratings to 4.25 and 4.5, both RatingBars display wrong number of stars filled. On an Android 6 device it looks like this:
On an android 4.3 device, it looks like this:
But on xml design view, I can see 4.25 and 4.5 are set. Can anyone tell me why? I do not do anything with the rating bars in my code).
Thanks.
In my opinion the problem is related to android:progressTint ,android:progressBackgroundTint & android:secondaryProgressTint.
Try to add following lines to your rating bar:
android:progressTint="Color1"
android:progressBackgroundTint="Color2"
android:secondaryProgressTint="Color3"
also try to add style to your rating bar as following:
<style name="RatingBar" parent="Theme.AppCompat"">
<item name="colorControlNormal">#color/yourColor1</item>
<item name="colorControlActivated">#color/yourColor2</item></style>
and finally add a the following line in your rating bar
style="#style/RatingBar"
It will work for you.
Related
I have a chip with 100dp of width but the text is not centered how I can center the text.
I use androidx with material library, I've tried put android:textAlignment="center" and android:gravity="center" but not work
<com.google.android.material.chip.Chip
android:id="#+id/chip"
style="#style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7:00" />
I have this
I want this
just now I faced with the same problem, and I solved it by set a chip property: android: textAlignment = "center". I tested your example and it works fine too, here the code that I tested:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.chip.Chip
android:id="#+id/chip"
style="#style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7:00"
android:textAlignment="center"/>
</FrameLayout>
Also make sure that you don't set or change a chip's text alignment somewhere in your code.
The short answer:
Chips aren't meant to be used the way you are trying to use them. They are supposed to wrap your content. Therefore there isn't a clean way to align the text in the center.
There is a workaround tho, you can use Chip_textEndPadding and Chip_textStartPadding attributes, which will be kinda awkward I guess.
I don't really know what you are trying to achieve, I mean, what is your why? Is it a button? Is it suppose just to show some text?
Please describe the feature, or at least, part of it.
Anyway:
According to the material design guidelines
Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.
Does your feature as anything to do with this?
In case you want a clickable, circular component you can simply use material button.
There is a similar question that was asked at github.
as others said you can use textAlignment ...but i wanted to tell you that if your using a custom font it wont be perfectly vertically aligned. you can check here for explanation.
so i would make a custom style that inherits from chip styles and set the font padding for usage like this:
<style name="customStyle" parent="#style/Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">#color/white</item>
******* <item name="android:includeFontPadding">true</item> *************
</style>
then for the text appearance you can make another style:
<style name="CustomChipTextAppearance" parent="TextAppearance.MaterialComponents.Chip">
<item name="android:fontFamily">?attr/myFont</item>
<item name="android:textAlignment">center</item>
</style>
dont forget to force a bridge theme in xml:
<com.google.android.material.chip.Chip 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"
style="#style/customStyle"
**** android:theme="#style/Theme.MaterialComponents.Bridge" ****
***** android:textAppearance="#style/CustomChipTextAppearance" *******
app:chipMinHeight="38dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:chipStrokeWidth="2dp"
app:rippleColor="#android:color/transparent"
tools:chipText="my chip" />
Use isTextAlignmentResolved,
For example, chipname.isTextAlignmentResolved() to do this programmatically.
I am building an app which uses a non-clickable (indicator) ratingbar. Now, when the ratingbar IS clickable, it has two different modes. When clicked the icons turn red (red is the accentColor in my styles). When not clicked, the stars are an ugly gray with a black outline. When a rating bar is set to unclickable (indicator), the stars are permanently black-and-gray.
Additionally, I would like to make the stars smaller. Can I do both of the above things without defining custom drawables? If I must define custom drawables, how can I access the preexisting "clicked star" drawable, so that I do not need to create my own?
Thanks
<RatingBar
style="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="3.5"
android:stepSize="0.5" />
and add this in your styles xml file
<style name="RatingBar"
parent="android:style/Widget.Material.RatingBar.Small">
<item name="colorControlNormal">#color/primary_light</item>
<item name="colorControlActivated">#color/primary_dark</item>
</style>
visit my Blog Post and see working example. This way you dont need to customise ratingBar.
I am using the Android progressbar in one of my widgets:
<ProgressBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/progressbar_Horizontal"
android:max="100"/>
In Android 2.x it looks well, like in the following picture. I have written the % on top of the bar itself.
But if I change in the Android Manifest
android:targetSdkVersion
to "15" the progressbar looks totaly different. It is now a thin blue line instead of a bar. The problem is that I have written above the progress bar some text, in particuallary % of the progress.
Thus as the bar is so thin this looks odd.
I cannot figure out how to increase the height of the bar again to e.g. 50dp. If I try android:layout_height="50dp" it stays still same thin.
First, you need to define the style of your progress bar in values->styles.xml of your project. something like:
<style name="tallerBarStyle" parent="#android:style/Widget.SeekBar">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#android:drawable/progress_horizontal</item>
<item name="android:indeterminateDrawable">#android:drawable/progress_horizontal</item>
<item name="android:minHeight">8dip</item>
<item name="android:maxHeight">20dip</item>
</style>
Edit the maxHeight to your desired height.
Then in your ProgressBar add:
style="#style/tallerBarStyle"
You need to replace
style=”?android:attr/progressBarStyleHorizontal”
to
style="#android:style/Widget.ProgressBar.Horizontal"
and layout_height will work
android:layout_height="50dp"
I'm having a little problem when using a custom rating bar style. I've read other topics on this, but the proposed solutions/answers are not solving the problem.
Android seems to be stretching part of the star image, creating this strange effect:
This strange effect is even visible in the graphical layout preview tool in eclipse:
The star "sprites" are: and
This is the custom style:
<style name="ratingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_bar</item>
<item name="android:minHeight">#dimen/ratingBarHeight</item>
<item name="android:maxHeight">#dimen/ratingBarHeight</item>
</style>
And this is the xml code in the layout:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="#dimen/ratingBarHeight"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:numStars="5"
android:stepSize="1.0"
style="#style/ratingBar" />
The height is defined as follows:
<dimen name="ratingBarHeight">32dip</dimen>
I had the same problem. The reason was that my drawable was smaller than #dimen/ratingBarHeight, it was 22 pixels. Changing #dimen/ratingBarHeight to 22dip fixed it for me, the strange effect disappeared.
Iam building a custom rating bar. With help of kozyr's article i have created it.
But i have an issue with different image scaling sizes for different screen types.
Below i provide image with screenshots of my custom rating bar in the left, and simple imageview to the right.
This is for HVGA screen.
link to screenshot
As you see, stars in rating bar and in the imageview are the same
And this screenshot from HVGA screen
another link to the screenshot
Android somehow resizes stars in my ratingbar. What is the problem?!!
Here is the code
<RatingBar android:id="#+id/rating_lunch" style="#style/starRatingBar" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:numStars="5" android:stepSize="1.0"/>
Here goes the style:
<style name="starRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/progress_star_big</item>
<item name="android:minHeight">19px</item>
<item name="android:maxHeight">19px</item>
</style>
Try using device independent pixels instead of actual pixels. e.g.:
<item name="android:maxHeight">19dp</item>
See the docs on this topic.
Problem solved. When i added
<uses-sdk android:minSdkVersion="4"
android:targetSdkVersion="7" />
to the manifest file everything became allright)