Develop Reference

Clickable icon on image

I want to add a clickable “favorite icon ❤️“ on the top of the ImageView for an Android project. I found similar to this in Zillow application as in the attached image. Any help please?
image from Zillow

use checkbox for this, use 2 icon one is favorite (full heart) and the other is an unfavourite icon(heart with the only border) and set In the selector
set selector file in android:button property in the check box
<androidx.appcompat.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/selector_checkbox"/>
Here is the selector file,
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/checkbox_favorite" />
<item
android:state_checked="false"
android:drawable="#drawable/checkbox_unfavourite" />
</selector>

Follow this code ,
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="center"// your scale image on your need!
android:src="your_image" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_baseline_favorite_24"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:clickable="true"// doesnt need just hard code like setOnClick...
android:layout_alignParentEnd="true"
android:layout_margin="16dp"/>
</RelativeLayout>

ImageView is not highlighting on click

I am designing an app for multiple devices.In that I am using a imageview and using selector i am setting the background image depends on the state.I works fine for all the devices except only one 10 inch device.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true" >
<LinearLayout
android:layout_width="145dp"
android:layout_height="239dp"
android:layout_marginRight="6dp"
android:background="#drawable/common_selector_thumbnail_shadow_title_background"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<FrameLayout
android:layout_width="130dp"
android:layout_height="186dp"
android:layout_marginTop="5dp"
android:background="#color/RGB_100_215_216_217" >
<ImageView
android:id="#+id/seasonal_favorites_default_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="#drawable/tw_noitem_movie" />
</FrameLayout>
<TextView
android:id="#+id/seasonal_favorites_list_text"
android:layout_width="140dp"
android:layout_height="43dp"
android:duplicateParentState="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:singleLine="true"
android:textColor="#drawable/common_selector_thumbnail_shadow_title_textcolor"
android:textSize="18dp" />
</LinearLayout>
</FrameLayout>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumbnail_title_bg_focus" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/thumbnail_title_bg_focus" android:state_pressed="true"/>
<item android:drawable="#drawable/thumbnail_title_bg_focus" android:state_focused="true"/>
<item android:drawable="#drawable/thumbnail_title_bg"/>
</selector>
Thanks in advance.

Probabilly you have to put in your manifest file: hardwareAccelerated="true"
Try that and let me know if it worked!

Use ImageButton there are two methods setBackgroundResource, setImageResource to set resources for button(which one will be pressed) and for image itself

You need to add android:clickable="true" to the LinearLayout or set a OnClickListener there. Otherwise your selector background does not get activated.

Use ImageButton instead of ImageView to get the selector work.

If you can provide the different states of the image then see this
post
Otherwise...
Use a LayerDrawable for the image source. One layer is the actual image, the other layer is a state list selector.
LayerDrawable d = new LayerDrawable(new Drawable[]{getResources().getDrawable(R.drawable.my_image), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);
Or you can define a layer drawable XML resource and use that in your layout XML.

Android: TextView doesn't get focusable

I'm not able to figure out a really stupid issue about TextView!!
I have a simple Layout with a Button and a TextView. This is the Layout:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:focusable="true"
android:clickable="true"
android:text="TextView1"
android:textAppearance="?android:attr/textAppearanceMedium"/>
When the Button has focus and i press the "down arrow" in Emulator the TextView doesn't get the focus (it doesn't turn blue!!) Why? Please help me!!

Despite the TextView doesn't turn blue, it is getting focus.
To see the focus/unfocus happening, you can, for instance, define a color change in the text. This way, these events are perceptive to the user.
Create a .xml file and put into /res/color/
In my case, i named the file as "color_text_view.xml".
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="#00FF00"/>
<item android:color="#FF00FF"/>
</selector>
And add the android:textColor="#color/color_text_view" to the textview.
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:focusable="true"
android:clickable="true"
android:text="TextView1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/color_text_view"/>
Hope this help!

see If you want to set your Text as focus able then your code is true. your text are in focus mode but color cant' be change .
if you change color then it will set directly because you had set focus able in XML. so when app launch TextView is already in focused mode so that color will be change.

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.