I am having problem styling rating bar
Here is the screenshot
I want to reduce the size of rating bar. I know I can use style small to make them smaller but that is too small. Can I make somewhat medium style?.
Here is my xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#F0EEEF">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="RATE OUR SERVICES"
android:gravity="center"
android:textColor="#color/textColor"
android:textStyle="bold"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Quality"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Services"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Time"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Overall Rating"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
</LinearLayout>
You Can use a custom RatingBar. Following is the code
1. create a file in drawable as custom_ratingbar.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_full" />
</layer-list>
then use following in your RatingBar :-
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:progressDrawable="#drawable/custom_ratingbar"
android:numStars="5"
android:stepSize="0.2"
android:rating="3.0" />
You can create custom style for ratingbar to make it have suitable size:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="foodRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:minHeight">48dip</item> <!-- your desired size -->
<item name="android:maxHeight">48dip</item> <!-- your desired size -->
</style>
</resources>
then use this style to your rating bar.
There is more specific tutorial:http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/.
I made a custom ratingbar which might help you: SimpleRatingBar.
It features:
Fully working android:layout_width: it can be set to wrap_content, match_parent or abritary dp.
Arbitrary number of stars.
Arbitrary step size.
Size of stars can be controlled exactly or by setting a maximum size.
Customizable colors (border, fill and background of stars).
Customizable size separation between stars.
Customizable border width of stars.
Allows to set OnRatingBarChangeListener
Stars fill can be set to start from left to right or from right to left (RTL language support).
AnimationBuilder integrated in the view to set rating programatically with animation.
Here is a preview of it.
You can find it either in jcenter or in Maven Central. So in your build.gradle file just add to your dependencies:
compile 'com.iarcuschin:simpleratingbar:0.1.+'
I hope it's useful.
Related
I have the following layout for my custom log in dialog
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/padding_large">
<ImageButton android:src="#drawable/ic_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialog.login.settings"
android:padding="#dimen/margin_medium" />
<TextView android:text="#string/dialog.login.text.user_name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.user_name"
android:layout_width="match_parent"
android:gravity="center"
android:ems="20"
android:layout_height="wrap_content"
android:inputType="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView android:text="#string/dialog.login.text.password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.password"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckBox android:id="#+id/dialog.login.show_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dialog.login.check.show_password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_margin="#dimen/margin_medium"
android:checked="false" />
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:id="#+id/dialog.login.cancel"
android:drawableStart="#drawable/ic_exit_black"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_medium"
android:text="#string/dialog.login.button.cancel" />
<Button android:id="#+id/dialog.login.connect"
android:text="#string/dialog.login.button.connect"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_marginStart="#dimen/margin_medium"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
when I create the dialog and setcontentview the width of the dialog becomes equal to that of the image button on the first row
if I remove that , it becomes the size of the EditText (dialog.login.user_name) whose ems is 20
when I make the dialog's constructor call the base dialog constructor with a theme of R.style.Theme.Material.Dialog it does get the correct (about 3/4 of the screen) but the problem is that it ignores my primary and accent colours (which is normal)
Is there a way to have the dialog have the Theme.Material.Dialog size but still keep my own primary/accent colours?
thanks in advance for any help you can provide
After a lot of searching it seems that the solution is to actually replace the dialogTheme attribute of my main theme, so the solution was:
<style name="app.theme"
parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
<item name="android:dialogTheme">#style/app.dialog</item>
......
</style>
<style name="app.dialog"
parent="android:Theme.Material.Light.Dialog">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary.dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
I'm writing an app that will have 60 checkboxes, numbered 1-60.
My goal is to achieve something like this:
Is there a way to achieve this without having to draw 60 .png files with the number inside? Could I draw only the edges and add the numbers as a text property of the button?
I tried customizing a ToggleButton (got the idea from here)
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/toggle_selector"
android:background="#null"
android:paddingLeft="10dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textOn="60"
android:textOff="60" />
toogle_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/checked" />
<item
android:drawable="#drawable/not_checked" />
</selector>
but as a result, the text was placed at the right of the button. Is it possible to place the text on top of the image?
You can do it with relative layout with textview on top of Toggle button like this. Replace margins and size as per your need
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_floating_material_dark"
tools:context="com.contag.app.fragment.NavDrawerFragment">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/toggle_selector"
android:background="#android:color/transparent"
android:gravity="center"
android:textOn="#null"
android:textOff="#null"
android:minHeight="0dp"
android:minWidth="0dp"
android:id="#+id/toggleButton"
android:layout_marginTop="26dp"
android:layout_marginStart="156dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="60"
android:textColor="#android:color/holo_green_dark"
android:textSize="15sp"
android:id="#+id/textView"
android:layout_alignLeft="#+id/toggleButton"
android:layout_alignTop="#+id/toggleButton"
android:layout_alignRight="#+id/toggleButton"
android:layout_alignBottom="#+id/toggleButton"
android:gravity="center" />
</RelativeLayout>
I've set custom drawables to the RatingBar and seems that it's internal gravity became set to "top" (see screenshot, green is its background set to indicate its actual height)
Layout:
<LinearLayout
android:id="#+id/rate_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/reviews_tv"
android:layout_margin="#dimen/default_margin"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_rate"
android:textSize="14sp"
android:fontFamily="sans-serif" />
<RatingBar
android:id="#+id/rating_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0f0"
android:layout_marginLeft="#dimen/default_margin"
android:layout_marginStart="#dimen/default_margin"
android:stepSize="1"
android:progressDrawable="#drawable/rating_star" />
</LinearLayout>
rating_star.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:drawable="#drawable/ic_star" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/ic_star" />
<item android:id="#android:id/progress" android:drawable="#drawable/ic_redstar" />
</layer-list>
Gravity is OK with default drawable.
How to fix it?
I had the same problem and i just changed android:minHeight attribute of RatingBar. I hope it helps
I have created a custom RatingBar as described in one of the tutorials given here on stack-overflow and it's looking great, the problem is with the centering of the image. here is what I've got:
As you can see the TextView is centered vertically in the LinearLayout, but the RatingBar is at the top of it. Here is my xml code of this image:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center" >
<LinearLayout
android:layout_width="320dp"
android:layout_height="match_parent"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<RatingBar
android:id="#+id/ratingBar1"
style="#style/starsRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:numStars="5"
android:rating="2.3"
android:stepSize="1" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</ScrollView>
Here is the code of the styling:
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/star_ratingbar_full</item>
<item name="android:minHeight">36dip</item>
<item name="android:maxHeight">36dip</item>
</style>
Any ideas in the RatingBar would be apprisiated!
THANKS
Ok, I think I've got it.
The key issue is the ScrollView: it automatically makes things compact, unless you specifically tell it otherwise. In the scroll view, set
android:fillViewport="true"
to make it use the space available.
Hello to get all items at top you have to put:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="TextView" />
instead of:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
if you just want the rating bar centred:
just remove style="#style/starsRatingBar"
EDIT:
forget any think I said befor, it seems to work better when I changed the style to : (adjust your min/max height to get "perfect result" )
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#android:drawable/star_on</item>
<item name="android:minHeight">26dip</item>
<item name="android:maxHeight">26dip</item>
</style>
I have an application that has a custom Ratings bar. The code for the same is below:
<LinearLayout style="#style/FillWrap.LL.Footer"
android:layout_width="fill_parent" android:weightSum="1">
<ImageView android:id="#+id/IV_Prev" android:src="#drawable/left_arrow"
style="#style/Wrap" android:layout_weight="0.35" />
<RatingBar android:id="#+id/RB_Stars" style="#style/Wrap"
android:progressDrawable="#drawable/ratings_bar" android:numStars="3"
android:layout_weight="0.3" android:stepSize="1" />
<ImageView android:id="#+id/IV_Next" android:src="#drawable/right_arrow"
style="#style/Wrap" android:layout_weight="0.35" />
</LinearLayout>
The code for the ratings_bar drawable is:
<?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_swipe_fav_off_default"/>
<item android:id="#android:id/progress" android:drawable="#drawable/ic_swipe_fav_focused" />
</layer-list>
I'm able to see a proper rating bar with 3 stars in the portrait mode as below:
but in the landscape mode, the same becomes like
Can some one tell me why, and how can I circumvent this problem.
Thanks!
Try adding
android:layout_width="wrap_content"
android:layout_height="wrap_content"
into your < RatingBar >