This is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/white_small_down_arrow_v4" android:state_pressed="true"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" android:state_focused="false"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" /> <!-- default -->
</selector>
This is how I applied it on ImageView:
<ImageView
android:id="#+id/change_city_small_down_ImageView"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/changeCityRelativeLayout"
android:layout_marginLeft="5dp"
android:background="#drawable/change_city_selector"
</ImageView>
Now, the problem is, when I pressed the ImageView, the according state drawable image does not change. I have tried it on other wigdet, also not work. I can't figure out why, becasue I used to do this the same way, and it works.
I have monitored imageview states when it been clicked.
v.hasFocus() : false , v.isClickable() : true , v.isInTouchMode() :true , v.isEnabled() : true , v.isPressed() : true
I made a terrible mistake, the white_small_down_arrow_v4 and white_small_up_arrow_v4 actually pointing the same direction, in other words, they are same picture.
so, probably my mistake will help someone else if they found selector does not work, and first thing to do is to check if the state drawables are the same....
Try this: use image android:src="#drawable/change_city_selector" instead of android:background="#drawable/change_city_selector"
<ImageView
android:id="#+id/change_city_small_down_ImageView"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/changeCityRelativeLayout"
android:layout_marginLeft="5dp"
android:src="#drawable/change_city_selector"
</ImageView>
Try adding android:focusable="true" and android:focusableintouchmode="true" in your ImageView property.
You need to set clickable to true in ImageView
android:clickable="true"
change you selection to this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/white_small_down_arrow_v4" android:state_pressed="true"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" android:state_focused="true"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" /> <!-- default -->
</selector>
both of them should be true
Try this, it's checked on Android 4.4.2 and 5.1:
/drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="#color/item_pressed"/>
</item>
<item>
<color android:color="#android:color/transparent"/>
</item>
</selector>
/layout
<ImageView
android:id="#+id/ivOpenFile"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="8dp"
android:layout_alignParentRight="true"
android:padding="4dp"
android:background="#drawable/selector_settings_item"
android:clickable="true"
android:focusableInTouchMode="true"
android:visibility="invisible"
/>
/java
ivOpenFile = (ImageView) rootView.findViewById(R.id.ivOpenFile);
ivOpenFile.setImageDrawable(VectorDrawableCompat.create(
getResources(),
R.drawable.vd_action_files_black,
null));
Make sure that your selector actually has state_selected instead of state_checked the later will not work
your_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_heart_selected" android:state_selected="true" />
<item android:drawable="#drawable/ic_heart_unselected" android:state_selected="false" />
</selector>
if you have state_checked instead of state_selected, ImageView will never work.
Related
I am using a drawable to change the background and text of textViews inside of my navigation drawer. I would like to keep the background white for the text area, but by testing keeping the background white does not show the ripple effect on the background, instead it does it to the text making the text gray. In the picture below, the middle one is being pressed causing the ripple effect.
Here are my drawable files that are used to make the changes in colors
Background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/selected" android:state_activated="true" />
<item android:drawable="#color/white" />
</selector>
Text:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primary" android:state_activated="true" />
<item android:color="#color/primary_text" />
</selector>
textView layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25.0sp"
android:background="#drawable/activated_background"
android:textColor="#drawable/activated_text"
android:id="#id/text1"
android:layout_weight="0"
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip" />
</RelativeLayout>
you should use 2 drawable files and use it as your view background.
for pre-lolipop versions:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white_list_item_selected_background" android:state_pressed="true" />
<item android:drawable="#android:color/white" />
</selector>
for lolipop (v21):
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/white_list_item_selected_background" >
<item android:drawable="#android:color/white" />
</ripple>
If you use custom background, ripple effect will not be shown. You may have to use other ripple library such as Material Ripple.
In my case ripple effect is working after the first click, but for first click it didn't work for me. Have changed the background selector file with android:state_activated="true" and in main.xml android:clickable="true" then it's work fine for all time.
selector.xml (under res\drawable\selector.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="#drawable/card_bg_pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:state_activated="true" android:drawable="#drawable/card_bg_focused" android:state_enabled="true" android:state_focused="true"/>
<item android:state_activated="true" android:drawable="#drawable/card_bg_selected" android:state_enabled="false" android:state_selected="true"/>
</selector>
In activity_main.xml
<com.mysample.RecyclingImageView
android:id="#+id/imageview_overlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/selector"
android:clickable="true" />
I am using selector for imageView to change image on press event.
but it is not changing image when I press on it.
Here is selector,
<?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/fed_1" />
<item
android:drawable="#drawable/fed" />
</selector>
And this is my imageview,
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:src="#drawable/sel_fed" />
Also tried using background for image view but it's not working.
you should add android:clickable="true". Your imageView will be like this
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:clickable="true"
android:src="#drawable/sel_fed" />
change your src to background and add android:clickable="true" to your ImageView
You can try this selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/fed_1" android:state_selected="true"></item>
<item android:drawable="#drawable/fed_1" android:state_pressed="true"></item>
<item android:drawable="#drawable/fed"></item>
</selector>
Change src to background in your image view.
android:background="#drawable/sel_fed"
Is it possible to define state list for compound drawables in Android?
This is my button in layout xml:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_top"
android:text="#string/button_text" />
This is my drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="#drawable/btn_top_enabled" />
<item android:drawable="#drawable/btn_top_disabled" />
</selector>
This works for background, but its not working for drawableTop. The first state is always displayed. Is this even possible in Android, and if so am I missing something?
look ad TextView.java source code and you will see that yes, you can use StateListDrawable as a compound Drawable that displays according to TextView state
Try:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="#drawable/btn_top_enabled" />
<item android:state_activated="true" android:drawable="#drawable/btn_top_enabled" />
<item android:drawable="#drawable/btn_top_disabled" />
</selector>
And
button.setActivated(true);
This is my problem: I have an ImageView and I assign a selector to it, so the image have to change when I touch it. The problem is that the image doesn't change.
The selector has a different name than the image sources, so that is not a problem. When I touch the image, the app does an http call, so I think that there is the problem, but I don't know how to solve this.
Selector xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/pat_login_button_pressed"
android:state_selected="true" />
<item android:drawable="#drawable/pat_login_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/pat_login_button"
android:state_selected="false" />
</selector>
ImageView xml:
<ImageView
android:id="#+id/login_button"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:src="#drawable/pat_login_button_selector" />
I customized the Toggle button by using a drawable defined by using a selector. I use this drawable as background for the Toggle button.
<ToggleButton
android:id="#+id/mailbox:toggle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="#drawable/toggle_background"
android:gravity="center_horizontal|center_vertical" />
The toggle_background is defined here:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img1"
android:state_checked="true" />
<item
android:drawable="#drawable/img2"
android:state_checked="false" />
</selector>
The problem is that the image is always stretched. Is there a way to define an image for the two states that is not stretched?
What I need is a background that will be stretched and in the center of the button an icon that must not be stretched.
Is it possible?
This is my final solution.
In the layout:
<ToggleButton
android:id="#+id/mailbox:toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/toggle_drawable_layers"/>
in the toggle_drawable_layers.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/toggle_drawable_bkg"></item>
<item android:left="10dp" android:drawable="#drawable/toggle_drawable_left"
android:gravity="center_vertical|center_horizontal" />
</layer-list>
in the toggle_drawable_left.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<bitmap android:src="#drawable/bitmap_checked"
android:gravity="center_vertical|center_horizontal" />
</item>
<item android:state_checked="false">
<bitmap android:src="#drawable/bitmap_unchecked"
android:gravity="center_vertical|center_horizontal" />
</item>
</selector>
I did the same task this way, the button:
<ToggleButton android:id="#+id/mlAbout"
android:textOn="#string/about"
android:textOff="#string/about"
android:background="#drawable/ml_about" />
#drawable/ml_about:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/list_bg_top"></item>
<item android:left="10dp">
<bitmap android:src="#drawable/waiting_status_btn"
android:gravity="center_vertical|left" />
</item>
</layer-list>
#drawable/list_bg_top background image that will be stretched and #drawable/waiting_status_btn is the icon the will not be stretched with the widget
Just use bitmaps instead of drawables in your selector like so (no need to use layers):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img1"
android:state_checked="true" />
<item
android:drawable="#drawable/img2"
android:state_checked="false" />
</selector>
Also, don't forget to declare
android:textOff=""
android:textOn=""
in your ToggleButton declaration
There is another way to overcome the issue of stretching:
Just convert the image into a Nine-Patch image, where the stretchable areas are just on all sides of the image.
Then Android will stretch the image only in invisible areas, and keep the visible image unchanged.