I am using custom action bar in an Android app, which has custom ImageButtons on the right, with their onClick behaviour added programatically (see code snippet below).
XML source of the button
<ImageButton
android:id="#+id/btn_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btn_right_menu"
android:background="#null"
android:contentDescription="#string/image_description"
android:onClick="refresh"
android:padding="10dp"
android:src="#drawable/button_refresh" />
OnClickListener source
mRefreshButton = (ImageButton) findViewById(R.id.btn_refresh);
mRefreshButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
doSomething();
}
});
I would like to change the background color of my ImageButton programatically (without having to use additional graphics), so that the background would change when the user clicks on the button (after the click the background should go back to normal, i.e. transparent). How do I do that?
Use a selector for your ImageButton and set background from xml.
If you want to use Drawable Images:
<?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/pressed_bg" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/focused_bh" /> <!-- focused -->
<item android:drawable="#drawable/default_bg" /> <!-- default -->
</selector>
If you want to use just color:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#android:color/white" />
<item android:state_pressed="true" android:drawable="#android:color/white" />
<item android:drawable="#android:color/transparent" />
</selector>
The invalidate() method will force a redraw of any view:
Try using this:
mRefreshButton = (ImageButton) findViewById(R.id.btn_refresh);
mRefreshButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Drawable replacer = getResources().getDrawable(R.drawable.replacementGraphic);
mRefreshButton .setBackgroundDrawable(replacer);
mRefreshButton .invalidate();
}
});
See here for reference.
To change color you can use the following
Btn.setBackgroundColor(Color.BLUE);
To set back to transparent
Btn.setBackgroundColor(Color.parseColor("#000000"));
Related
I need to change the background color of layout background based on click events. so created one selector and set background for layout.
XML code: bg.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/bg_tabselect" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/bg_tabselect" /> <!-- focused -->
<item android:drawable="#drawable/bg_tabunselect" /> <!-- default -->
</selector>
Layout: layoutmain.xml
<RelativeLayout
android:id="#+id/layout"
android:background="#drawable/bg.xml">
<Textview.../>
<Textview.../>
</RelativeLayout>
Java : Main.java
RelativeLayout layout=(RelativeLayout)view.findviewbyid(R.id.layout);
layout.setonclicklisteners(this);
#Override
public void onClick(View v) {
switch (v.getId()){
case R.id.layout:
Toast.makeText(getActivity(),"Selectedone",Toast.LENGTH_SHORT).show();
break;
}
}
Problem:
1.when pressed on layout it working properly when remove press on layout again back to unselect color. How do solve this?
2. How to make first layout is default selection?
thanks in advance...
when remove press on layout again back to unselect color
It's because you have two other items defined in your selector. and when the layout is not selected it goes to the default item, which is:
<item android:drawable="#drawable/bg_tabunselect" /> <!-- default -->
and about the second question, if you want background changes after click and do not turn back the the bg_tabunselect you can do something like this:
just remove the selector from the layout:
<RelativeLayout
android:id="#+id/layout"
android:background="#drawable/bg_tabunselect">
<Textview.../>
<Textview.../>
</RelativeLayout>
and then in your onclickListener just change the backgournd:
RelativeLayout layout=(RelativeLayout)view.findviewbyid(R.id.layout);
layout.setonclicklisteners(this);
#Override
public void onClick(View v) {
switch (v.getId()){
case R.id.layout:
Toast.makeText(getActivity(),"Selectedone",Toast.LENGTH_SHORT).show();
layout.setBackground(R.drawable.bg_tabselect);
break;
}
}
try this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/bg_tabselect"/>
<item android:state_pressed="true" android:drawable="#drawable/bg_tabselect"/>
<item android:drawable="#drawable/bg_tabunselect"/>
</selector>
without
android:state_focused
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 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 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 am using PopUpwindow with textviews in it. Problem is When i click any of the textvies the background color is not changing though it is changing when the textview is focused but not on click.
After clicking i am dismissing the popupwindow , and if i don't dismiss the popupwindow then the background color changes according to the selector :
This is my textview background selector:
<item android:state_focused="true" android:drawable="#drawable/focused" />
<item android:state_pressed="true" android:drawable="#drawable/pressed" />
<item android:drawable="#drawable/priornone" /> <!-- default --> </selector>
in my popupwindow all i am doing is this :
TextView manage_list = (TextView)popupView.findViewById(R.id.manage_lists);
manage_list.setOnClickListener(new View.OnClickListener(){
public void onClick(View v)
{
Intent myIntent = new Intent(v.getContext(),ManageList.class);
popupWindow.dismiss();
startActivity(myIntent);
}});
layout file for popupwindow:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/pop_menu_bg"
android:orientation="vertical"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/manage_lists"
android:text="Manage lists"
android:background="#drawable/my_drawable"
>
</TextView>
</LinearLayout>
Its quite strange behaviour everything works well if i don't dismiss the popupwindow but if i dismiss the popupwindow on click textview background doesn't changes.
What am i doing Wrong? Any help will be appreciated.
You will use your TextView like Checkbox, isn't it?
Use a boolean flag to try this.
private boolean clicked = false;
// ...
mytextView.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v){
clicked = !clicked;
if(clicked){
mytextView.setBackgroundColor(yourcolorclicked);
}else{
mytextView.setBackgroundColor(yourcolorunclicked);
}
mytextView.invalidate();
}
});
I believe if you use the above code, you will be ok:
<?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/focused" />
<item android:state_pressed="true" android:drawable="#drawable/activated" />
<item android:drawable="#drawable/priornone" />
</selector>
You cannot define two different states in an item.
Hope that helps.
//you need to remove android:state_pressed="true" when android:state_focused="true" is also true.
<?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/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
refer here:
EDIT: you need to give your Linearlayout attribute as android:clickable="false"
Check if you have a naming conflict. In case none of your changes are showing up, the possibility of it not working because of some kind of a naming issue conflicting with an imported library could be your main problem.