Change background using selector in android - android

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

Related

Changing ImageButton's background programmatically

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"));

How can add imagebutton click effect?

I am working with android. I want to add onClick() effect on ImageButton preferably a color around the sides of the button after selected. I had tried with alpha effect.But It looks dark even after get back after click.
How can add ImageButton click effect?
you can use a selector xml like as follows :-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_pressed_yellow"
android:state_pressed="true" />
<item android:drawable="#drawable/button_focused_orange"
android:state_focused="true" />
<item android:drawable="#drawable/button_normal_green" />
</selector>
and set it as a background of your Button.

Button not changing its image state to "pressed"

I am trying to do a simple selector.
Here is my selector xml code, its called "butt.xml":
<?xml version="1.0" encoding="utf-8"?>
<item android:drawable="#drawable/btn_activate_on" android:state_pressed="true"/>
<item android:drawable="#drawable/btn_activate_off" android:state_pressed="false"/> <!-- default -->
thats the layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageButton
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="42dp"
android:src="#drawable/butt" />
and thats the code:
ImageButton ib;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ib = (ImageButton) findViewById(R.id.imageView1);
ib.setOnClickListener(this);
}
#Override
public void onClick(View v) {
ib.setSelected(true);
}
My problem is that the state is not changing, when i press and hold on the button. It is changing its image to the "selected" one when I pressed. But when I release my finger, it is getting back to the "not sellected" state.
Why is that so? How can I make it stay in "Selected" mode?
No need to use selector if you need to show a button's state as selected or non-selected.
Instead you have to setBackground() using code and by managing a flag you can check that your button is currently selected or not.
Like
if(flag)
btn.setDrawableBackground(R.id.btn_activate_on)
else
btn.setDrawableBackground(R.id.btn_activate_off)
If you want to show the effect on state press create Two selectors with opposite states.
<item android:state_pressed="true"
android:drawable="#drawable/btn_activate_on"></item>
<item android:drawable="#drawable/btn_activate_off"></item>
and another one is
<item android:state_pressed="true"
android:drawable="#drawable/btn_activate_off"></item>
<item android:drawable="#drawable/btn_activate_on"></item>
Use this in your selector butt.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_activate_on" android:state_pressed="true"/>
<item android:drawable="#drawable/btn_activate_off"/>
</selector>
Also yuo can remove this line ib.setSelected(true); from your onClick(). It will be taken care off.
UPDATE
<ImageButton
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="42dp"
android:background="#drawable/butt" />
You need to set the background instead of setting the src.
A button shouldn't be used for toggling like that - use a checkbox instead.
"Selected" for a button means that the user currently has their finger down on the button, so when the user lifts their finger it won't be selected anymore.

Toggle button using two image on different state

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;
}
}
});

textview background color is not changing on click in popupwindow

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.

Categories

Resources