Tôi bối rối về các kiểu nút cho thiết kế vật liệu. Tôi muốn nhận các nút được nâng lên đầy màu sắc như trong liên kết đính kèm., Như các nút "buộc dừng" và "gỡ cài đặt" được thấy trong phần sử dụng. Có những kiểu có sẵn hay tôi cần xác định chúng?

http://www.google.com/design/spec/components/buttons.html#buttons-usage

Tôi không thể tìm thấy các kiểu nút mặc định.

Thí dụ:

 <Button style="@style/PrimaryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate"
    android:id="@+id/button3"
    android:layout_below="@+id/editText5"
    android:layout_alignEnd="@+id/editText5"
    android:enabled="true" />

Nếu tôi cố gắng thay đổi màu nền của nút bằng cách thêm

    android:background="@color/primary"

tất cả các kiểu biến mất, chẳng hạn như hình động cảm ứng, bóng, góc tròn, v.v.

Tôi sẽ thêm câu trả lời của mình vì tôi không sử dụng bất kỳ câu trả lời nào khác được cung cấp.

Với Thư viện hỗ trợ v7, tất cả các kiểu thực sự đã được xác định và sẵn sàng để sử dụng, đối với các nút tiêu chuẩn, tất cả các kiểu này đều có sẵn:

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

Widget.AppCompat.Button:

Widget.AppCompat.Button.Colored:

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored:

Để trả lời câu hỏi, phong cách sử dụng là do đó

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

Cách đổi màu

Đối với toàn bộ ứng dụng:

Màu sắc của tất cả các điều khiển UI (không chỉ các nút, mà cả các nút hành động nổi, hộp kiểm, v.v.) được quản lý bởi thuộc tính colorAccentnhư được giải thích ở đây . Bạn có thể sửa đổi phong cách này và áp dụng màu của riêng bạn trong định nghĩa chủ đề của bạn:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

Đối với một nút cụ thể:

Nếu bạn cần thay đổi kiểu của một nút cụ thể, bạn có thể xác định kiểu mới, kế thừa một trong các kiểu cha được mô tả ở trên. Trong ví dụ dưới đây, tôi chỉ thay đổi màu nền và phông chữ:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/Red</item>
    <item name="android:textColor">@color/White</item>
</style>

Sau đó, bạn chỉ cần áp dụng kiểu mới này trên nút với:

android:theme="@style/AppTheme.Button"

Để đặt thiết kế nút mặc định trong bố cục, hãy thêm dòng này vào chủ đề Styles.xml:

<item name="buttonStyle">@style/btn</item>

nơi @style/btnlà chủ đề nút của bạn. Điều này đặt kiểu nút cho tất cả các nút trong bố cục với một chủ đề cụ thể

Giải pháp đơn giản nhất

Bước 1: Sử dụng thư viện hỗ trợ mới nhất

compile 'com.android.support:appcompat-v7:25.2.0'

Bước 2: Sử dụng AppCompatActivity làm lớp Hoạt động chính của bạn

public class MainActivity extends AppCompatActivity

Bước 3: Sử dụng không gian tên ứng dụng trong tệp XML bố trí của bạn

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

Bước 4: Sử dụng AppCompatButton thay vì Nút

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

Nếu tôi hiểu bạn một cách chính xác, bạn muốn làm một cái gì đó như thế này:

Trong trường hợp như vậy, nó chỉ đủ để sử dụng:

<item name="android:colorButtonNormal">#2196f3</item>

Hoặc cho API dưới 21:

<item name="colorButtonNormal">#2196f3</item>

Ngoài việc sử dụng tài liệu hướng dẫn chủ đề .

Biến thể hoạt hình là đây .

Đây là cách tôi có được những gì tôi muốn.

Đầu tiên, tạo một nút (trong styles.xml):

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

Ripple và nền cho nút, như một drawable primary_round.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Điều này đã thêm hiệu ứng gợn mà tôi đang tìm kiếm.

Với việc phát hành ổn định các Thành phần Vật liệu Android vào tháng 11 năm 2018, Google đã chuyển các thành phần vật liệu từ không gian tên android.support.designsang com.google.android.material.
Thư viện Thành phần Vật liệu thay thế cho Thư viện Hỗ trợ Thiết kế của Android.

Thêm phụ thuộc vào build.gradle:

dependencies { implementation ‘com.google.android.material:material:1.0.0’ }

Sau đó thêm MaterialButtonvào bố cục của bạn:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

Bạn có thể kiểm tra tài liệu đầy đủ ở đây và API tại đây .

Để thay đổi màu nền bạn có 2 tùy chọn.

1. Sử dụng backgroundTintthuộc tính.

Cái gì đó như:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>

2. Nó sẽ là lựa chọn tốt nhất theo ý kiến ​​của tôi. Nếu bạn muốn ghi đè một số thuộc tính chủ đề từ kiểu mặc định thì bạn có thể sử dụng materialThemeOverlaythuộc tính mới .

Cái gì đó như:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

Tùy chọn # 2 yêu cầu 'com.google.android.material:material:1.1.0'.

Thư viện hỗ trợ OLD:

Với Thư viện hỗ trợ mới 28.0.0 , Thư viện thiết kế hiện chứa MaterialButton.

Bạn có thể thêm nút này vào tập tin bố trí của chúng tôi với:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

Theo mặc định, lớp này sẽ sử dụng màu nhấn của chủ đề của bạn cho các nút được tô màu nền cùng với màu trắng cho màu văn bản của nút.

Bạn có thể tùy chỉnh nút với các thuộc tính sau:

• app:rippleColor: Màu được sử dụng cho hiệu ứng gợn nút

• app:backgroundTint: Được sử dụng để áp dụng một tông màu cho nền của nút. Nếu bạn muốn thay đổi màu nền của nút, hãy sử dụng thuộc tính này thay vì nền.

• app:strokeColor: Màu được sử dụng cho hành trình nút

• app:strokeWidth: Chiều rộng được sử dụng cho hành trình nút
• app:cornerRadius: Được sử dụng để xác định bán kính được sử dụng cho các góc của nút

Dưới đây là một mẫu sẽ giúp áp dụng kiểu nút một cách nhất quán trên ứng dụng của bạn.

Đây là một Theme mẫu tôi đã sử dụng với các kiểu cụ thể ..

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

Đây là cách tôi xác định hình dạng và hiệu ứng nút trong thư mục res / drawable-v21 ...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Góc 2dp là để giữ cho nó phù hợp với chủ đề Vật liệu.

Bên cạnh android.support.design.button.MaterialButton( được đề cập bởi Gabriele Mariotti ),

Ngoài ra còn có một Buttontiện ích khác được gọi là com.google.android.material.button.MaterialButtoncó các kiểu khác nhau và mở rộng từ AppCompatButton:

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Đầy, nâng cao Button(mặc định) :

style="@style/Widget.MaterialComponents.Button"

Đầy, không liên quanButton :

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

Văn bảnButton :

style="@style/Widget.MaterialComponents.Button.TextButton"

Biểu tượngButton :

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

Một văn bản Buttoncó biểu tượng ::

Đọc: https : // m Material.io/develop/android/components/m vật liệu-nút /

Một lớp tiện lợi để tạo nút Vật liệu mới.

Lớp này cung cấp các kiểu Vật liệu được cập nhật cho nút trong hàm tạo. Các widget sẽ hiển thị các kiểu Vật liệu mặc định chính xác mà không cần sử dụng cờ kiểu.

Tôi đã thử rất nhiều câu trả lời & libs của bên thứ ba, nhưng không ai giữ được đường viền và tăng hiệu ứng lên kẹo mút trong khi có hiệu ứng gợn trên kẹo mút mà không có nhược điểm. Đây là giải pháp cuối cùng của tôi kết hợp một số câu trả lời (viền / nâng lên không được hiển thị tốt trên gifs do độ sâu màu thang độ xám):

Lollipop

Pre-kẹo

xây dựng. nâng cấp

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-v21 / btn_bg.xml

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

drawable / btn_bg.xml

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

Hoạt động của onCreate

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });

1) Bạn có thể tạo nút góc tròn bằng cách xác định xml drawable và bạn có thể tăng hoặc giảm bán kính để tăng hoặc giảm độ tròn của góc nút. Đặt xml drawable này làm nền của nút.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

2) Để thay đổi hoạt ảnh chuyển tiếp bóng và bóng mặc định giữa các trạng thái nút, bạn cần xác định bộ chọn và áp dụng nó cho nút bằng thuộc tính android: stateListAnimator. Để tham khảo tùy chỉnh nút hoàn chỉnh: http://www.zoftino.com/android-button

Tôi vừa tạo một thư viện Android, cho phép bạn dễ dàng sửa đổi màu nút và màu gợn

https://github.com/xgc1986/RípButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

Bạn không cần tạo kiểu cho mỗi nút bạn muốn có màu khác nhau, cho phép bạn tùy chỉnh màu ngẫu nhiên

bạn có thể cung cấp hàng không cho chế độ xem bằng cách thêm trục z vào nó và có thể có bóng mặc định cho nó. tính năng này đã được cung cấp trong bản xem trước L và sẽ có sẵn sau khi phát hành. Bây giờ bạn chỉ cần thêm một hình ảnh, giao diện này cho nền nút