如何正确更改材料设计的对话框正面按钮背景

时间:2016-05-02 06:14:23

标签: android

我有以下对话框

enter image description here

使用以下代码

创建
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Random random = new Random();
    // 0 or 1.
    final int value = random.nextInt(2);
    final int title = R.string.we_love_you_0; 
    final int content = R.string.rate_us_with_5_stars_review_0;

    final AlertDialog dialog = new AlertDialog.Builder(this.getActivity())
    .setTitle(title)
    .setMessage(content)
    // Add action buttons
    .setPositiveButton(R.string.rate_5_stars, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int id) {
        }
    })
    .setNegativeButton(R.string.no, new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int id) {
        }
    })
    .setNeutralButton(R.string.later, new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int id) {
        }
    })
    .create();

    dialog.setCanceledOnTouchOutside(false);

    return dialog;
}

因为,我们希望吸引用户注意正面按钮(RATE 5 STARS)。我们倾向于

  • 有一个白色按钮文字颜色
  • 有蓝色按钮背景颜色

我们在返回dialog

之前添加以下代码
    dialog.setOnShowListener(new DialogInterface.OnShowListener() {
         @Override
         public void onShow(DialogInterface d) {
             Button positiveButton = dialog.getButton(AlertDialog.BUTTON_POSITIVE);
             positiveButton.setTextColor(rateAppDialogPositiveButtonTextColor);
             positiveButton.setBackgroundColor(rateAppDialogPositiveButtonBackgroundColor);
         }
     });

我们得到以下结果

enter image description here

它没有实现我们想要的目标

  • 正面按钮丢失了默认边距和填充信息。
  • 正按钮按下了波纹选择器的行为。

这是比较的方式,按下普通按钮。在我们的例子中,当我们按下正面按钮时,没有视觉变化。

enter image description here

是否有正确的方法来更改材质设计的对话框正面按钮背景,而不会丢失其默认边距,填充和纹波选择器行为?

3 个答案:

答案 0 :(得分:1)

以这种方式创建自定义对话框,以便为其指定颜色。

只是一个简单的!在Java类的任何地方创建一个对话框方法:

public void openDialog() {
    final Dialog dialog = new Dialog(context); // Context, this, etc.
    dialog.setContentView(R.layout.dialog_demo);
    dialog.setTitle(R.string.dialog_title);
    dialog.show();
}

现在创建布局XML dialog_demo.xml并创建您的UI /设计。以下是我为演示目的创建的示例:

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/textview1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#000000"
    android:text="We love you!"
    android:textStyle="bold"
    android:layout_marginLeft="10dp"
    android:textSize="16sp"/>
<TextView
    android:id="@+id/textview2"
    android:layout_below="@+id/textview1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="Can we assume that the feeling's mutual ?"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="30dp"
    android:textSize="16sp"/>
<TextView
    android:id="@+id/textview3"
    android:layout_below="@+id/textview2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="If you've been enjoying our app, we'd really appreciate it if you could leave us a nice revire in the market."
    android:layout_marginLeft="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="30dp"
    android:textSize="16sp"/>

<TextView
    android:id="@+id/textview4"
    android:layout_below="@+id/textview3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="It'll really help us grow ?"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    android:textSize="16sp"/>

<Button
    android:id="@+id/dialog_later"
    android:layout_width="wrap_content"
    android:layout_below="@+id/textview4"
    android:layout_height="wrap_content"
    android:textColor="#0072BA"
    android:textSize="14sp"
    android:textStyle="bold"
    android:layout_marginTop="10dp"
    android:background="@android:color/transparent"
    android:text="LATER"/>

<Button
    android:id="@+id/dialog_no"
    android:layout_width="wrap_content"
    android:layout_below="@+id/textview4"
    android:layout_height="wrap_content"
    android:textColor="#0072BA"
    android:textSize="14sp"
    android:textStyle="bold"
    android:layout_marginTop="10dp"
   android:layout_marginLeft="60dp"
    android:background="@android:color/transparent"
    android:text="NO"/>

<Button
    android:id="@+id/dialog_ratestar"
    android:layout_width="wrap_content"
    android:layout_below="@+id/textview4"
    android:layout_height="wrap_content"
    android:textColor="#FFFFFF"
    android:textSize="14sp"
    android:textStyle="bold"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="100dp"
    android:background="#0072BA"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:padding="5dp"
    android:text="RATE 5 STARS *"/>

现在您可以从任何您喜欢的地方拨打openDialog() :)以下是上述代码的屏幕截图。

enter image description here

请注意,文字和颜色均来自strings.xmlcolors.xml。您可以定义自己的。

答案 1 :(得分:1)

通过引用https://stackoverflow.com/a/27505229/72437,我能够更改正面按钮的背景,而不会影响其默认边距,填充和选择器行为。

请注意,我们不使用colorButtonNormal,因为无法更改Java代码中的按钮样式。

dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Default insets (outer padding) around buttons -->
    <dimen name="button_inset_vertical_material">6dp</dimen>
    <dimen name="button_inset_horizontal_material">@dimen/control_inset_material</dimen>
    <!-- Default inner padding within buttons -->
    <dimen name="button_padding_vertical_material">@dimen/control_padding_material</dimen>
    <dimen name="button_padding_horizontal_material">8dp</dimen>
    <!-- Default insets (outer padding) around controls -->
    <dimen name="control_inset_material">4dp</dimen>
    <!-- Default inner padding within controls -->
    <dimen name="control_padding_material">4dp</dimen>
    <!-- Default rounded corner for controls -->
    <dimen name="control_corner_material">2dp</dimen>
</resources>

colors.xml

<color name="rate_app_dialog_positive_button_text_color_material_light">#ffffffff</color>
<color name="rate_app_dialog_positive_button_background_color_material_light">#ff0091ea</color>
<color name="rate_app_dialog_positive_button_pressed_background_color_material_light">#7f0091ea</color>

attrs.xml

<attr name="rateAppDialogPositiveButtonTextColor" format="color" />
<attr name="rateAppDialogPositiveButtonSelector" format="color" />

绘制-V21 / rate_app_dialog_positive_button_selector_for_ripple_material_light.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Used as the canonical button shape. -->

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="@dimen/button_inset_horizontal_material"
    android:insetTop="@dimen/button_inset_vertical_material"
    android:insetRight="@dimen/button_inset_horizontal_material"
    android:insetBottom="@dimen/button_inset_vertical_material">
    <shape android:shape="rectangle"
        android:tint="@color/rate_app_dialog_positive_button_background_color_material_light">
        <corners android:radius="@dimen/control_corner_material" />
        <solid android:color="#ffffffff" />
        <padding android:left="@dimen/button_padding_horizontal_material"
            android:top="@dimen/button_padding_vertical_material"
            android:right="@dimen/button_padding_horizontal_material"
            android:bottom="@dimen/button_padding_vertical_material" />
    </shape>
</inset>

绘制-V21 / rate_app_dialog_positive_button_selector_material_light.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- https://stackoverflow.com/questions/28484369/what-should-be-the-color-of-the-ripple-colorprimary-or-coloraccent-material-d -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_material_dark">
    <!-- @color/ripple_material_light -->
    <!-- @color/ripple_material_dark -->
    <item android:drawable="@drawable/rate_app_dialog_positive_button_selector_for_ripple_material_light" />
</ripple>

抽拉/ rate_app_dialog_positive_button_selector_material_light.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/rate_app_dialog_positive_button_pressed_background_color_material_light" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/rate_app_dialog_positive_button_pressed_background_color_material_light" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/rate_app_dialog_positive_button_background_color_material_light" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

的themes.xml

    <item name="rateAppDialogPositiveButtonTextColor">@color/rate_app_dialog_positive_button_text_color_material_light</item>
    <item name="rateAppDialogPositiveButtonSelector">@drawable/rate_app_dialog_positive_button_selector_material_light</item>

RateAppDialogFragment.java

    TypedValue typedValue = new TypedValue();
    Resources.Theme theme = this.getContext().getTheme();
    theme.resolveAttribute(R.attr.rateAppDialogPositiveButtonTextColor, typedValue, true);
    final int rateAppDialogPositiveButtonTextColor = typedValue.data;
    theme.resolveAttribute(R.attr.rateAppDialogPositiveButtonSelector, typedValue, true);
    final int rateAppDialogPositiveButtonSelectorResourceId = typedValue.resourceId;

    dialog.setOnShowListener(new DialogInterface.OnShowListener() {
         @Override
         public void onShow(DialogInterface d) {
             Button positiveButton = dialog.getButton(AlertDialog.BUTTON_POSITIVE);
             positiveButton.setTextColor(rateAppDialogPositiveButtonTextColor);
             positiveButton.setBackgroundResource(rateAppDialogPositiveButtonSelectorResourceId);
         }
     });

这适用于Android 4及以上版本。

enter image description here

答案 2 :(得分:0)

              MaterialAlertDialogBuilder(it, R.style.MaterialDialog)
                    .setTitle(R.string.title_logout)
                    .setMessage(R.string.msg_logout)
                    .setNegativeButton("Cancel", null)
                    .setPositiveButton("Ok") { _, _ ->
                        vm.logout()
                        val intent = Intent(context, AuthActivity::class.java)
                        startActivity(intent)
                        activity?.finish()
                    }
                    .create()
                    .show()

使用以上代码创建对话框。

<style name="MaterialDialog" parent="Theme.MaterialComponents.Light.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/MaterialDialog.ButtonStyle</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/MaterialDialog.ButtonStyle</item>
    <item name="android:textColorPrimary">@color/black</item>
    <item name="colorPrimary">@color/colorAccent</item>
    <item name="android:background">@color/white</item>
</style>




<style name="MaterialDialog.ButtonStyle">
    <item name="android:background">@color/white</item>
</style>

并在您的样式中添加以上样式