Develop Reference

Android - custom listview and highlight

I've tried a lot to get things working, but without any sort of success.
I have implemented a custom listview that displays 3 textviews, added the custom adapter of my hands and things work correctly, I've done the registerForContextMenu(View of listview) and when I press items displayed, it shows a perfect blue highlight around my item, and when I press it long the same happens and then it shows me the menu. Okay. Then I added a button inside my custom listview displaying one color if certain things happen, displaying another one viceversa. After I modified my custom adapter to include my button and setting the change-color logic, if I long press my items I have no more highlight around, but the context menu is preserved.
Why is this happening?
I tried a lot searching on Stack and Google, but every solution I found was not working with my app. I tried also to insert a custom selector, it works fine when I exclude the button from my listview design, I suppose the button is the culprit, but I can't find out a way to resolve this problem. I suppose is something related to the "background" - "drawable" of the button, but I am here to ask you some help.
Thanks in advance.
Some code if it can interest you:
listviewdesign.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_centerVertical="true"
android:gravity="center"
/>
<TextView
android:id="#+id/text2"
android:singleLine="false"
android:maxEms="8"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_toLeftOf="#+id/text3"
android:layout_toRightOf="#+id/text1"
android:layout_centerVertical="true"
android:gravity="center"
/>
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#+id/btn1"
/>
<Button
android:id="#+id/btn1"
android:layout_width="10px"
android:layout_height="10px"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp"
/>
</RelativeLayout>
mainactivitylayout.xml:
<LinearLayout ...>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#android:id/list"
(when I add selector: android:listSelector="#xml/myselector")
android:clickable="false"
/>
</LinearLayout>
And my selector for completeness:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
class="class of project">
<item android:state_pressed="true"
android:drawable="#drawable/pressed"/>
<item android:state_focused="true"
android:drawable="#drawable/focused"/>
<item android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/normal"/>
<item android:drawable="#drawable/normal"/>
</selector>
Where those drawable items are correctly setup such as:
<resources>
<drawable name="pressed">#FF00A5FF</drawable>
<drawable name="focused">#FF0000FF</drawable>
<drawable name="normal">#00000000</drawable>
</resources>
Thanks!

You need to place "myselector.xml" in drawable folder.
android:listSelector="#xml/myselector"
this line should be
android:listSelector="#drawable/myselector"

Making Custom RadioButton with image on center

I'm trying to my custom RadioButton that I trying to make to look like this:
So I did custom drawables that respond to the RadioButton status and used it as background. This is alright.
The problem is that I'm not been able to center the images that I set through the android:button atribute.
Here is how I'm trying to use it in my layout.
<RadioGroup
android:id="#+id/presenter_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="4dp"
android:gravity="center"
>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/cluster_centered"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_left"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_right"
android:button="#drawable/fire"
/>
</RadioGroup>
With this I'm getting this as result:
I've already tried to define a drawable that sets the gravity to center, but nothing changed. Here is the custom drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/cluster" android:gravity="center"/>
</item>
</selector>
So, how could I center the button images?
PS: I can't set each kind of button as background because it'll be dynamic in the future, so the only thing that could be in background is the blue shape.

My solution was to set android:button=#null, then set the image that I want into the android:drawableLeft attribute. So my RadioButton code is like this:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_left"
android:button="#null"
android:drawableLeft="#drawable/fire"
/>

"on center" solution is
...
<RadioButton>
...
android:button="#null"
android:foreground="#drawable/your_selector_for_center_drawable"
android:background="#drawable/your_selector_for_background_drawable"
android:foregroundGravity="center"

Changing background or foreground button color dynamically in android

Suppose I have a footer like the following in my app, defined in a XML file such as footer.xml:
<LinearLayout android:id="#+id/llfooter"
android:layout_weight="1" android:layout_width="fill_parent"
android:orientation="horizontal" android:layout_height="0dp"
android:visibility="visible" android:background="#drawable/fbg"
android:weightSum="5.0" android:gravity="center"
android:layout_margin="0dp">
<Button android:id="#+id/home" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/home" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/issue" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#android:drawable/ic_menu_send" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/browse" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#android:drawable/ic_menu_slideshow" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/search" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/search" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:layout_height="wrap_content" android:id="#+id/favorite"
android:background="#drawable/favorite" android:layout_width="wrap_content"
android:focusable="true"
android:clickable="true"
android:layout_weight="1"
android:textColor="#FFFFFF" android:padding="10px"></Button>
</LinearLayout>
Now, the problem is that home, issue, browse, etc. are PNG icons, and when I tap on them, user can't have feedback of touching, because they stay unchanged.
I would like to change background colour on pressing them (e.g. just a bit lighter). I know I can write down XML drawables () one per button, such as the following
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/bgalt" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/bgalt" />
<item android:drawable="#drawable/bgnorm" />
</selector>
.. but if I have 10 buttons (say, 5 for footer, 5 for header) I should create other 10 buttons with altered background (so more work with graph editor and .apk heavier because of more raster icons.. ).
Is there a way to create (even in java) a ligher color "onClick" and normal color "onRelease" instead, with only one icon per feature in resources?
Any suggestions?
Tnx in advance.
Gabo

Use an ImageButton, and set the android:src parameter to the button drawable with a transparent background, then set the android:background value to a selector drawable that changes color when selected for example.
That way you have a set of drawables for your icons and one drawable only for the background which changes according to the state of your button

you can get button bitmap in onTouch in the code and change color, but it's bad idea.
selector is best solution.

Setting imageView background issue with selector

I have a problem with setting the click event in a list view item.
This is how the list is shown in the default situation:
This is how it looks when I press the red image (the red turns to blue):
and this is when I press the list item:
As you can see, the red image turns to blue also, Even though I didn't pressed the button. What I want is that when I press the list item there is no change to the red image, and it remains the same.
I tried to add android:drawSelectorOnTop="true" to xml file in listview section, but it didn't work. I also tried to fix it with the selector parameters, still with no success.
I uploaded some code, the next sections are in different xml files, so don't get confused.
EDIT: I want to use the OS item list background color and not my own color with android:listSelector, because that one I've already do.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/blue" />
<item android:drawable="#color/red"/>
</selector>
-----------------------new file--------------------------------
<ListView android:id="#+id/list_theme"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#id/contbtn_themelist"
android:stackFromBottom="false"
android:transcriptMode="disabled"/>
-----------------------new file--------------------------------
<RelativeLayout android:id="#+id/edit_back"
android:layout_width="80dp"
android:layout_height="77dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:background="#drawable/edit_skin_selector2" >
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true" />
</RelativeLayout>
EDIT: row.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="5dip"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingTop="5dip" >
<ImageView
android:id="#+id/itemlist_checkedd"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/ic_checkitem" />
<ImageView
android:id="#+id/skinpreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/itemlist_checkedd"
android:scaleType="fitXY" />
<RelativeLayout android:id="#+id/edit_back"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/edit_skin_selector2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true" />
</RelativeLayout>
<ImageView
android:id="#+id/separator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="5dip"
android:layout_toLeftOf="#id/edit_back"
android:src="#drawable/separator" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="2dip"
android:layout_marginRight="15dip"
android:layout_toLeftOf="#id/separator"
android:layout_toRightOf="#id/skinpreview"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Any help will be great, Thanks.

I encountered this issue too, I solved it using the tecnique here:
http://android.cyrilmottier.com/?p=525
Look at the paragraph "Don't press everything!"

You should try using android:duplicateParentState="false" to indicate not to use the parent's drawable state for its child.
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true"
android:duplicateParentState="false"
/>
Update
Make your button's immediate parent non-clickable, i.e. add android:clickable="false" to it in row.xml and see if that fixes the problem. Now the click on item will not change the button state. But the click on button should still work I guess.
update
<ImageButton
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#android:drawable/ic_menu_edit"
android:scaleType="center"
android:background="#android:drawable/state_redblue_drawable"
android:padding=10dp
android:clickable="true"/>

I found this solution before.. I dont have the link, but you has to do this. Create a custom class for the linearlayout that contains your botton, then override the setPressed state to dont do anything;
public class UnpresseableLinearLayout extends LinearLayout
{
public UnpresseableLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public void setPressed(boolean pressed)
{
// Do nothing here. Specifically, do not propagate this message along
// to our children so they do not incorrectly display a pressed state
// just because one of their ancestors got pressed.
}
}
this will solve the problem because the android:duplicateParentState="false" will not work in this case.
Replace then your linearlayout in your xml with this one, that cannot receive press actions
Edit:
Sorry, i just saw that you are using RelativeLayout.. but i supose that is the same.

try making imageView clickable...
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true"
android:focussable="false"
android:focussableInTouchMode="false"
android:clickable="true" />
or..
change selector state to
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/blue" />
<item android:drawable="#color/red"/>
</selector>

Ok. First of all Sorry for the Late reply.
Before going on solution let see what i get from your question.
You want is, when you click on List-items then that red image not convert in to Blue and if user click on the Red Image then it should be convert in to the Red. But not with whole list-Items right ???
If is it so, then there is nothing to do more.
Don't put selector. Selector is basically for, whenever you want to change the color of the background while you click on that particular view.
And yes if you want to change the color of the RedImage while user click on it then again don't use selector there. But Just change the Color of that Image during run time.
As like:
#Override
public void onClick(View view) {
YOUR_VIEW.setBackgroundColor(0xffff0000);
}
Hope it will help you. If its not work as what you want then let me know.
i will like to help you.
Enjoy.:)

What are you using to connect the list a simpleAdapter. To accomplish what you are saying to will need a new class that extends BaseAdapter and change the background image on the getView event on that class.
Then on you main activity you can set an onlistItemClick to handle the click events for the list items.

How to remove button background color

I searched a lot but I didn't find how to remove the background color from the button which is appearing on the right and left side of button. Can anybody help?
My screen looks like
No matter what I try I am not able to remove the black portion.
Code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_base"
android:text="#string/base"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
<Button
android:id="#+id/btn_care"
android:text="#string/care"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_daily_prize"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/daily_prize" />
<Button
android:id="#+id/btn_winner"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/winner" />
</LinearLayout>
</LinearLayout>
#Drawable/selector_button
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="#drawable/pressed"> </item>
<item android:state_focused="true"
android:drawable="#drawable/focused"/>
<item android:drawable="#drawable/change"></item>
</selector>
this is the image used with name change.9.png

according to your scenario i can surely say that either you are not using a 9-patch image (an image with extension like .9.png ) or the 1 pixel borders of 9-patch at left and top are not drawn in correct manner. thats why the edges and the side border shade get expanded with the button with long width. either you should show what 9-patch button background you have used or try some correct 9-patch and check results for that.

Why don't you use some other control element like TextView instead of buttons? I just saw that TextView has onClickListner and so you can use it as sort-of button, though I have not done it; button is meant to aid you defining your layout, but as this seems to only be a problem for you, just do not use it).
By the way I seriously recommend you to use android styles, as you copy-paste a lot of attributes. If you use Eclipse for development, open your layout xml, select the item you want to extract the style of, press ctrl + 1 and then select extract style. That way you should avoid copy-pasting all these style attributes.

Try removing the android:textColor attribute. These can be misleading and sometimes alter the colour of more than just the text. If the text is supposed to be black then you don't need it.