Hiệu ứng vật liệu trên nút với màu nền

Tôi đang sử dụng thư viện hỗ trợ Android v21.

Tôi đã tạo một nút với màu nền tùy chỉnh. Các hiệu ứng thiết kế Vật liệu như gợn, lộ đã biến mất (ngoại trừ độ cao khi nhấp) khi tôi sử dụng màu nền.

 <Button
 style="?android:attr/buttonStyleSmall"
 android:background="?attr/colorPrimary"
 android:textColor="@color/white"
 android:textAllCaps="true"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 />

Sau đây là một nút bình thường và các hiệu ứng đang hoạt động tốt.

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:text="Button1"
/>

Khi bạn sử dụng android:background, bạn đang thay thế phần lớn kiểu dáng và giao diện của một nút bằng một màu trống.

Cập nhật: Kể từ phiên bản 23.0.0 của AppCompat , có một Widget.AppCompat.Button.Coloredkiểu mới sử dụng chủ đề của bạn colorButtonNormalcho màu bị tắt và colorAccentcho màu được bật.

Điều này cho phép bạn áp dụng nó vào nút của bạn trực tiếp thông qua

<Button
  ...
  style="@style/Widget.AppCompat.Button.Colored" />

Nếu bạn cần một tùy chỉnh colorButtonNormalhoặc colorAccent, bạn có thể sử dụng một ThemeOverlaynhư được giải thích trong pro-tip này và android:themetrên nút.

Trả lời trước

Bạn có thể sử dụng drawable trong thư mục v21 cho nền của mình, chẳng hạn như:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

Điều này sẽ đảm bảo màu nền của bạn là ?attr/colorPrimaryvà có hoạt ảnh gợn mặc định bằng cách sử dụng mặc định ?attr/colorControlHighlight(mà bạn cũng có thể đặt trong chủ đề của mình nếu bạn muốn).

Lưu ý: bạn sẽ phải tạo một bộ chọn tùy chỉnh ít hơn v21:

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

Giả sử bạn có một số màu bạn muốn cho trạng thái mặc định, được nhấn và tập trung. Cá nhân, tôi đã chụp ảnh màn hình của một gợn sóng giữa chừng được chọn và kéo trạng thái chính / tập trung ra khỏi đó.

Có một giải pháp đơn giản khác để cung cấp nền tùy chỉnh cho các nút "Flat" trong khi vẫn giữ hiệu ứng "Chất liệu" của chúng.

1. Đặt nút của bạn trong Viewgroup với nền được đặt ở đó
2. đặt selectableItemBackground từ chủ đề hiện tại làm nền cho nút của bạn (API> = 11)

I E :

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/blue">
    <Button
        style="?android:attr/buttonStyleSmall"
        android:background="?android:attr/selectableItemBackground"
        android:textColor="@android:color/white"
        android:textAllCaps="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
</FrameLayout>

Có thể được sử dụng cho căn hộ nút , nó hoạt động trên API> = 11 và bạn sẽ có hiệu ứng gợn trên các thiết bị> = 21, giữ các nút thông thường trên trước 21 cho đến khi AppCompat được cập nhật để hỗ trợ Ripple ở đó.

Bạn cũng có thể sử dụng selectableItemBackgroundBorderless chỉ với> = 21 nút.

Dưới đây là một cách tương thích đơn giản và lạc hậu để cung cấp hiệu ứng gợn cho các nút được nâng lên với nền tùy chỉnh.

Bố cục của bạn sẽ trông như thế này

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_custom_background"
    android:foreground="?android:attr/selectableItemBackground"/>

Tôi gặp vấn đề này ngày hôm nay thực sự chơi với thư viện v22.

Giả sử rằng bạn đang sử dụng các kiểu bạn có thể đặt thuộc colorButtonNormaltính và các nút sẽ sử dụng màu đó theo mặc định.

<style name="AppTheme" parent="BaseTheme">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="colorAccent">@color/accentColor</item>
    <item name="colorButtonNormal">@color/primaryColor</item>
</style>

Ngoài ra, bạn vẫn có thể tạo kiểu cho nút sau đó sử dụng mỗi nút đó nếu bạn cần một loại màu sắc (chưa được thử nghiệm, chỉ là suy đoán).

Nhớ thêm android:trước tên vật phẩm theo kiểu v21 của bạn .

Với AppCompat (22.1.1+), bạn có thể thêm một kiểu như thế này:

<style name="MyGreenButton">
    <item name="colorButtonNormal">#009900</item>
</style>

Và sử dụng nó bằng cách chỉ áp dụng phong cách:

<android.support.v7.widget.AppCompatButton
    style="@style/MyGreenButton"
    android:layout_width="match_width"
    android:layout_height="wrap_content"
    android:text="A Green Button"
    />

Thay đổi màu sắc theo lập trình, tôi thấy rằng cách duy nhất để cập nhật màu (trên API 15 hoặc 16) là sử dụng 'danh sách màu nền' thay thế. Và nó không xóa hoạt hình xuyên tâm đẹp mắt trên các thiết bị API 21:

ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB
button.setSupportBackgroundTintList(colorStateList);

Bởi vì button.setBackground(...)và button.getBackground().mutate().setColorFilter(...)không thay đổi màu nút trên API 15 và 16 giống như trên API 21.

Câu trả lời của @ ianhanniballake hoàn toàn chính xác và đơn giản. Nhưng tôi phải mất vài ngày để hiểu. Đối với một người không hiểu câu trả lời của mình, đây là chi tiết thực hiện

<Button
        android:id="@+id/btn"
        style="@style/MaterialButton"
        ... />


<style name="MaterialButton" parent="Widget.AppCompat.Button.Colored">
    <item name="android:theme">@style/Theme.MaterialButton</item>
   ...
</style>


<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

=== Hoặc ===

<Button
        android:id="@+id/btn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:theme="@style/Theme.MaterialButton" />

<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

Tôi đã sử dụng nềnTint và foreground:

<Button
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:backgroundTint="@color/colorAccent"
    android:foreground="?android:attr/selectableItemBackground"
    android:textColor="@android:color/white"
    android:textSize="10sp"/>

Tôi đã đến bài viết này để tìm cách để có một màu nền của ListViewMục của tôi , nhưng vẫn giữ được gợn.

Tôi chỉ cần thêm màu của mình làm nền và selectableItemBackground làm nền trước:

<style name="my_list_item">
    <item name="android:background">@color/white</item>
    <item name="android:foreground">?attr/selectableItemBackground</item>
    <item name="android:layout_height">@dimen/my_list_item_height</item>
</style>

và nó hoạt động như một lá bùa. Tôi đoán kỹ thuật tương tự cũng có thể được sử dụng cho các nút. Chúc may mắn :)

Sử dụng backgroundTintthay vìbackground

Nếu bạn quan tâm đến ImageButton, bạn có thể thử điều đơn giản này:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

v22.1của appcompat-v7giới thiệu một số khả năng mới. Bây giờ có thể chỉ định một chủ đề cụ thể cho một chế độ xem.

Không sử dụng ứng dụng: chủ đề để tạo kiểu Thanh công cụ. Giờ đây, bạn có thể sử dụng android: theme cho thanh công cụ trên tất cả các thiết bị API cấp 7 trở lên và android: hỗ trợ chủ đề cho tất cả các tiện ích trên API cấp 11 trở lên.

Vì vậy, thay vì đặt màu mong muốn trong một chủ đề toàn cầu, chúng tôi tạo một màu mới và chỉ gán nó cho Button

Thí dụ:

<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorButtonNormal">@color/myColor</item>
</style>

Và sử dụng phong cách này làm chủ đề của bạn Button

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 android:theme="@style/MyColorButton"/>

Nếu bạn ổn với việc sử dụng thư viện của bên thứ ba, hãy xem traex / RippleEffect . Nó cho phép bạn thêm hiệu ứng Ripple vào BẤT K view chế độ xem nào chỉ bằng một vài dòng mã. Bạn chỉ cần bọc, trong tệp bố cục xml của bạn, phần tử bạn muốn có hiệu ứng gợn với một com.andexert.library.RippleViewthùng chứa.

Là một phần thưởng bổ sung, nó yêu cầu Min SDK 9 để bạn có thể có sự thống nhất về thiết kế trên các phiên bản HĐH.

Dưới đây là một ví dụ được lấy từ repo GitHub của thư viện:

<com.andexert.library.RippleView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rv_centered="true">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@android:drawable/ic_menu_edit"
        android:background="@android:color/holo_blue_dark"/> 

</com.andexert.library.RippleView>

Bạn có thể thay đổi màu gợn bằng cách thêm thuộc tính này vào phần tử RippleView: app:rv_color="@color/my_fancy_ripple_color

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#fff"
    android:textColor="#000"
    android:text="test"/>

Sử dụng

xmlns:app="http://schemas.android.com/apk/res-auto"

và màu sắc sẽ được chấp nhận trên pre-lolipop

Có hai cách tiếp cận được giải thích trong hướng dẫn tuyệt vời là Alex Lockwood: http://www.androiddesignpotypes.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html :

Cách tiếp cận # 1: Sửa đổi màu nền của nút w / ThemeOverlay

<!-- res/values/themes.xml -->
<style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/googred500</item>
</style>

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RedButtonLightTheme"/>

Cách tiếp cận # 2: Đặt màu nền của AppCompatButton

<!-- res/color/btn_colored_background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Disabled state. -->
    <item android:state_enabled="false"
          android:color="?attr/colorButtonNormal"
          android:alpha="?android:attr/disabledAlpha"/>

    <!-- Enabled state. -->
    <item android:color="?attr/colorAccent"/>

</selector>

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/btn_colored_background_tint"/>

Lập trình áp dụng màu sắc:

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {

    ColorStateList colorStateListRipple = new ColorStateList(
            new int[][] {{0}},
            new int[] {Color.WHITE} // ripple color
            );

    RippleDrawable rippleDrawable = (RippleDrawable) myButton.getBackground();
    rippleDrawable.setColor(colorStateListRipple);
    myButton.setBackground(rippleDrawable); // applying the ripple color
}

ColorStateList colorStateList = new ColorStateList(
        new int[][]{
                new int[]{android.R.attr.state_pressed}, // when pressed
                new int[]{android.R.attr.state_enabled}, // normal state color
                new int[]{} // normal state color
        },
        new int[]{
                Color.CYAN, // when pressed
                Color.RED, // normal state color
                Color.RED // normal state color
        }
);

ViewCompat.setBackgroundTintList(myButton, colorStateList); // applying the state colors

Tôi đã thử điều này:

android:backgroundTint:"@color/mycolor"

thay vì thay đổi thuộc tính nền. Điều này không loại bỏ hiệu ứng vật liệu.