Develop Reference

ratingbar with custom images

Is it possible to create a custom rating bar like this?
If yes, can you give me an example on how to do it?
Thanks in advance!

Great tutorial here.
I will copy important parts in this answer in case the link will be invalid.
First you should create a style which extends the original RatingBar
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="foodRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/food_ratingbar_full</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>
</resources>
Then you need to provide 3 drawables, why? Because you should fill the 3 cases: empty, 50% and full.
This file will be food_ratingbar_full.xml
> Here’s an example of a filled rating (cookie):
<!-- 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/cookie" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/cookie" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/cookie" />
<item android:drawable="#drawable/cookie" />
</selector>
I just use one image for all states (and it actually looks decent),
but as you can see from the selector, there are four different states
possible (#drawable/cookie is finally an actuall cookie png image).
And the cool thing here is that RatingBar component will automatically
fill in part of the cookie when needed based only on “full” and
“empty” images (if you support half ratings, as in my example image).
Then to use your style you should just add style attribute in RatingBar XML.
style="#style/foodRatingBar
The point is: you should create a custom style if you want.
Then you could use setRotation to rotate it.
Sets the degrees that the view is rotated around the pivot point. Increasing values result in clockwise rotation.

EDIT: This is not an appropriate answer, as OP wanted to customize RatingBar. But it is still a solution.
It is possible. You just have to put each one of the five image resources in your project and then, make a layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="60dp"
android:layout_height="match_parent"
android:background="#android:color/black"
android:gravity="left"
android:orientation="vertical"
android:weightSum="5" >
<ImageView
android:id="#+id/oneStar"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/twoStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
<ImageView
android:id="#+id/threeStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
<ImageView
android:id="#+id/fourStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
<ImageView
android:id="#+id/fiveStars"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:visibility="visible" />
Put your resources as source of your ImageViews. That should be a start for you :D

Refrencing a selector drawable from a style results blank imagebutton

I want to have a ImageButtons changing the image based on its state. (same as "like" button in nine gag and facebook apps).
I have defined a style for each of them that references a selector as a drawable but when I run the program, images doesn't appear. Can you tell me what's wrong with this approach? (sorry for my bad English)
comment_actions_style in values folder:
<style name="LikeStyle">
<item name="android:src">#drawable/like</item>
</style>
<style name="DislikeStyle">
<item name="android:src">#drawable/dislike_normal</item>
</style>
<style name="ReplyStyle">
<item name="android:src">#drawable/reply_normal</item>
</style>
<style name="ShareStyle">
<item name="android:src">#drawable/share</item>
</style>
</resources>
and like drawable in drawable folder: (other buttons are the same)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/like_clicked" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/like_focused" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="#drawable/like_normal"/>
<!-- default -->
</selector>
EDIT:
I forgot to mention, I have a list view that its items are user comments and comments have buttons described above.
here is my items layout (part of it)
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" />
</LinearLayout>
and comment_actions layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/comment_action"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="5dip">
<ImageButton
android:id="#+id/comment_action_img"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#android:color/transparent"
/>
<TextView
android:id="#+id/comment_action_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/comment_action_img"
android:gravity="center"
android:layout_marginLeft="5dip"/>
</RelativeLayout>
These buttons also inherit from a layout if that's matter.

Here, your are setting style for comment_actions layout, and it is a Relative Layout, which won't be abled to response to your "android:src" attribute.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" /> <!--here,you are setting a style for the RelativeLayout -->
</LinearLayout>

A certain png image disappeared from layout

i have a layout xml which has 16 image button.
one png image which is declared in that layout does not show in activity.(only android 2.2 / 2.3)
when i add dummy image in drawable, strangely enough, previous image will be gone.
(when two dummy image, two before image will be gone...)
in eclipse graphical layout, i can see the image of disappeared on android phone.
i already checked R file has a declaration of disappeared image.
Does anyone know about what's going on about this issue?
i would appreciate your support.
For example in code following...
ImageButton which tag is 3 is not showing on screen, not even clickable.
but when i add dummy button such as button_999, that actually not used in app, then the ImageButton with tag 2 is disappeared and ImageButton with tag 3 is showing this time.
if i add one more dummy button like button_998, then ImageButton with tag1 will disappear.
here is the style
<style name="layoutStyle">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:orientation">horizontal</item>
<item name="android:layout_marginRight">3dip</item>
<item name="android:layout_marginLeft">3dip</item>
<item name="android:baselineAligned">false</item>
</style>
<style name="buttonStyle">
<item name="android:layout_width">0dip</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:background">#00000000</item>
<item name="android:scaleType">centerInside</item>
<item name="android:padding">2dip</item>
<item name="android:onClick">onClick</item>
</style>
and layout file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
style="#style/layoutStyle"
android:layout_marginTop="8dip">
<ImageButton
style="#style/buttonStyle"
android:tag="1"
android:contentDescription="#string/contentDescription"
android:src="#drawable/button_selector_1"/>
<ImageButton
style="#style/buttonStyle"
android:tag="2"
android:contentDescription="#string/contentDescription"
android:src="#drawable/button_selector_2"/>
<ImageButton
style="#style/buttonStyle"
android:tag="3"
android:contentDescription="#string/contentDescription"
android:src="#drawable/button_selector_3"/>
<LinearLayout
style="#style/layoutStyle"
android:layout_marginTop="8dip">
<ImageButton
style="#style/buttonStyle"
android:tag="4"
android:contentDescription="#string/contentDescription"
android:src="#drawable/button_selector_5"/>
<ImageButton
style="#style/buttonStyle"
android:tag="5"
android:contentDescription="#string/contentDescription"
android:src="#drawable/button_selector_4"/>
<ImageButton
style="#style/buttonStyle"
android:tag="6"
android:contentDescription="#string/contentDescription"
android:src="#drawable/button_selector_6"/>
…… and so on(total 6 child layout)
</LinearLayout>

Clean up the project and try again

By Which code you assigned the image for the Buttons?
Are you assigning dynamically or static images?
If you are using static images means, store the images in the Drawable folder and clean-up the project.
then assign the image for each button as follow...
<Button
android:id="#+id/button1"
android:layout_width="wrapcontent"
android:layout_height="wrapcontent"
android:background="#drawable/img1"
android:text="Button" />

Setting table layout in the Android

I tried to make table layout like this in the Android.
First column - 2 buttons, next column one button in second row. The size of the buttons should be the same. I use 0 width and weight 1 and stretch the columns.
In the XML:
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:stretchColumns="*" >
<TableRow>
<Button
android:id="#+id/button_stereo_system_state"
style="#style/StyleButton"
android:background="#drawable/background_button_off"
android:drawableTop="#drawable/icon_button_on_off"
android:text="#string/button_text_option_off" />
<Button
android:id="#+id/button_stereo_system_radio"
style="#style/StyleButton"
android:background="#drawable/background_button_off"
android:drawableTop="#drawable/icon_button_play"
android:text="#string/button_text_play_radio" />
</TableRow>
<TableRow>
<Button
android:id="#+id/button_stereo_system_cd"
style="#style/StyleButton"
android:layout_column="0"
android:background="#drawable/background_button_off"
android:drawableTop="#drawable/icon_button_play"
android:text="#string/button_text_play_cd" />
</TableRow>
</TableLayout>
In the style:
<style name="StyleButton">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_margin">10dip</item>
<item name="android:textSize">19sp</item>
<item name="android:textColor">#color/color_text_button</item>
</style>
With this source code in second row button is stretched and takes the whole row. How to make this?

One solution (as you speculate in your comment) is to add another button the same as the rest and set the visibility to invisible. (See docs here).
Basically simply add the following line to your XML:
android:visibility="invisible"

Android: Theme.Dialog layout - dynamically visible content being cut-off

I have a 'dialog' Activity based on the built-in Android theme Theme.Dialog:
<style name="Theme.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowTitleStyle">#android:style/DialogWindowTitle</item>
<item name="android:windowBackground">#android:drawable/panel_background</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="textAppearance">#android:style/TextAppearance</item>
<item name="textAppearanceInverse">#android:style/TextAppearance.Inverse</item>
<item name="textColorPrimary">#android:color/primary_text_dark</item>
<item name="textColorSecondary">#android:color/secondary_text_dark</item>
<item name="textColorTertiary">#android:color/tertiary_text_dark</item>
<item name="textColorPrimaryInverse">#android:color/primary_text_light</item>
<item name="textColorSecondaryInverse">#android:color/secondary_text_light</item>
<item name="textColorTertiaryInverse">#android:color/tertiary_text_light</item>
<item name="textColorPrimaryDisableOnly">#android:color/primary_text_dark_disable_only</item>
<item name="textColorPrimaryInverseDisableOnly">#android:color/primary_text_light_disable_only</item>
<item name="textColorPrimaryNoDisable">#android:color/primary_text_dark_nodisable</item>
<item name="textColorSecondaryNoDisable">#android:color/secondary_text_dark_nodisable</item>
<item name="textColorPrimaryInverseNoDisable">#android:color/primary_text_light_nodisable</item>
<item name="textColorSecondaryInverseNoDisable">#android:color/secondary_text_light_nodisable</item>
<item name="textColorHint">#android:color/hint_foreground_dark</item>
<item name="textColorHintInverse">#android:color/hint_foreground_light</item>
<item name="textColorSearchUrl">#android:color/search_url_text</item>
<item name="textAppearanceLarge">#android:style/TextAppearance.Large</item>
<item name="textAppearanceMedium">#android:style/TextAppearance.Medium</item>
<item name="textAppearanceSmall">#android:style/TextAppearance.Small</item>
<item name="textAppearanceLargeInverse">#android:style/TextAppearance.Large.Inverse</item>
<item name="textAppearanceMediumInverse">#android:style/TextAppearance.Medium.Inverse</item>
<item name="textAppearanceSmallInverse">#android:style/TextAppearance.Small.Inverse</item>
</style>
My layout for the Activity, I have a single EditText, a single Button and an invisible TextView I use to display messages to the user based on the validity of the EditText content:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp">
<TextView
style="#style/DialogMessage"
android:id="#+id/error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:visiblity="gone" />
<EditText
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLength="100"
android:maxLines="1"
android:ems="20"
android:scrollHorizontally="true" />
<Button
android:id="#+id/rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
When the user is in portrait mode, and they enter some 'bad' text in the EditText, I make the TextView visible, and populate it with an appropriate error message. This works fine, as everything shifts down, and the TextView is displayed great, even if the content spans multiple lines. Now, in landscape, when I do the same, the TextView displays fine, but the bottom element (in this case the Button) is compressed to about half it's normal height. Moving the elements around, if I put the EditText at the bottom, when the TextView is made visible, it too is compressed, and puttint the TextView at the bottom results in anything more than a single line of text being cut off.
I have tried forcing the issue after the TextView is populated by re-setting the sizes of the LinearLayout via:
LinearLayout dialog = (LinearLayout) findViewById(R.id.dialog);
dialog.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
And I have tried re-drawing the LinearLayout after the TextView is populated by calling:
LinearLayout dialog = (LinearLayout) findViewById(R.id.dialog);
dialog.invalidate();
Neither worked. Any ideas what is going on here?
Thanks,
Paul
Edit:
There is ample screen real-estate to show all three components fully... as a fully inflated TextView with the same content as I am dynamically inflating, and everything displayed fully.

Didn't figure out why this was happening, but figured out a work-around. Switching the layout to a RelativeLayout solved the issue, and everything is now displayed properly using the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp">
<EditText
android:id="#+id/inpt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLength="100"
android:maxLines="1"
android:ems="20"
android:scrollHorizontally="true" />
<Button
android:id="#+id/btn_rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/inpt_title"
android:layout_below="#id/inpt_title" />
<TextView
style="#style/DialogMessage"
android:id="#+id/error"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#id/btn_rename"
android:layout_alignLeft="#id/inpt_title"
android:layout_alignRight="#id/inpt_title" />
</RelativeLayout>