1. ホーム
  2. android

[解決済み] Material Designでアラートダイアログのスタイルが決まらない

2022-05-10 11:11:33

質問

appCompat のマテリアル デザインをアプリに追加したところ、アラート ダイアログが私のプライマリ、プライマリ ダーク、またはアクセント カラーを使用していないようです。

以下は私のベース スタイルです。

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
</style>

私の理解では、ダイアログのボタンのテキストもこれらの色を使用するはずです。私の理解は間違っているのでしょうか、それとも何かもっと必要なことがあるのでしょうか?


解答です。

マークされた回答で、正しい道を歩むことができました。

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:actionModeBackground">@color/apptheme_color_dark</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
    <item name="sdlDialogStyle">@style/DialogStyleLight</item>
    <item name="android:seekBarStyle">@style/SeekBarNavyTheme</item>
</style>

<style name="StyledDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
</style>

どのように解決するのですか?

2019年8月に更新されたアンドロイド用マテリアルコンポーネントライブラリです。

と共に、新しい Android ライブラリ用マテリアルコンポーネント を使用すると、新しい com.google.android.material.dialog.MaterialAlertDialogBuilder クラスを使用します。 androidx.appcompat.AlertDialog.Builder クラスを拡張し、最新の Material Design 仕様をサポートします。

こんなのでいいじゃん。

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

を拡張して色をカスタマイズすることができます。 ThemeOverlay.MaterialComponents.MaterialAlertDialog のスタイルになります。

  <style name="CustomMaterialDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
     <!-- Background Color-->
     <item name="android:background">#006db3</item>
     <!-- Text Color for title and message -->
     <item name="colorOnSurface">@color/secondaryColor</item>
     <!-- Text Color for buttons -->
     <item name="colorPrimary">@color/white</item> 
     ....
  </style>  

カスタムスタイルを適用するには を適用するには、コンストラクタを使用するだけです。

new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)

への ボタン、タイトル、本文をカスタマイズします。 この記事をチェックする をご覧ください。

を変更することもできます。 グローバルに を変更することもできます。

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialAlertDialogTheme">@style/CustomMaterialDialog</item>
 </style>


サポートライブラリとAPPCOMPAT THEMEを使用します。

新しい AppCompat v22.1 を使用すると、新しい android.support.v7.app.AlertDialogを使用することができます。 .

このようなコードを使うだけです。

import android.support.v7.app.AlertDialog

AlertDialog.Builder builder =
       new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
builder.setTitle("Dialog");
builder.setMessage("Lorem ipsum dolor ....");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();

そして、このようなスタイルを使います。

<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#FFCC00</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:background">#5fa3d0</item>
    </style>

それ以外の場合は、現在のテーマで定義することができます。

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- your style -->
    <item name="alertDialogTheme">@style/AppCompatAlertDialogStyle</item>
</style>

と書いて、コードの中に

 import android.support.v7.app.AlertDialog

    AlertDialog.Builder builder =
           new AlertDialog.Builder(this);

KitkatでのAlertDialogを紹介します。