I have image Button like below.
<ImageButton
android:id="#+id/imagebutton"
android:layout_width="250dp"
android:layout_height="100dp"
android:background="#drawable/perm_group_calendar"/>
perm_group_calendar.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/perm_group_calendar_selected" />
<item android:drawable="#drawable/perm_group_calendar_normal" />
</selector>
The selected state is not working by itself. I found answer from this SO
Android ImageButton with a selected state?
I used the below code. now it works.
imageButton.setOnClickListener(new OnClickListener() {
public void onClick(View button) {
if (button.isSelected()){
button.setSelected(false);
//...Handle toggle off
} else {
button.setSelected(true);
//...Handled toggle on
}
}
});
Why We have to toggle the selected state ?
Because the selected state isn't automatically shown by an ImageButton, which - normally (as opposed to artificially) - shows only the normal and pressed statuses (not sure about the focused state, but it should).
You could else use a custom ToggleButton (or a Switch or a CheckBox).
Anyway, your solution doesn't look that bad at all, to me.
i think you should do some thing as the following in your drawable XML file :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/aaaa" />
<item android:state_pressed="true" android:drawable="#drawable/aaaa"></item>
<item android:drawable="#drawable/ic_launcher" />
</selector>
and your ImageButton like the following :
<ImageButton
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#123456"
android:padding="10dp"
android:scaleType="fitXY"
android:src="#drawable/drawableFile" />
you should add the android:state_pressed="true" , and that should do the trick for the pressed state .
as RomianGuy mentioned in this answer :
state_selected is used when an item is selected using a keyboard/dpad/trackball/etc .
so i think thats why you have to toggle the state .
Hope That Helps .
Just a note. If you want to change icon AND color for ImageButton - you need 2 selectors - for 'android:src' and for 'android:src' :
<ImageButton
android:id="#+id/ibToFavorites"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center_vertical"
android:background="#null"
android:src="#drawable/selector_checkin_to_favourite"
android:tint="#color/selector_checkin_to_favourite"
android:layout_marginEnd="15dp" />
res/drawable/selector_checkin_to_favourite.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected = "true"
android:drawable="#drawable/ic_star_black_45dp"/>
<item
android:drawable="#drawable/ic_star_border_black_45dp"/>
</selector>
res/color/selector_checkin_to_favourite.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected = "true"
android:color="#color/colorAccent"/>
<item
android:color="#color/colorSecondary"/>
</selector>
Related
I have many buttons for my view. Each button has different image resource. I want to change the click and hover effect for each button like this:
Button 1
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn1_selector"
android:text="name"
/>
btn1_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn1"></item>
</selector>
Button 2
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn2_selector"
android:text="name"
/>
btn2_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn2"></item>
</selector>
// etc...
The problem is that I have to create many selectors for all buttons. But I just need to change the hover state for all of them with 1 image hover_btn.png. Is there any way to have a hover state by default without creating all selectors for all buttons?
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.
I am new to android and working with the following code, I am trying to set a default image button which when clicked switched to the on state till pressed again or tapped anywhere else on the screen such that the popup associated with the on state goes away.
Here's the code:
java code:
private void setOnclickListeners(View view){
ImageButton button = (ImageButton) view.findViewById(R.id.menu_button);
button.setOnClickListener(this);
}
I want to connect this code to the following so on and off states are triggered:
<ImageButton
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:paddingRight="8dp"
android:src="#drawable/menu_btn" />
Here's the menu_btn code for xml class :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/menu_on"/>
<item android:state_pressed="true" android:drawable="#drawable/menu_on" />
<item android:drawable="#drawable/menu_off" />
</selector>
Any clue how to go about it? Ant help appreciated. Thanks!justin
You may want to check ToggleButton (or any sub-class of Checkable) for your implementation and then setting its state to something like this,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/menu_off"/>
<item android:state_checked="true" android:drawable="#drawable/menu_on" />
<item android:drawable="#drawable/menu_off" />
</selector>
Then on your Java code, get an instance of your ToggleButton (or Checkable) and update the setChecked-method accordingly to your actions.
I need to make a toggle button using two image instead of ON/OFF state.
At off state i set a background image.But the OFF text can not removed while i use background image.
And i can not set another image on ON state by clicking the toggle button :(
I am new in android.
I hope you guys help me get out of this problem
Do this:
<ToggleButton
android:id="#+id/toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/check" <!--check.xml-->
android:layout_margin="10dp"
android:textOn=""
android:textOff=""
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_centerVertical="true"/>
create check.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/selected_image"
android:state_checked="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/unselected_image"
android:state_checked="false"/>
</selector>
AkashG's solution don't work for me. When I set up check.xml to background it's just stratched in vertical direction. To solve this problem you should set up check.xml to "android:button" property:
<ToggleButton
android:id="#+id/toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/check" //check.xml
android:background="#null"/>
check.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/selected_image"
android:state_checked="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/unselected_image"
android:state_checked="false"/>
</selector>
You can try something like this.
Here on click of image button I toggle the imageview.
holder.imgitem.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
if(!onclick){
mSparseBooleanArray.put((Integer) view.getTag(), true);
holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_delete_overlay_com);
onclick=true;}
else if(onclick)
{
mSparseBooleanArray.put((Integer) view.getTag(), false);
holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_selection_com);
onclick=false;
}
}
});
I want that in my android application, the ImageButton change its image when it is pressed and released, and when it is pressed released again, the image for ImageButton will be changed back , how to do that?
I have tried it with selector.
But it is not working.
Please anyone help me.
Thanks
make file in drawable folder a.xml ::
<?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/oneImage" />
<item
android:state_pressed="false"
android:drawable="#drawable/secondImage" />
</selector>
and in your main file :: button have implment following code ::
<ImageButton android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="anything"
android:id="#+id/first"
android:background="#drawable/a"
android:textColor="#FFFFFF"
android:textStyle="bold"
></ImageButton>
use the following 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/pressedImage"/>
<item
android:state_focused="true"
android:drawable="#drawable/normalImage"/>
<item android:drawable="#drawable/normalImage"/>
</selector>