I'm creating a rollover effect with regards to a button background and its text. I've been able to create the rollover effect for the background such that when button is in a pressed or focused state then the background is changed from black to yellow. Below is how I did this:
in my fragment:
btnLogin.setBackgroundResource(R.drawable.btn_login);
here's the background resource i.e. btn_login.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/btn_loginrollover" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/btn_loginrollover" /> <!-- focused -->
<item android:drawable="#drawable/btn_logindefault" /> <!-- default -->
</selector>
btn_logindeault.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#000000"/>
<corners
android:bottomRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
<gradient
android:startColor="#000000"
android:centerColor="#000000"
android:endColor="#FFFFFF"
android:angle="90"/>
</shape>
btn_loginrollover.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#FFCC00"/>
<corners
android:bottomRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
</shape>
I would like to do the same thing for the button text such that when the button is in a pressed or focused state then the text is changed from black to yellow.
the when the button is but with regards to it's text. Below is my unsuccessful attempt to do this using the setOnFocusChangeListener:
btnLogin.setOnFocusChangeListener(new OnFocusChangeListener() {
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
btnLogin.setTextColor(Color.BLACK);
} else {
btnLogin.setTextColor(Color.parseColor("#FFCC00"));
}
}
});
I also tried using the button's setOnTouchListener to monitor the event and the change the text color accordingly but this was also unsuccessful:
btnLogin.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (hasFocus) {
btnLogin.setTextColor(Color.BLACK);
} else {
btnLogin.setTextColor(Color.parseColor("#FFCC00"));
}
}
});
Any ideas as to how I could solve my issue?
Thanks.
hey try this code i have tested and working fine when i press button its change color to yellow and when you release its back to black color :)
btnLogin.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
btnLogin.setTextColor(Color.parseColor("#FFCC00"));
break;
case MotionEvent.ACTION_UP:
btnLogin.setTextColor(Color.BLACK);
break;
}
return true;
}
});
Related
I am working on a project where a button should stay pressed when the user touches or taps on it. I have done it successfully using:
button.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
button.setPressed(true);
return true;
}
});
Now, my problem is: when I pull down the status bar or minimize the app using home/back button (from navigation bar), the button becomes unpressed.
I have tried to solve this using:
onSaveInstanceState(Bundle savedInstanceState)
to save the pressed state of the button, but it didn't work.
Now, how can I solve this problem?
I have found two solutions to this (I personally like the second one).
Solution 1
Firstly, I have used onResume() and a flag variable to save the button's state when user minimizes the app.
Secondly, I have used onWindowFocusChanged() and that same flag variable to save the button's state when user pulls down the status bar.
Demo code:
public class MainActivity extends AppCompatActivity {
Button button;
int flag=0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = (Button) findViewById(R.id.button);
button.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
button.setPressed(true);
flag=1;
return true;
}
});
}
#Override
public void onResume() {
super.onResume();
if(flag==1){
button.setPressed(true);
}else{
button.setPressed(false);
}
}
#Override
public void onWindowFocusChanged(boolean hasFocus) {
// handle when the user pull down the notification bar where
// (hasFocus will ='false') & if the user pushed the
// notification bar back to the top, then (hasFocus will ='true')
super.onWindowFocusChanged(hasFocus);
if (!hasFocus) {
Log.i("Tag", "Notification bar is pulled down");
}
else {
Log.i("Tag", "Notification bar is pushed up");
if(flag==1){
button.setPressed(true);
}else{
button.setPressed(false);
}
}
}
}
Solution 2:
Firstly, I have created a file in drawable named button_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/button_disabled">
</item>
<item android:state_selected="true"
android:drawable="#drawable/button_default">
</item>
<item android:state_focused="true"
android:drawable="#drawable/button_default">
</item>
<item android:state_pressed="true"
android:drawable="#drawable/button_default">
</item>
</selector>
Create two files in drawable (button_disabled.xml & button_default.xml) which are used in button_bg.xml.
button_disabled.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#b6b7b5" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />
<stroke
android:width="2dp"
android:color="#050303" />
<corners android:radius="15dp" />
</shape>
button_default.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#6FA803"/>
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />
<stroke
android:width="2dp"
android:color="#050303" />
<corners android:radius="15dp" />
</shape>
Then, I have added this button_bg.xml file as a background of my button:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_bg"
android:text="Button" />
Lastly, I have used setOnClickListener() and View.setSelected() to select the button view and stay pressed:
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
v.setSelected(true);
}
});
The reason I like the second solution is: I don't need to handle the button's state manually. So, when I will be working on with several buttons, the second solution will be more handy.
How are you? I am new at Android programming. so far I have run a single app on my mobile phone using 4.1 API 16.
My question is when releasing a click event the button image in the following code should be restored to previous state.
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
x = x + 1;
edittext.setText("" + x);
button.setBackgroundResource(R.drawable.buttonpressed1);
}
});
you can also use drawable touch states. an example showing color change on press:
in your button xml use android:background="#drawable/touchstates"
and touchstates.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<stroke android:color="#cc0099CC" android:width="1dip" />
<solid android:color="#660099CC" />
</shape>
</item>
</selector>
For normal performance you must use selector like background property of Button view
put all of this files to folder drawable
selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_pressed" android:state_pressed="true" />
<item android:drawable="#drawable/br_unpressed" />
</selector>
bg_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="#dimen/circle_padding"
android:color="#android:color/transparent" />
<solid android:color="#android:color/white" />
</shape>
bg_unpressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="#dimen/circle_padding"
android:color="#android:color/transparent" />
<solid android:color="#android:color/black" />
</shape>
and in layout set button background android:background="#drawable/selector"
There is a full solution for you:
ImageButton guessButton;
guessButton = (ImageButton) findViewById(R.id.Knorr_Game_Guess_Button);
guessButton.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
if (event.getAction() == MotionEvent.ACTION_DOWN)
{
v.setBackgroundResource(R.drawable.ic_picture1);
}
else if (event.getAction() == MotionEvent.ACTION_UP)
{
v.setBackgroundResource(R.drawable.ic_picture2);
}
return false;
}
});
It works:)
If you want to capture the release of a button, you need to use OnTouchListener
Here is an example:
yourButton.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN) {
//What happens when preessed
} else if (event.getAction() == MotionEvent.ACTION_UP) {
//What happens when released }
}
};
Hope this helped!
You need to use a selector. The selector needs to be a drawable file which is assigned to the background of your button. An example of a selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused -->
<item
android:state_focused="true"
android:drawable="#drawable/rounded_button_focused"
/>
<!--pressed -->
<item
android:state_pressed="true"
android:drawable="#drawable/rounded_button_pressed"
/>
<item
android:drawable="#drawable/rounded_button_unfocused"/>
</selector>
The selector will basically assign the correct background depending on the state of your button. If the button is pressed then it will assign the file "rounded_button_pressed" to the background of the button. The rounded_button_pressed is another drawable file for example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#color/WhiteSmoke"
android:endColor="#color/LightGrey"
android:angle="270"/>
<stroke
android:width="2dp"
android:color="#color/CornflowerBlue" />
<corners
android:radius="4dp"
/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
Hope it solves your problem
So I am making an app with 3 buttons. Currently I have the following .xml file that makes them have rounded off edges and be the colour red. Now I want to to make them so if one is selected then that button turns green while the other two remain, or turn back to red. How could I go about doing this? Do I have to make another .xml file?
Here is my drawable .xml file for the buttons:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!--red colour.-->
<solid android:color="#FF0000"/>
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
<stroke android:width="2px" android:color="#000000"/>
</shape>
Use a selector as follows:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- green state -->
<item
android:drawable="#drawable/button_selected"
android:state_selected="true"></item>
<!-- green state -->
<item
android:drawable="#drawable/button_pressed"
android:state_pressed="true"></item>
<!-- red state -->
<item
android:drawable="#drawable/button_disabled"></item>
</selector>
Then, you should call this selector like:
<Button
...
android:background="#drawable/my_selector" />
And create each drawable.xml (as your example for the red button) for every state: button_selected, button_pressed and button_disabled.
You can also remain the state by using onTouchListener like:
button.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// change the color
return true;
case MotionEvent.ACTION_UP:
// intitial color
return true;
default:
return false;
}
}
});
However, it's better to use a Selector and a background, this use less resource.
UPDATE:
You can use a setBackgroundResource method to remain and change the background state of clicked button as follows:
// 1st clicklistener method
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
v.setBackgroundResource(R.drawable.green_drawable);
button2.setBackgroundResource(R.drawable.selector_drawable);
}
}
// 2nd clicklistener method
button2.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
v.setBackgroundResource(R.drawable.green_drawable);
button1.setBackgroundResource(R.drawable.selector_drawable);
}
}
Not tested but it should work.
Hi I have a button in xml, and I am using OnTouchListener in my activity to get button press and release. But the problem is that when I press the button the background color is not changing. Where as when I extend may activity with OnClickListener the background is changing. Can any one tell what wrong with my code.
public class pushbuttonActivity extends Activity implements OnTouchListener {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.push_button_layout);
GPIO_0_B = (Button) findViewById(R.id.GPIO_0);
GPIO_0_B.setOnTouchListener((OnTouchListener) this);
}
public boolean onTouch(View v,MotionEvent event) {
switch(v.getId()) {
case R.id.GPIO_0 : GPIOPORT=0;
break;
default : break;
}
if(event.getAction() == MotionEvent.ACTION_DOWN) {
//Do something on touch
} else if (event.getAction() == MotionEvent.ACTION_UP) {
//Do something in release
}
return true;
}
push_button_layout.xml
<RelativeLayout .........
.................
<Button
android:id="#+id/GPIO_0"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/round_button"
android:textStyle="bold"
android:textSize="14sp"
android:text="GPIO 0"
android:layout_marginTop="15dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="50dp"
/>
round_button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states
-->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/round_button_unfocused" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/round_button_unfocused" />
<!-- Focused states
-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/round_button_focus" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/round_button_focus" />
<!-- Pressed
-->
<item android:state_pressed="true" android:drawable="#drawable/round_button_press" />
</selector>
round_button_focus.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#FF404040" />
<corners
android:radius="6dp" />
<size android:height="40dp"
android:width="40dp"/>
<gradient
android:startColor="#FF6800"
android:centerColor="#FF8000"
android:endColor="#FF9700"
android:angle="90" />
</shape>
round_button_press.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#FF606060" />
<corners
android:radius="40dp" />
<gradient
android:startColor="#FF0000"
android:centerColor="#FF0000"
android:endColor="#FF0000"
android:angle="90" />
</shape>
round_button_unfocus.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#FF606060" />
<corners
android:radius="40dp" />
<gradient
android:startColor="#550000"
android:centerColor="#550000"
android:endColor="#550000"
android:angle="90" />
</shape>
And sorry for the lengthy post....
#Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
v.setPressed(true);
//doYourWorkHere();
break;
case MotionEvent.ACTION_UP:
v.setPressed(false);
//doYourWorkHere();
break;
}
return true;/* true to deactivate other listeners at the same time; false otherwise */
}
Using Ontouch you wont get the Clicked state of your button
use Onclick Coz , In onclick method Pressed state of button will be true
Actually I need to get button click and release
use this to get click and release
GPIO_0_B.setOnClickListener(new OnClickListener() {
#Override
public boolean onTouch(View v, MotionEvent event)
{
if(event.getAction() == MotionEvent.ACTION_DOWN) {
GPIO_0_B.setBackground(R.drawable.round_button_focus);
} else if (event.getAction() == MotionEvent.ACTION_UP) {
GPIO_0_B.setBackground(R.drawable.round_button_unfocused);
}
}
};
For touch listner change this line GPIO_0_B.setOnClickListener(new OnClickListener() {
to
GPIO_0_B.setOnTouchListener(new OnTouchListener() {
how can I do with its id, Actually I have more than one button
Do this in onCreate():
{
Button GPIO_0_B1 =(Button) findViewById(R.id.youridfromxml);
Button GPIO_0_B1 =(Button) findViewById(R.id.youridfromxml);
GPIO_0_B1.setOnClickListener(getOnClickDoSomething(GPIO_0_B1);
GPIO_0_B2.setOnClickListener(getOnClickDoSomething(GPIO_0_B2);
}
Now
create new method (outside oncreate() method:- info for noobs)
View.OnClickListener getOnClickDoSomething(final Button Gpbot)
{
return new View.OnClickListener()
{
#Override
public void onClick(View v)
{
if(event.getAction() == MotionEvent.ACTION_DOWN) {
Gpbot.setBackground(R.drawable.round_button_focus);
} else if (event.getAction() == MotionEvent.ACTION_UP) {
Gpbot.setBackground(R.drawable.round_button_unfocused);
}
}
}
}
Just setting a layout as a background to your Button in xml will do the trick. have a xml in your drawable folder named for eg:clickedstate.xml like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/default_bgnd" />
<item android:state_focused="true"
android:drawable="#drawable/new_green" />
<item android:state_pressed="true"
android:drawable="#drawable/new_green" />
<item android:state_checked="true"
android:drawable="#drawable/new_green"/>
<item android:state_selected="true"
android:drawable="#drawable/new_green" />
</selector>
In your xml just do this for your button
android:background="#drawable/clickedstate"
You can use the below code through the onclick event listener to achieve this :
StateListDrawable states = new StateListDrawable();
Drawable image_normal = //drawable of the image
Drawable image_focused = //drawable of the image
Drawable image_pressed = //drawable of the image
states.addState(new int[] {android.R.attr.state_pressed},image_focused);
states.addState(new int[] {android.R.attr.state_focused},image_pressed);
states.addState(new int[] { },image_normal);
buttonObj.setBackgroundDrawable(states);
Try with this code.
#Override
public boolean onTouch(View view, MotionEvent event) {
view.setSelected(true);
...
return true;
}
What I am trying to achieve: When the button is pressed for the first time, it should get highlighted/ activated / pressed. On the second click on the button it should get unactivated/ not pressed.
and later I want to check that if the button isPressed, do something.
What I tried:
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (v.getId()) {
case R.id.day_button:
if (v.isPressed() == true) {
v.setPressed(false);
} else if (v.isPressed() == false) {
v.setPressed(true);
}
return true;
I tried this with day_but.isPressed == true also.
you can try with this way change the background state of button when click set the images as a background
Button testButton = (Button) findViewById(R.id.buttonTestButton);
int status = 0;//GLOBAL VARIABLE : the status of the Button ( 0 or 1 )
testButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//toggle picture
if (status == 0) {
testButton.setBackgroundResource(R.drawable.alternatepicture);
status=1 ; // change the status to 1 so the at the second clic , the else will be executed
}
else {
testButton.setBackgroundResource(R.drawable.fakpicture);
status =0;//change the status to 0 so the at the second clic , the if will be executed
}
}//end void onClick
});
YOu can use toggle button. For more info http://developer.android.com/guide/topics/ui/controls/togglebutton.html
<ToggleButton
android:id="#+id/togglebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Vibrate on"
android:textOff="Vibrate off"
android:onClick="onToggleClicked"/>
or there is another approach you can follow. you can apply style in your button.
<Button
android:id="#+id/button1"
style="#button_style/<StyleName>"
android:layout_width="200dp"
android:layout_height="126dp"
android:text="Hello" />
Create a button_style.xml file in drawable directory
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
</selector>
You can also define a Selector for your Button to customize highlighting,so you create a xml file then :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:state_enabled="true"
android:state_focused="false" android:drawable="#drawable/enable_notpressed" />
<item android:state_pressed="true" android:state_enabled="true"
android:drawable="#drawable/enable_pressed" />
<item android:state_pressed="false" android:state_enabled="false"
android:state_focused="false" android:drawable="#drawable/disabled" />
</selector>
then assign it to your button as background param.
use selector like:
make a new xml file in drawable folder and paste this code.and change values accordingly.
<padding
android:left="10dp"
android:top="2dp"
android:right="10dp"
android:bottom="2dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#003040"
android:endColor="#003040"
android:angle="180" />
<corners
android:radius="8dp" />
<padding
android:left="10dp"
android:top="2dp"
android:right="10dp"
android:bottom="2dp" />
</shape>
</item>
</selector>
!!happy coding!!
XML CODE:
<ToggleButton
android:id="#+id/btspeaker"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_marginRight="20dp"
android:background="#drawable/bgspeaker"
android:button="#null"
android:textOff=""
android:textOn="" />
In the drawable:
bgspeaker.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/speaker_btn_select" android:state_checked="true"/>
<item android:drawable="#drawable/speaker_btn" android:state_checked="false"/>
<item android:drawable="#drawable/speaker_btn"></item>
</selector>
In the activity:
if (v.getId() == R.id.btspeaker) {
if (btspeaker.isChecked()) {
Toast.makeText(context, "Pressed/Selected",
Toast.LENGTH_LONG).show();
} else {
Toast.makeText(context,"UnSelected",
Toast.LENGTH_LONG).show();
}
}