91

I am working on Android Application. I want to have 4 buttons to be placed horizontally at the bottom of the screen. In these 4 buttons 2 buttons are having images on them. The border of the buttons should be black color and the border should be as thin as possible. When I click the button, I want the background of the button should be changed to blue color without the color of border to be changed and should be remained in that color for some time. How can I achieve this scenario in Android?

Improve this question
2

16 Answers 16

Reset to default
137

One approach is to create an XML file like this in drawable, called whatever.xml:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/bgalt" /> <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/bgalt" /> <item android:drawable="@drawable/bgnorm" /> </selector>

bgalt and bgnormare PNG images in drawable.

If you create the buttons programatically in your activity, you can set the background with:

final Button b = new Button (MyClass.this); b.setBackgroundDrawable(getResources().getDrawable(R.drawable.whatever));

If you set your buttons' style with an XML, you would do something like:

<Button android:id="@+id/mybutton" android:background="@drawable/watever" />

And finally a link to a tutorial.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

You can also replace those drawables in the XML file with colors definitions if you want to avoid using images.
@jshin47 an empic amount of trial and error. I've written two books on Android development now :-)
@haseman - Can you post the links of those 2 books or share to me at [email protected]. Would be glad to go through those and learn better
What if just colors not images?
@KalaJ have you found a solution ?
|
79

Save this code in drawable folder with "bg_button.xml" and call "@drawable/bg_button" as background of button in your xml:

<?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#004F81" /> <stroke android:width="1dp" android:color="#222222" /> <corners android:radius="7dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#89cbee" android:endColor="#004F81" android:angle="270" /> <stroke android:width="1dp" android:color="#4aa5d4" /> <corners android:radius="7dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> </selector>
Improve this answer

3 Comments

Thanks man, using style you can reduce application size. good idea to not use drawable
On the other hand, xml vector-based drawables are usually worse for performance than images, especially on older devices. Don't optimize prematurely, but keep that in mind as well.
Add android:background="?android:attr/selectableItemBackground" . Vote my answer below thanks
11

Try This

 final Button button = (Button) findViewById(R.id.button_id); button.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent event) { if(event.getAction() == MotionEvent.ACTION_UP) { button.setBackgroundColor(Color.RED); } else if(event.getAction() == MotionEvent.ACTION_DOWN) { button.setBackgroundColor(Color.BLUE); } return false; } });
Improve this answer

1 Comment

It could not change back to its original color.
10

Refer this,

boolean check = false; Button backward_img; Button backward_img1; backward_img = (Button) findViewById(R.id.bars_footer_backward); backward_img1 = (Button) findViewById(R.id.bars_footer_backward1); backward_img.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { check = true; backward_img.setBackgroundColor(Color.BLUE); } }); if (check == true) { backward_img1.setBackgroundColor(Color.RED); backward_img.setBackgroundColor(Color.BLUE); }
Improve this answer

2 Comments

This will set the BG permanently, that is, if the user clicks the back button, the background will be red.
@methode: ok refer the new answer i have corrected the oldanswer
8 
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- default --> <item android:state_pressed="false" android:state_focused="false"> <shape android:innerRadiusRatio="1" android:shape="rectangle" > <solid android:color="#00a3e2" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> <!-- button focused --> <item android:state_pressed="false" android:state_focused="true"> <shape android:innerRadiusRatio="1" android:shape="rectangle" > <solid android:color="#5a97f5" /> <padding android:bottom="5dp" android:left="10dp" android:right="10dp" android:top="5dp" /> </shape></item> <!-- button pressed --> <item android:state_pressed="true" android:state_focused="false"> <shape android:innerRadiusRatio="1" android:shape="rectangle" > <solid android:color="#478df9"/> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape></item> </selector>
Improve this answer

Comments

6

If you want to change the backgorund image or color of the button when it is pressed, then just copy this code and paste in your project at exact location described below.

 <!-- Create new xml file like mybtn_layout.xml file in drawable --> <?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" /> <!--pressed --> <item android:drawable="@drawable/normal" /> <!-- Normal --> </selector> <!-- Now this file should be in a drawable folder and use this single line code in button code to get all the properties of this xml file --> <Button android:id="@+id/street_btn" android:layout_width="wrap_content" android:background="@drawable/layout_a" > <!-- your required code --> </Button>
Improve this answer

Comments

6

1-make 1 shape for Button right click on drawable nd new drawable resource file . change Root element to shape and make your shape.

enter image description here

2-now make 1 copy from your shape and change name and change solid color. enter image description here

3-right click on drawable and new drawable resource file just set root element to selector.

go to file and set "state_pressed"

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"android:drawable="@drawable/YourShape1"/> <item android:state_pressed="false" android:drawable="@drawable/YourShape2"/> </selector>

4-the end go to xml layout and set your Button background "your selector"

(sorry for my english weak)

Improve this answer

Comments

4

Try this......

First create an xml file named button_pressed.xml These are it's contents.

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/icon_1" /> <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/icon_1_press" /> <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/icon_1_press" /> <item android:drawable="@drawable/icon_1" /> </selector>

Noe try this on your button.

int imgID = getResources().getIdentifier("button_pressed", "drawable", getApplication().getPackageName()); button.setImageResource(imgID);

button_pressed.xml should be in the drawable folder. icon_1_press and icon_1 are two images for button press and normal focus.

Improve this answer

Comments

3

you can try this code to solve your problem

<?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/login_selected" /> <!-- pressed --> <item android:state_focused="true" android:drawable="@drawable/login_mouse_over" /> <!-- focused --> <item android:drawable="@drawable/login" /> <!-- default --> </selector>

write this code in your drawable make a new resource and name it what you want and then write the name of this drwable in the button same as we refer to image src in android

Improve this answer

1 Comment

hi sir @lmo I have given some explanation with the question.
1

I am use this code (with ripple effect):

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/color_gray"> <item android:id="@android:id/mask"> <color android:color="@color/color_gray" /> </item></ripple>
Improve this answer

Comments

1 
public void onPressed(Button button, int drawable) { if (!isPressed) { button.setBackgroundResource(R.drawable.bg_circle); isPressed = true; } else { button.setBackgroundResource(drawable); isPressed = false; } } @Override public void onClick(View v) { switch (v.getId()) { case R.id.circle1: onPressed(circle1, R.drawable.bg_circle_gradient); break; case R.id.circle2: onPressed(circle2, R.drawable.bg_circle2_gradient); break; case R.id.circle3: onPressed(circle3, R.drawable.bg_circle_gradient3); break; case R.id.circle4: onPressed(circle4, R.drawable.bg_circle4_gradient); break; case R.id.circle5: onPressed(circle5, R.drawable.bg_circle5_gradient); break; case R.id.circle6: onPressed(circle6, R.drawable.bg_circle_gradient); break; case R.id.circle7: onPressed(circle7, R.drawable.bg_circle4_gradient); break; }

please try this, in this code i m trying to change the background of button on button click this works fine.

Improve this answer

Comments

0

To deal properly for how long you want to have your button stay in your other color I would advise this version:

button.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch(event.getAction()) { case MotionEvent.ACTION_DOWN: button.setBackground(getResources().getDrawable(R.drawable.on_click_drawable)); break; case MotionEvent.ACTION_UP: new java.util.Timer().schedule( new java.util.TimerTask() { @Override public void run() { ((Activity) (getContext())).runOnUiThread(new Runnable() { @Override public void run() { button.setBackground(getResources().getDrawable(R.drawable.not_clicked_drawable)); } }); } }, BUTTON_CLICK_TIME_AFTER_RELEASE_ANIMATION); break; default: } return false; } });

BUTTON_CLICK_TIME_AFTER_RELEASE_ANIMATION indicates after how much time [ms] the button will reset to the previous state (however you might want to use some boolean to check that the button hadn't been used in between, depending on what you want to achieve...).

Improve this answer

Comments

0

Even using some of the comments above this took way longer to work out that should be necessary. Hopefully this example helps someone else.

Create a radio_button.xml in the drawable directory.

 <?xml version="1.0" encoding="utf-8"?> <!-- An element which allows two drawable items to be listed.--> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/radio_button_checked" /> <!--pressed --> <item android:drawable="@drawable/radio_button_unchecked" /> <!-- Normal --> </selector>

Then in the xml for the fragment should look something like

<?xml version="1.0" encoding="utf-8"?> <layout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <RadioGroup android:layout_width="match_parent" android:layout_height="match_parent"> <RadioButton android:id="@+id/radioButton1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_weight="1" android:button="@drawable/radio_button" android:paddingLeft="10dp" /> <RadioButton android:id="@+id/radioButton2" android:layout_marginLeft="10dp" android:paddingLeft="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:button="@drawable/radio_button" /> </RadioGroup> </LinearLayout> </layout>
Improve this answer

Comments

0

Just add 1 line in XML for the click item

android:background="?android:attr/selectableItemBackground"

Improve this answer

Comments

0 
 android:focusableInTouchMode="true" Then <item android:drawable="@drawable/bottom_line_green" android:state_focused="true"></item> <item android:drawable="@color/white" android:state_focused="false"></item>
Improve this answer

Comments

-1

hai the most easiest way is this:

add this code to mainactivity.java

public void start(View view) { stop.setBackgroundResource(R.color.red); start.setBackgroundResource(R.color.yellow); } public void stop(View view) { stop.setBackgroundResource(R.color.yellow); start.setBackgroundResource(R.color.red); }

and then in your activity main

 <button android:id="@+id/start" android:layout_height="wrap_content" android:layout_width="wrap_content" android:onclick="start" android:text="Click"> </button><button android:id="@+id/stop" android:layout_height="wrap_content" android:layout_width="wrap_content" android:onclick="stop" android:text="Click">

or follow along this tutorial

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.