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;
}
}
});
Related
I've got a custom drawable for my toggle switch
// toggle_selector.xlm
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/toggle_on" android:state_checked="true"/>
<item android:drawable="#drawable/toggle_off" android:state_checked="false"/>
</selector>
Which I then apply to the switch
<Switch
android:id="#+id/geoLocationsToggle"
android:background="#drawable/toggle_selector"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textOff=""
android:textOn=""
android:textSize="0dp" />
But the original (stock) toggle still shows overtop the custom background
How do I get rid of the stock switch on top of my custom one?
Thanks in advance.
You should use android:thumb and android:track, not android:background
And you should write a selector for each one of them.
I followed steps on other places, and I made an xml file like so:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/yeah2"
android:state_pressed="true" />
<item android:drawable="#drawable/yeah" />
My activity xml for my button looks like this:
<ImageButton
android:layout_width="150dp"
android:layout_height="wrap_content"
android:id="#+id/imageButton"
android:onClick="play1"
android:layout_below="#+id/textView"
android:layout_alignParentStart="true"
android:layout_marginTop="100dp"
android:src="#drawable/yeah"
android:clickable="false"
android:nestedScrollingEnabled="true"
android:background="#drawable/highlight" />
How to assign highlighted state image to an Android Image Button ?
make xml like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Remember: order is important. First matching state(s) is rendered) -->
<item
android:state_selected="true"
android:drawable="#drawable/yeah" />
<item
android:drawable="#drawable/yeah2" />
Then in Java do following
imageButton.setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable.ImageButton));
//set the click listener
imageButton.setOnClickListener(new OnClickListener() {
public void onClick(View button) {
//Set the button's appearance
button.setSelected(!button.isSelected());
if (button.isSelected()) {
//Handle selected state change
} else {
//Handle de-select state change
}
}
});
I would like to simply have the "tick" without the square. Also only as ImageView would be fine. Anyone knows the name of the resource in Android?
Just set selector to drawable left to Checkbox in whatever shape you desire.
Do like this.
<CheckBox
android:id="#+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:drawableLeft="#drawable/checkImageSelector" />
android:button="#null" will remove the default image of square with tick and drawableLeft will place your image in place of that.
checkImageSelector.xml will be like this.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/check" android:state_selected="true"/>
<item android:drawable="#drawable/unchecked"/>
</selector>
You need two images for checked and unchecked state.
Create a selector with same resources :
checkbox_selector.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/checked_image" android:state_checked="true"/>
<item android:drawable="#drawable/unchecked_image"/>
</selector>
Then set this selector as button :
<CheckBox
android:id="#+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_selector" />
Activity:
CheckBox.setButtonDrawable((int)getResources().getColor(R.color.transparent));
Fragment:
CheckBox.setButtonDrawable((int)getActivity.getResources().getColor(R.color.transparent));
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>
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.