How to set button click effect in Android?

Question

In Android, when I set the background image for a button, I do not see any effect on the button.

I need some kind of influence on the button so that the user can find out that the button is pressed.

The button should be dark for a few seconds when it is pressed, so what should I do for this?

Thank you

Answer 1

This can be achieved by creating a flexible XML file containing a list of states for the button. For example, if you create a new xml file named "button.xml" with the following code:

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

To save the background image with a darkened appearance, click the second xml file and name it gradient.xml with the following code:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <bitmap android:src="@drawable/YOURIMAGE"/> </item> <item> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="90" android:startColor="#880f0f10" android:centerColor="#880d0d0f" android:endColor="#885d5d5e"/> </shape> </item> </layer-list> 

In the xml of your button, set the background as the xml button, for example.

 android:background="@drawable/button" 

Hope this helps!

Edit: modified the above code to show the image (YOURIMAGE) in the button, not the color of the block.

Answer 2

It’s easier when you have many buttons with images, and you don’t want to write xml-s for each button.

Kotlin Version:

 fun buttonEffect(button: View) { button.setOnTouchListener { v, event -> when (event.action) { MotionEvent.ACTION_DOWN -> { v.background.setColorFilter(-0x1f0b8adf, PorterDuff.Mode.SRC_ATOP) v.invalidate() } MotionEvent.ACTION_UP -> { v.background.clearColorFilter() v.invalidate() } } false } } 

Java version:

 public static void buttonEffect(View button){ button.setOnTouchListener(new OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { v.getBackground().setColorFilter(0xe0f47521,PorterDuff.Mode.SRC_ATOP); v.invalidate(); break; } case MotionEvent.ACTION_UP: { v.getBackground().clearColorFilter(); v.invalidate(); break; } } return false; } }); } 

Answer 3

Create your AlphaAnimation object that decides how much the button will fade out, and then let it begin with the onClickListener your buttons

For example:

 private AlphaAnimation buttonClick = new AlphaAnimation(1F, 0.8F); // some code public void onClick(View v) { v.startAnimation(buttonClick); } 

Of course, this is just a method, and not the most preferred, just easier

Answer 4

You can simply use the foreground for your View to achieve a clickable effect:

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

For use with a dark theme, also add a theme to your layout (so that the click effect is clear):

 android:theme="@android:style/ThemeOverlay.Material.Dark" 

Answer 5

To make your element compatible with the appearance of the system, it is easy to make a link to the android system attribute: attr / selectableItemBackground. For example, if you want to make ImageView in your widget “selective” with the correct highlighting, etc .: Just do

 <ImageView ... android:background="?android:attr/selectableItemBackground" ... /> 

There is a lot in android_sdk_path / platform / android-x. Happy digging!

EDIT: I found out later that this simple attribute does not live in SDK <v11. So the best way that I know now is to download the appwidget template package and use it.

stack overflow

Answer 6

Or using only one background image, you can achieve a click effect using setOnTouchListener

Two ways

 ((Button)findViewById(R.id.testBth)).setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { Button view = (Button) v; view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP); v.invalidate(); break; } case MotionEvent.ACTION_UP: // Your action here on button click case MotionEvent.ACTION_CANCEL: { Button view = (Button) v; view.getBackground().clearColorFilter(); view.invalidate(); break; } } return true; } }); 

And if you do not want to use setOnTouchLister , another way to achieve this is

  myButton.getBackground().setColorFilter(.setColorFilter(0xF00, Mode.MULTIPLY); StateListDrawable listDrawable = new StateListDrawable(); listDrawable.addState(new int[] {android.R.attr.state_pressed}, drawablePressed); listDrawable.addState(new int[] {android.R.attr.defaultValue}, myButton); myButton.setBackgroundDrawable(listDrawable); 

Answer 7

just add another simple way to do this: if your ImageButton remains its background and you do not set it to null, it will work like a regular button and will show the click animation, clicking just like other buttons. way to hide the background while it is still there:

 <ImageButton android:id="@+id/imageButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="1dp" android:paddingLeft="1dp" android:paddingRight="1dp" android:paddingTop="1dp" android:src="@drawable/squareicon" /> 

Gaskets will not allow the background to be visible and make the button act like other buttons.

Answer 8

This is the best solution I came up with to get hints from @Vinayak's answer. All other solutions have different disadvantages.

First of all, create such a function.

 void addClickEffect(View view) { Drawable drawableNormal = view.getBackground(); Drawable drawablePressed = view.getBackground().getConstantState().newDrawable(); drawablePressed.mutate(); drawablePressed.setColorFilter(Color.argb(50, 0, 0, 0), PorterDuff.Mode.SRC_ATOP); StateListDrawable listDrawable = new StateListDrawable(); listDrawable.addState(new int[] {android.R.attr.state_pressed}, drawablePressed); listDrawable.addState(new int[] {}, drawableNormal); view.setBackground(listDrawable); } 

Explanation:

getConstantState (). newDrawable () is used to clone an existing Drawable, otherwise the same drawable will be used. Read more here: Android: clone selected file to make StateListDrawable with filters

mutate () is used to make Drawable clone not sharing its state with other Drawable instances. More about this here: https://developer.android.com/reference/android/graphics/drawable/Drawable.html#mutate ()

Application:

As a parameter to a function, you can pass any types of View (Button, ImageButton, View, etc.), and they will get the click effect applied to them.

 addClickEffect(myButton); addClickEffect(myImageButton); 

Answer 9

 Step: set a button in XML with onClick Action: <Button android:id="@+id/btnEditUserInfo" style="?android:borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="@dimen/txt_height" android:layout_gravity="center" android:background="@drawable/round_btn" android:contentDescription="@string/image_view" android:onClick="edit_user_info" android:text="Edit" android:textColor="#000" android:textSize="@dimen/login_textSize" /> Step: on button clicked show animation point //pgrm mark ---- ---- ----- ---- ---- ----- ---- ---- ----- ---- ---- ----- public void edit_user_info(View view) { // show click effect on button pressed final AlphaAnimation buttonClick = new AlphaAnimation(1F, 0.8F); view.startAnimation(buttonClick); Intent intent = new Intent(getApplicationContext(), EditUserInfo.class); startActivity(intent); }// end edit_user_info 

Answer 10

Use RippleDrawable for material design state, click / click effect.

To achieve this, create a ripple element in the form of .xml in the / drawable folder and use it in android: background for any views.

• Effect for the icon pressed / pressed, use the effect of circular ripples, for example:

  <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/darker_gray"/>

• Effect for the view clicked with the border of the rectangle, we can add ripples on top of the existing object, as shown below:

  <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000"> <item android:drawable="@drawable/your_background_drawable"/> </ripple>

Answer 11

A small addition to Andras' answer:

You can use postDelayed to make the color filter work for a short period of time to make it more visible:

  @Override public boolean onTouch(final View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { v.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_ATOP); v.invalidate(); break; } case MotionEvent.ACTION_UP: { v.postDelayed(new Runnable() { @Override public void run() { v.getBackground().clearColorFilter(); v.invalidate(); } }, 100L); break; } } return false; } 

You can change the delay value of 100L to suit your needs.

Answer 12

If you use background XML instead of IMG, just delete this:

 <item> <bitmap android:src="@drawable/YOURIMAGE"/> </item> 

from the 1st answer that @Ljdawson gave us.