[android] MaterialComponents 테마 경고 대화 상자 버튼

최근에 지원 라이브러리에서 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



답변

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

androidx.appcompat.app.AlertDialog

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

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


답변

사용하는 경우 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>

스크린 샷


답변

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

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

기본 결과입니다.

여기에 이미지 설명 입력

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


답변

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

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

여기에 이미지 설명 입력

결과는 될 것입니다.

여기에 이미지 설명 입력


답변

첫째, 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>


답변

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>

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


답변

을 사용하지 않으려면 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"/>