MaterialComponents 테마 경고 대화 상자 버튼

83

최근에 지원 라이브러리에서 com.google.android.material : material : 1.0.0으로 전환했습니다.

하지만 이제 문제가 있습니다.이 페이지에는 https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md 메모가 있습니다.

참고 : 재료 구성 요소 테마를 사용하면 기본 구성 요소를 해당 재료 구성 요소로 대체하는 사용자 정의보기 팽창기를 사용할 수 있습니다. 현재는 Button XML 구성 요소 만 MaterialButton으로 대체됩니다.

그리고 내가 사용하는 테마 

Theme.MaterialComponents.Light.NoActionBar

그 노트에서 정확히 말한대로, AlertDialog Buttons를 MaterialButtons로 대체하지만 문제는 기본적으로 MaterialButtons가 배경색이며 이제 버튼이 다음과 같이 보입니다. 여기에 이미지 설명 입력

다시 경계선과 배경을 없애려면 어떻게해야합니까?

추신 : 경고 작성기를 사용하여 경고 대화 상자를 만들고 있습니다.

android.app.AlertDialog.Builder
android  material-design  android-alertdialog  android-styles  material-components-android 
— 안타 나스 세피 카스
소스
새로운 머티리얼 UI 스타일로 AppCompat 테마 콘텐츠를 원하는 경우 Bridge 테마를 사용할 수 있습니다. 문제를 해결할 수 있습니다.이 답변을 참조하십시오. stackoverflow.com/a/52401497/10271334
— Jeel Vankhede

답변:

114

이 문제의 원인을 파악했습니다. 다른 AlertDialog 클래스를 사용해야합니다.

androidx.appcompat.app.AlertDialog

내가 이것을 전환했을 때 모든 것이 예상대로 작동하기 시작했습니다. 해결책을 찾은 곳은 다음과 같습니다.

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

— 안타 나스 세피 카스
소스
2
Android Studio의 'Migrate to AndroidX'옵션 / 기능을 사용하여 코드를 androidx로 마이그레이션했지만이 라이브러리는 AndroidX로 자동 업데이트되지 않았습니다. 이 문제는 대답에서 알 수 있듯이 가져 오기를 수동으로 업데이트했을 때 해결되었습니다
— sushrut619
1
날 구해줘! 감사!
— Mateus
모든 영웅이 망토를 입는 것은 아닙니다!
— dave o grady
자정 직전에 큰 감사를드립니다. 당신은 저에게 한 시간의 수면을 구했습니다.
— Nantoka
76

사용하는 경우 com.google.android.material:material:1.0.0그리고 androidx.appcompat.app.AlertDialog당신은 각각의 버튼을 사용자 정의 할 수 있습니다 buttonBar사용하여 Widget.MaterialComponents.Button.TextButton부모로서.

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

기본 레이아웃을 사용하거나 builder.setView(R.layout.my_dialog)

스타일 :

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

스크린 샷

— Rob
소스
1
이것은 대화의 스타일을 지정하려고 할 때 찾고 있던 것입니다. 내가 찾은 모든 답변은 AndroidX를 사용하지 않았습니다.
— LeonardoSibela
2
textAllCaps를 false로 설정하는 이유를 잘 모르겠습니다. 일반적으로 대화 상자에서 true로 설정되는 것을 확인합니다 (구글의 크레인이라는 머티리얼 디자인 예제 만 예외)
— LeonardoSibela
5
나는 이것을 50 번 찬성 할 수 있으면 좋겠다. 나는 어리석은 대화를 색칠하기 위해 2 시간을 보냈다. MaterialAlertDialogBuilder대신 사용해야 합니다.
— gMale 2019-06-12
1
@gMale 님의 댓글로 시간이 절약되었습니다.
— funct7 '1910.04.08
1
정말 도움이 돼 감사합니다!
— Grisgram
21

Material Components 라이브러리를 사용하는 경우를 사용하는 가장 좋은 방법 AlertDialog은 MaterialAlertDialogBuilder.

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

기본 결과입니다.

여기에 이미지 설명 입력

버튼에 다른 스타일이나 색상을 적용하려면이 답변을 확인할 수 있습니다 .

— 가브리엘 마리오 티
소스
교체 AlertDialog.Builder와 함께하는 MaterialAlertDialogBuilder버튼의 색상을 변경하지 않았다. 변경하려면 아래 답변을 참조하십시오 theme.
— CoolMind
@CoolMind 문제는 버튼 색상을 변경하는 방법이 아닙니다.
— Gabriele Mariotti
13

위의 답변을 테스트했습니다. 좋은 아이디어를 얻었지만 제 경우에는 효과가 없었습니다. 그래서 이것이 제 대답입니다.

  1. android:theme="@style/AppMaterialTheme"애플리케이션 또는 활동 아래에 매니페스트 파일 이 있는지 확인하십시오 .

  2. Styles.xml 파일을 열고 다음을 기반으로 변경하십시오.

    <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. 활동이 테마를 적용하므로 AlertDialog에 테마를 적용 할 필요가 없습니다. 따라서 일반적으로 대화 상자를 만듭니다.

여기에 이미지 설명 입력

결과는 될 것입니다.

여기에 이미지 설명 입력

— 헤삼
소스
왜 "buttonBarPositiveButtonStyle"이 작동하지 않는지 모르겠지만 "android : buttonBarPositiveButtonStyle"이 제대로 작동합니다.
— LukaszTaraszka
스타일이 PositiveButton에 적용되지 않습니다. 네거티브와 동일합니다.
— LukaszTaraszka
11

첫째, Material Theme 를 사용하는 경우 MaterialAlertDialog 를 사용하는 것이 좋습니다 .

자세한 내용은 여기에서 읽을 수 있습니다. – Material.io → 테마 대화 상자

여기에 이미지 설명 입력

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

 

이것은 MaterialAlertDialog 액션의 layout.xml입니다. 보시다시피 3 개의 버튼이 있으며 각각 고유 한 스타일이 있습니다. 그래서, 당신이 그들을 바꿀 수있는 방법이 있습니다.

1 단계 : 기본 MaterialAlertDialog 테마 를 변경하고 싶다고 Android에 알립니다 .

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

2 단계 : 특정 버튼 스타일을 변경하고 싶다고 Android에 알립니다. buttonBarNeutralButtonStyle, buttonBarNegativeButtonStyle또는buttonBarPositiveButtonStyle

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

3 단계 : 사용자 지정 스타일 정의

<style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">#FF0000</item>
</style>
— 비소
소스
6

https://issuetracker.google.com/issues/116861837#comment9에서 MaterialComponents를 사용하여 이에 대한 다른 솔루션을 찾았습니다.

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

나에게 여전히 "의도 된 행동"은 아니지만.

— 울타리
소스
5

을 사용하지 않으려면 androidx.appcompat.app.AlertDialog대화 상자 버튼의 스타일을 재정의하면됩니다.

style.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"/>
— 실뱅 라가 슈
소스
4

com.android.support:design:28.0.0라이브러리를 사용하는 경우 android.support.v7.app.AlertDialog예상대로 작동합니다.

— 타 목신
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.