Hi I am using custom rating bar with custom images. I need to provide space between stars. When I increase minimum height and maximum height, star image remains same.
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:padding="5dp">
<TextView
android:id="#+id/allreviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Rating"
android:layout_marginLeft="8dp"
android:textSize="14sp" />
<RatingBar
android:id="#+id/reviewallrating"
style="#style/customRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#+id/allreviews"
android:isIndicator="false"
android:numStars="5"
android:stepSize="0.1" />
</RelativeLayout>
styles:
#drawable/star_rating_bar_full
12dip
12dip
star_rating_bar_full.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_ratingbar_full_empty" />
<!-- <item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/star_ratingbar_full_empty" /> -->
<item android:id="#+android:id/progress"
android:drawable="#drawable/star_ratingbar_full_filled" />
</layer-list>
star_ratingbar_full_empty:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the rating bar drawable that is used to
show a filled cookie. -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/star_gray" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star_gray" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star_gray"/>
<item android:drawable="#drawable/star_gray" />
</selector>
star_ratingbar_fullfilled.xml:
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/yellow_star" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/yellow_star" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/yellow_star" />
<item android:drawable="#drawable/yellow_star" />
I used style="?android:attr/ratingBarStyle" in styles but still output remains same.
You could simply add some empty space to the left and right sides of your PNGs.
That is, increase the width of the grey and yellow PNGs in GIMP (or whatever graphic editor program you use).
Just the canvas, without stretching the star icon.
If you are using Drawable for the stars. Make sure your drawable have some left padding according to your requirement in the png image.
Otherwise through code its not working. Some days back I stuck with the same problem. I gone through by using the left padded image. Hope it will work.
Related
I followed an answer on stack overflow to adding a custom rating bar to an android project, here it is: https://stackoverflow.com/a/32828726/5909396
Just in case I am posting my code.
First I created ratingBar.xml in 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/ratingbar_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/ratingbar_empty" />
<item android:id="#android:id/progress"
android:drawable="#drawable/ratingbar_filled" />
Then I created ratingbar_empty.xml and ratingbar_filled.xml also in drawable folder:
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_emptyStar" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_emptyStar" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_emptyStar" />
<item android:drawable="#drawable/ic_emptyStar" />
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_fullStar" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_fullStar" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_fullStar" />
<item android:drawable="#drawable/ic_fullStar" />
And then I created the custom style in styles.xml
<style name="CustomRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingbar</item>
<item name="android:minHeight">50dp</item>
<item name="android:maxHeight">50dp</item>
</style>
And finally I added a ratingBar to layout. The way I structured it is the rating bar is inside a relative layout and there is a textview inside the relative layout as well that is on top of the rating bar (The text view shows if there is no rating);
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:orientation="vertical"
android:layout_gravity="center">
<RatingBar
android:id="#+id/ratingRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/CustomRatingBar"
android:numStars="5"
android:stepSize="0.1"
android:isIndicator="true"
android:max="5"
android:progress="3"
android:layout_centerVertical="true"
android:progressTint="#ffe4b331" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No rating available"
android:textColor="#android:color/white"
android:textSize="11dp"
android:id="#+id/textViewNoRatingAvailable" />
</RelativeLayout>
When I run the application on the simulator, the stars are really large and are cut-off like below:
There are supposed to be five stars. How can i fix this problem?
I made a library with a customizable rating bar. You can set full and empty icon and their size. I hope this helps you.
This is an example of the usage, is very simple:
<com.kabuki5.logicalratingbar.CustomRatingBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:clickable="true"
app:iconSize="58dp"
app:imageEmpty="#drawable/ic_heart_empty"
app:imageFull="#drawable/ic_heart_full"
app:initRating="5"
app:maxItems="5" />
Also you can set a listener to get on change value callback.
Logical Rating Bar
set
android:layout_width="wrap_content"
android:layout_height="0dp"
.
I create a custom rating bar. I set 5 custom star images, but it shows only one. Instead of a variable number of rating drawables, I see only one, regardless of the number of stars set. Any help will be appreciated.
xml.code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<RatingBar
android:id="#+id/ratingbar_default"
style="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginBottom="20dp" />
<TextView
android:id="#+id/textView"
android:layout_width="276dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="show state up checkbox"
android:textColor="#CC00CC"
android:textSize="20dp" />
java code :
Activity RatingBarActivity
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rating);
final TextView text = (TextView) findViewById(R.id.textView);
final RatingBar ratingBar_default = (RatingBar) findViewById(R.id.ratingbar_default);
ratingBar_default.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener()
{
#Override
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser)
{
// TODO Auto-generated method stub
text.setText("Rating: " + String.valueOf(rating));
}
});
<?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_ratingbar_full_empty" />
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/star_ratingbar_full_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/star_ratingbar_full_filled" />
</layer-list>
res/drawable/star_ratingbar_full_empty.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/star2" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star2" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star2" />
<item android:drawable="#drawable/star2" />
</selector>
res/drawabstar_ratingbar_full_filled.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the rating bar drawable that is used to
show a unfilled cookie. -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/star3" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star1" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star1" />
<item android:drawable="#drawable/star1" />
</selector>
styles.xml file :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"></style>
<style name="RatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/star_rating_bar_full</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>
</resources>
In my case trouble was in SVG drawables in layer-list. When I changed them to PNG it starts work correctly
Try to specify an android:numStars attribute for your RatingBar in layout file activity_rating.xml. I guess, the default value is 1 - that's why you see only one star
Just remove any-dpi drawable of rating bar filled and empty image from drawable. And it will work for you. Because it to show custom rating bar you can give both xml and png files in your layer list. But to show all the stars, you have to put only png icons into drawable folder.
Has been a while but never hurts to answer.
Here is my 3 step solution regardless of SDK version.
1- Add this as your RatingBar in your xml layout:
<RatingBar
android:id="#+id/new_ratingbar"
android:progressDrawable="#drawable/custom_drawable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="0.5"/>
If needed, you can give the RatingBar minHeight and maxHeight or add other attributes as required.
2- Here is the drawable you would refer the above android:progressDrawable to:
custom_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/rating_bar_empty" /> <!--this is your .png file-->
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_bar_fill" /> <!--this is your .png file-->
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_bar_fill" /> <!--this is your .png file-->
</layer-list>
3- The last thing is to provide the .png files in your various drawable folders.
I am trying to write code based on which I should update the rating in steps of 1 as I am getting integer values for Rating. Here is the code for the same
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginRight="3dp" >
<RatingBar
android:id="#+id/PriceRating"
style="#style/foodRatingBarSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:isIndicator="true"
android:numStars="1"
android:stepSize="0.25"
android:max="5" />
</LinearLayout>
Here is the code in the style file:
<style name="foodRatingBarSmall" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/foodratingbar_full</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
</style>
Here are the foodratingbar file
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/background" android:drawable="#drawable/foodratingbar_fill"
/>
<item android:id="#+id/secondaryProgress"
android:drawable="#drawable/foodratingbar_fill" />
<item android:id="#+id/progress" android:drawable="#drawable/foodratingbar_empty" />
</layer-list>
And here is the code for foodratingbar_fill:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/dollar" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/dollar" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/dollar" />
<item android:drawable="#drawable/dollar" />
</selector>
where dollar is a png image
The problem with my code is that I cannot get it to update to the required number of stars and I see vague values of the number of stars being displayed on android. I would like to know how I can display one dollar image for 1 rating with a maximum of 5
As the title, in a button I set a resource in the background (a square image).
The problem is that the button is now much higher than the classical buttons, how do I make it as high as the others?
I tried with 9.patch but have the same result...
This is the 9patch file (only the angle is important)
Code of the button :
<Button
android:id="#+id/buttonLogIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/button"
android:text="Log In"
android:textColor="#FFFFFF" />
Code of the resource :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/bottonep" /> <!-- pressed -->
<item android:drawable="#drawable/bottone" /> <!-- default -->
</selector>
i've solved with this
the ninepath must be smallest
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_default_pressed_holo_dark" /> <!-- pressed -->
<item android:drawable="#drawable/btn_default_normal_holo_dark" /> <!-- default -->
</selector>
I want set a border to Relativelayout. I make relativelayout clickable and use selector for changing selected color, also I use shape for rounding corners of layout. But when I select the layou the shape takes all background including the border. I can't find a way for solving this problem.
This is my main.xml
<RelativeLayout android:id="#+id/map_refresh"
android:layout_height="fill_parent" android:layout_width="wrap_content"
android:background="#drawable/settings_selector_up"
android:padding="15dp"
android:layout_marginLeft="15dip" android:layout_marginRight="15dip" android:layout_marginTop="5dip">
<TextView android:id="#+id/Text1"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="Map refresh period">
</TextView>
<TextView android:id="#+id/TextView09"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="1 min"
android:layout_alignParentRight="true"
android:paddingRight="5dp">
</TextView>
</RelativeLayout>
</LinearLayout>
this is my settings_selector_up.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false" android:background="#drawable/settings_border_roundup" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false" android:drawable="#drawable/settings_border_roundup" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false" android:drawable="#drawable/settings_border_roundup" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false" android:drawable="#drawable/settings_border_roundup" />
<!-- Pressed -->
<item android:state_selected="true" android:state_pressed="true"
android:drawable="#drawable/selector_pressed" >
</item>
<item android:state_pressed="true" android:drawable="#drawable/list_selector_pressed" />
</selector>
And this is my selector_pressed
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#E6E6E6"></solid>
<corners android:radius ="10dp" />
</shape>
Is there a way receive same result as we go for example using listselector in listView (in listview when I select the listitem only background color changed but border stayed unchanged).
Put the whole thing in another parent layout that handles the drawing of the border, like this:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="your background 9-patch or shape of the border"
android:padding="some padding value so the border looks ok">
< Your RelativeLayout without the border stuff >
</FrameLayout>