Làm thế nào để đặt hiệu ứng nhấp vào nút trong Android?

Trong Android, khi tôi đặt hình nền thành Nút, tôi không thể thấy bất kỳ hiệu ứng nào trên nút.

Tôi cần một số hiệu ứng trên nút để người dùng có thể nhận ra nút đó được nhấp.

Nút sẽ tối trong vài giây khi nó nhấp vào, vì vậy tôi nên làm gì cho điều này?

Cảm ơn.

Điều này có thể đạt được bằng cách tạo một tệp xml có thể kéo được chứa danh sách các trạng thái cho nút. Vì vậy, ví dụ: nếu bạn tạo một tệp xml mới có tên "button.xml" với mã sau:

<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>

Để giữ cho hình nền bị tối khi nhấn, hãy tạo tệp xml thứ hai và gọi nó là gradient.xml với mã sau:

<?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>

Trong xml của nút của bạn, đặt nền là nút xml, ví dụ:

android:background="@drawable/button"

Hi vọng điêu nay co ich!

Chỉnh sửa: Đã thay đổi mã trên để hiển thị hình ảnh (MÌNH HÌNH ẢNH) trong nút trái ngược với màu khối.

Sẽ đơn giản hơn khi bạn có rất nhiều nút hình ảnh, và bạn không muốn viết xml-s cho mỗi nút.

Phiên bản Kotlin:

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

Phiên bản Java:

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

Tạo AlphaAnimationĐối tượng của bạn để quyết định mức độ sẽ là hiệu ứng mờ dần của nút, sau đó để nó bắt đầu trong các onClickListenernút của bạn

Ví dụ :

private AlphaAnimation buttonClick = new AlphaAnimation(1F, 0.8F);

// some code

public void onClick(View v) {
    v.startAnimation(buttonClick);
}

tất nhiên đây chỉ là một cách, không phải là cách ưa thích nhất, nó chỉ dễ dàng hơn

Bạn chỉ có thể sử dụng foreground cho bạn Viewđể đạt được hiệu ứng nhấp được:

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

Để sử dụng với chủ đề tối, hãy thêm chủ đề vào của bạn layout(để hiệu ứng có thể nhấp được rõ ràng):

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

Để làm cho mặt hàng của bạn nhất quán với giao diện hệ thống, hãy thử tham chiếu thuộc tính hệ thống android:attr/selectableItemBackgroundtrong thẻ nền hoặc thẻ nền của chế độ xem mong muốn của bạn:

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

Sử dụng cả hai thuộc tính để có được hiệu ứng mong muốn trước / sau API cấp 23 tương ứng.

https://stackoverflow.com/a/11513474/4683601

Hoặc chỉ sử dụng một hình nền, bạn có thể đạt được hiệu ứng nhấp chuột bằng cách sử dụng setOnTouchListener

Hai lối

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

Và nếu bạn không muốn sử dụng setOnTouchLister, một cách khác để đạt được điều này là

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

chỉ muốn thêm một cách dễ dàng khác để thực hiện việc này: Nếu ImageButton của bạn vẫn giữ nguyên nền và bạn không đặt nó thành null, nó sẽ hoạt động giống như một nút bình thường và sẽ hiển thị hoạt ảnh nhấp chuột trong khi nhấp chính xác như các nút khác. nền trong khi nó vẫn ở đó:

<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" />

Các phần đệm sẽ không cho phép nhìn thấy nền và làm cho nút hoạt động giống như các nút khác.

Đây là giải pháp tốt nhất mà tôi đưa ra với những gợi ý từ câu trả lời của @ Vinayak. Tất cả các giải pháp khác đều có những nhược điểm khác nhau.

Trước hết hãy tạo một chức năng như thế này.

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

Giải trình:

getConstantState (). newDrawable () được sử dụng để sao chép Drawable hiện có, nếu không, cùng một drawable sẽ được sử dụng. Đọc thêm từ đây: Android: Sao chép một drawable để tạo StateListDrawable với các bộ lọc

mutate () được sử dụng để làm cho bản sao Drawable không chia sẻ trạng thái của nó với các trường hợp khác của Drawable. Đọc thêm về nó tại đây: https://developer.android.com/reference/android/graphics/drawable/Drawable.html#mutate ()

Sử dụng:

Bạn có thể chuyển bất kỳ loại Chế độ xem nào (Nút, ImageButton, Chế độ xem, v.v.) làm tham số cho hàm và chúng sẽ nhận được hiệu ứng nhấp chuột được áp dụng cho chúng.

addClickEffect(myButton);
addClickEffect(myImageButton);

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

Sử dụng RippleDrawable cho trạng thái Material Design được nhấn / nhấp vào hiệu ứng.

Để đạt được điều này, hãy tạo mục ripple dưới dạng thư mục .xml trong / có thể vẽ và sử dụng nó trong android: background cho mọi chế độ xem.

• Hiệu ứng cho biểu tượng được nhấn / nhấp, sử dụng hiệu ứng gợn tròn, ví dụ:

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

• Hiệu ứng cho chế độ xem được nhấp với ranh giới hình chữ nhật, chúng ta có thể thêm gợn sóng trên có thể vẽ hiện có như dưới đây:

  <?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>

Đối với tất cả các chế độ xem

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

Nhưng đối với chế độ xem thẻ có sử dụng độ cao

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

Đối với hiệu ứng nhấp chuột tròn như trong thanh công cụ

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

Ngoài ra bạn cần đặt

 android:clickable="true"
 android:focusable="true"

Thực hiện một bổ sung nhỏ cho câu trả lời của Andràs:

Bạn có thể sử dụng postDelayedđể làm cho bộ lọc màu tồn tại trong một khoảng thời gian nhỏ để làm cho nó dễ nhận thấy hơn:

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

Bạn có thể thay đổi giá trị độ trễ 100L để phù hợp với nhu cầu của mình.

Nếu bạn đang sử dụng nền xml thay vì IMG, chỉ cần xóa phần này:

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

từ câu trả lời đầu tiên mà @Ljdawson cho chúng tôi.