Các nút hộp thoại cảnh báo chủ đề MaterialComponents

81

Gần đây, tôi đã chuyển từ thư viện hỗ trợ sang com.google.android.material: material: 1.0.0

Nhưng bây giờ tôi gặp sự cố, trong trang này có ghi chú https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

Lưu ý: Sử dụng chủ đề Thành phần Vật liệu sẽ bật chế độ xem tùy chỉnh để thay thế các thành phần mặc định bằng các thành phần Vật liệu của chúng. Hiện tại, điều này chỉ thay thế các thành phần Nút XML bằng MaterialButton.

Và chủ đề tôi đang sử dụng 

Theme.MaterialComponents.Light.NoActionBar

thực hiện chính xác những gì nó nói trong ghi chú đó, nó thay thế AlertDialog Buttons thành MaterialButtons nhưng vấn đề là theo mặc định MaterialButtons có màu nền và bây giờ các nút trông như thế này: nhập mô tả hình ảnh ở đây

Làm thế nào tôi có thể biến chúng trở lại không biên giới và không nền?

Tái bút Tôi đang sử dụng trình tạo cảnh báo để tạo hộp thoại cảnh báo:

android.app.AlertDialog.Builder
android  material-design  android-alertdialog  android-styles  material-components-android 
— antanas_sepikas
nguồn
Bạn có thể sử dụng theme Cầu nếu bạn muốn AppCompat nội dung chủ đề với một số phong cách Chất liệu UI mới, nó có thể giải quyết vấn đề của bạn, tham khảo câu trả lời này của tôi: stackoverflow.com/a/52401497/10271334
— Jeel Vankhede

Câu trả lời:

112

Tôi đã tìm ra nguyên nhân gây ra vấn đề này. Tôi cần sử dụng lớp AlertDialog khác:

androidx.appcompat.app.AlertDialog

Khi tôi chuyển sang điều này, mọi thứ bắt đầu hoạt động như mong đợi. Đây là nơi tôi tìm thấy giải pháp:

https://github.com/material-components/material-components-android/issues/162

— antanas_sepikas
nguồn
2
Tôi đã di chuyển mã của mình sang androidx bằng cách sử dụng tùy chọn / tính năng 'Di chuyển sang AndroidX' của Android Studio nhưng thư viện này không được cập nhật tự động lên AndroidX. Vấn đề này đối với tôi đã được giải quyết khi tôi cập nhật việc nhập khẩu thủ công như câu trả lời gợi ý
— sushrut619
1
Bạn cứu tôi với! Cảm ơn!
— Mateus
Không phải tất cả các anh hùng mặc áo choàng!
— dave o grady
Ngắn trước nửa đêm một lời cảm ơn lớn. Bạn đã tiết kiệm cho tôi một giờ ngủ.
— Nantoka
75

Khi sử dụng com.google.android.material:material:1.0.0và androidx.appcompat.app.AlertDialogbạn có thể tùy chỉnh từng nút trong buttonBarbằng cách sử dụng Widget.MaterialComponents.Button.TextButtonnhư cha mẹ.

val builder: AlertDialog.Builder = AlertDialog.Builder(ContextThemeWrapper(context, R.style.AlertDialogTheme))

Sử dụng bố cục mặc định hoặc thêm một tùy chỉnh bằng builder.setView(R.layout.my_dialog)

Theo phong cách của bạn:

<style name="AlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
    <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
    <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
</style>

<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="backgroundTint">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">false</item>
</style>

<style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="backgroundTint">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/gray_dark</item>
    <item name="android:textSize">14sp</item>
</style>

Ảnh chụp màn hình

— Rob
nguồn
1
Đây là những gì tôi đang tìm kiếm khi cố gắng tạo kiểu cho các hộp thoại của mình. Tất cả các câu trả lời tôi tìm thấy đều không sử dụng AndroidX.
— LeonardoSibela
2
Tôi không chắc tại sao bạn lại thiết lập textAllCaps thành false. Tôi thường thấy nó được đặt thành true trên các hộp thoại (ngoại lệ duy nhất là một ví dụ về Material Design từ google có tên Crane)
— LeonardoSibela
5
Tôi ước tôi có thể ủng hộ điều này 50 lần. Tôi đã dành như hai giờ để chỉ tô màu những hộp thoại ngu ngốc. Lưu ý rằng bạn cũng nên sử dụng MaterialAlertDialogBuilderthay thế.
— gMale
1
Nhận xét của @gMale đã tiết kiệm thời gian cho tôi.
— funct7
1
Cảm ơn bạn điều này thực sự hữu ích!
— Grisgram
19

Nếu bạn đang sử dụng thư viện Thành phần Vật liệu, cách tốt nhất để có thư viện AlertDialoglà sử dụng MaterialAlertDialogBuilder.

new MaterialAlertDialogBuilder(context)
            .setTitle("Dialog")
            .setMessage("Lorem ipsum dolor ....")
            .setPositiveButton("Ok", /* listener = */ null)
            .setNegativeButton("Cancel", /* listener = */ null)
            .show();

Đây là kết quả mặc định:

nhập mô tả hình ảnh ở đây

Nếu bạn cũng muốn áp dụng một kiểu hoặc màu khác cho các nút, bạn có thể chọn câu trả lời này .

— Gabriele Mariotti
nguồn
Thay thế AlertDialog.Builderbằng MaterialAlertDialogBuilderkhông thay đổi màu của các nút. Xem câu trả lời bên dưới để thay đổi theme.
— CoolMind
@CoolMind Câu hỏi không phải là làm thế nào để thay đổi màu của nút.
— Gabriele Mariotti
13

Tôi đã kiểm tra các câu trả lời trên. Mặc dù tôi có một ý tưởng hay, nhưng không có cách nào phù hợp với trường hợp của tôi. Vì vậy, đây là câu trả lời của tôi.

  1. Đảm bảo có android:theme="@style/AppMaterialTheme"trong tệp kê khai của bạn trong Ứng dụng hoặc Hoạt động.

  2. Mở tệp Styles.xml của bạn và thay đổi nó dựa trên những điều sau.

    <style name="AppMaterialTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primaryBlue</item>
    <item name="colorPrimaryDark">@color/primaryBlue</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlActivated">@color/primaryBlue</item>
    <item name="colorControlHighlight">@color/colorAccent_main</item>
    <item name="colorButtonNormal">@color/white</item>

    <item name="materialAlertDialogTheme">@style/AlertDialogMaterialTheme</item>
</style>

<style name="AlertDialogMaterialTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
    <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Negative</item>
</style>

<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:fillColor">@color/color_0054BB</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
    <item name="rippleColor">@color/colorAccent_main</item>
</style>

<style name="Alert.Button.Negative" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="strokeColor">@color/color_0054BB</item>
    <item name="android:textColor">@color/color_0054BB</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
    <item name="android:layout_marginEnd">8dp</item>
    <item name="rippleColor">@color/colorAccent_main</item>
</style>

  3. Bạn sẽ không cần phải áp dụng chủ đề cho AlertDialog của mình vì Hoạt động của bạn áp dụng chủ đề cho nó. Vì vậy, hãy tạo hộp thoại một cách bình thường.

nhập mô tả hình ảnh ở đây

Kết quả sẽ là.

nhập mô tả hình ảnh ở đây

— Hesam
nguồn
Tôi không biết tại sao, bởi "buttonBarPositiveButtonStyle" không hoạt động với tôi nhưng "android: buttonBarPositiveButtonStyle" lại hoạt động bình thường.
— LukaszTaraszka
Kiểu này không áp dụng cho PositiveButton. Tương tự với Âm bản.
— LukaszTaraszka
11

Đầu tiên, tốt hơn là sử dụng MaterialAlertDialog nếu bạn đang sử dụng Material Theme.

Bạn có thể đọc thêm tại đây - Hộp thoại Material.io → Chủ đề

nhập mô tả hình ảnh ở đây

MaterialAlertDialogBuilder(context)
            .setTitle(R.string.confirm)
            .setMessage(R.string.logout)
            .setPositiveButton(R.string.logout_alert_positive) { _, _ -> activity?.logout() }
            .setNegativeButton(R.string.never_mind, null)
            .show()

 

Đây là layout.xml của các hành động MaterialAlertDialog. Như bạn có thể thấy, có 3 nút và mỗi nút có phong cách riêng. Vì vậy, đây là cách bạn có thể thay đổi chúng.

Bước 1: Cho Android biết rằng bạn muốn thay đổi chủ đề MaterialAlertDialog mặc định .

<style name="Base.AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="materialAlertDialogTheme">@style/AlertDialog</item>
    ...
</style>

Bước 2: Cho Android biết rằng bạn muốn thay đổi một kiểu nút cụ thể. buttonBarNeutralButtonStyle, buttonBarNegativeButtonStylehoặcbuttonBarPositiveButtonStyle

<style name="AlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
</style>

Bước 3: Xác định phong cách tùy chỉnh của bạn

<style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">#FF0000</item>
</style>
— đốt cháy
nguồn
6

Đã tìm thấy một giải pháp khác cho vấn đề này với việc sử dụng MaterialComponents tại đây: https://issuetracker.google.com/issues/116861837#comment9

<style name="Theme.Custom.Material.Alert.Dialog.Light" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="materialButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>
</style>

<style name="Theme.Custom.Material.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:dialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
    <item name="android:alertDialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
  ....
</style>

Mặc dù nó vẫn không phải là "hành vi dự định" đối với tôi.

— rào rào
nguồn
5

Nếu không muốn sử dụng androidx.appcompat.app.AlertDialog, bạn chỉ cần xác định lại kiểu của các nút hộp thoại:

Theo phong cách của bạn.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   ...
   <item name="android:buttonBarButtonStyle">@style/DialogButton</item>
   ...
</style>

<style name="DialogButton" parent="Widget.MaterialComponents.Button.TextButton"/>
— Sylvain Lagache
nguồn
3

Nếu bạn đang sử dụng com.android.support:design:28.0.0thư viện, việc sử dụng android.support.v7.app.AlertDialoghoạt động như mong đợi.

— Tamoxin
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.