Develop Reference

Issue styling Rating bar

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.

Custom checkbox image - but can still see original?

I was using the standard Android checkbox, but when I installed my app on other peoples phones for testing, the checkbox was different on each phone.
On one of the phones, the checkbox was so light you could hardly see the box when it was checked.
So I tried to make a custom checkbox checked image.
This worked ok, but I can still see the original deafult checkbox image in the background?
Any ideas why?
Here is my checkable linear layout, to be honest I'm not even sure if I need this?
<?xml version="1.0" encoding="utf-8"?>
<com.myapp.myappname.CheckableLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox"
android:background="#drawable/customcheckbox"/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</com.myapp.myappname.CheckableLinearLayout>
Then I have a custom list row which is my custom ListView:
<?xml version="1.0" encoding="utf-8"?>
<com.myapp.myappname.CheckableLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dip" >
<!-- Thumbnail image -->
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/list_image"
android:layout_width="60dip"
android:layout_height="60dip"
android:focusable="false"
/>
</LinearLayout>
<!-- File Name -->
<TextView
android:id="#+id/filename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:textColor="#343434"
android:textSize="12dip"
android:layout_marginTop="10dip"
android:layout_toRightOf="#+id/thumbnail"
android:focusable="false"
android:text="Some Text." />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentRight="true"
android:background="#drawable/customcheckbox"
android:enabled="false" />
</RelativeLayout>
</com.myapp.myappname.CheckableLinearLayout>
Any ideas how to suppress the original?
Custom checkbox:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item android:state_checked="false" android:drawable="#drawable/unchecked" />-->
<item android:state_checked="true" android:drawable="#drawable/checked" />
<!--<item android:drawable="#drawable/unchecked" /> <!– default –>-->
</selector>

The attribute you want to change is button, not background.
First, design your custom graphics for different button states. Use a state list drawable (docs) to associate the various images. For example:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checked" />
<item android:state_checked="false" android:drawable="#drawable/unchecked" />
</selector>
Save this into your drawable resources folder, something like my_checkbox.xml.
Now, use the button attribute on your checkbox layout definition:
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentRight="true"
android:button="#drawable/my_checkbox"
android:enabled="false" />

set background color in imagebutton on click

Here is my file. I want to change the background color of my image button when it is clicked so the user can see it is clicked because when I clicked it does not seem I clicked it but it is working. I can see on other questions that you need a drawable to be able to do it but i do not know what will I put in the xml file in the drawable folder. Can you please help me? Thank you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/webViewHeaderArea"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<ImageButton
android:id="#+id/btnCloseWebView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="false"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/close"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnReload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btnCloseWebView"
android:src="#drawable/reload"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:src="#drawable/back"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:layout_toRightOf="#+id/btnBack"
android:src="#drawable/stop"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_toRightOf="#+id/btnStop"
android:src="#drawable/forward"
android:background="#null"
android:contentDescription="#string/button" />
</RelativeLayout>
<WebView android:id="#+id/web_engine"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />

you need to create one xml file in drawable folder named contact_bg.xml.
Then, in that you have to write like below.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/contact_hover" android:state_pressed="true"/>
<item android:drawable="#drawable/contact"/>
</selector>
set this as a image source in your image button.
and put two file in drawable-hdpi named contact.png and contact_hover.png
Hope, this will help

You can use selector for this. Either use drawable images or you can define your own shapes for each of the state. You can do some thing like this.
<item android:state_pressed="true" >
<shape>
<gradient
<!-- set values here -->
/>
<stroke
<!-- set values here -->
/>
<corners
<!-- set values here -->
/>
<padding
<!-- set values here -->
/>
</shape>
</item>
Also check out this link

ListView Item appear strange drawable

I have a poblem when custom progress bar. I create a animaiton drawable for progressbar. After I set this drawable for progressbar when dialog loading data show.
File anim_loading.xml
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/icon_loading"
android:pivotX="50%"
android:pivotY="50%" />
After I set this drawable for dialog loading data.
public void showProgressDialog(String content, boolean cancleable) {
progressDlg = ProgressDialog.show(this, "", content, true, true);
progressDlg.setIndeterminateDrawable(getResources().getDrawable(R.drawable.anim_loading));
progressDlg.setCancelable(cancleable);
progressDlg.setOnCancelListener(this);
}
But in android 2.2x or 2.3x Listview appear drawable icon_loading in row of data. I can't undestand .. :(
I attached two file (image). Correctly with android 4.0, and error with android 2.3 or 2.2
Layout row :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutRow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/menu_item_selector"
android:paddingBottom="4dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="4dp" >
<TextView
android:id="#+id/txtCode"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:textColor="#color/RED_COLOR"
android:textSize="25.0sp"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/layoutInfo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="3dip"
android:layout_toRightOf="#id/txtCode"
android:padding="1.0dip" >
<LinearLayout
android:id="#+id/llContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/txtName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#color/BLACK_COLOR"
android:textStyle="bold" />
<ImageView
android:id="#+id/ivFavorite"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:contentDescription="#string/app_name"
android:src="#drawable/icon_love_small" />
</LinearLayout>
<TextView
android:id="#+id/txtDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/llContent"
android:singleLine="true"
android:textColor="#color/BLACK_COLOR"
android:textSize="12.0sp"
android:textStyle="italic" />
</RelativeLayout>
</RelativeLayout>
Selector of row:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/SEA_BLUE" android:state_pressed="true"/>
<item android:drawable="#color/SEA_BLUE" android:state_focused="true"/>
<item android:drawable="#color/TRANSPARENT"/>
</selector>
Hope somebody help me find this bug.
Thanks so much!
p/s Sorry I hide content data in listview :)

This is a starnge problem. I just solved it but I can't explain the reason.
The point is at:
<item android:drawable="#color/TRANSPARENT"/>
You should not set the normal background of listview item to be transparent with android 2.3 or 2.2. Change the color and you will get correct result.

Android RelativeLayout Drawable Selector doesn't work

I have troubles making my RelativeLayout change background drawable on click. I made it clickable and focusable but this make nothing change. The background remains static to enables drawable. Thanks in advance.
<RelativeLayout
android:id="#+id/bttn_type_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="#drawable/day_bttn_bg_red"
android:clickable="true"
android:focusable="true"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<ImageView
android:id="#+id/bttn_type_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:contentDescription="#string/app_name"
android:src="#drawable/relationship" />
<TextView
android:id="#+id/bttn_type_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/bttn_type_iv"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp"
android:text="#string/type_bttn_txt"
android:textSize="#dimen/data_fill_bttn_txt_size"
android:textStyle="bold" />
</RelativeLayout>
Here is the selector xml in drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bttn_red_p_bg" android:state_enabled="false" android:state_pressed="true"></item>
<item android:drawable="#drawable/bttn_red_a_bg" android:state_enabled="true"></item>
</selector>