วิธีใช้และจัดรูปแบบ AlertDialog ใหม่จาก appCompat 22.1 ขึ้นไป


154

ฉันกำลังพยายามโยกย้ายจาก Android เริ่มต้นAlertDialogไปเป็นอุปกรณ์ใหม่ที่รวมอยู่ใน appCompat-22.1 เท่านี้ฉันเข้าใจว่าคุณต้องนำเข้าandroid.support.v7.app.AlertDialogแพ็คเกจเพื่อใช้งานเท่านั้น

แต่ฉันจะจัดสไตล์ได้อย่างไร ตัวอย่างเช่นเปลี่ยนสีปุ่มบวก / ลบสีชื่อสีข้อความและสีพื้นหลัง?

คำตอบ:


448

เมื่อสร้าง AlertDialogคุณสามารถตั้งค่ารูปแบบที่จะใช้

ตัวอย่าง - การสร้างไดอะล็อก

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

styles.xml - สไตล์ที่กำหนดเอง

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <!-- Used for the buttons -->
    <item name="colorAccent">#FFC107</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">#FFFFFF</item>
    <!-- Used for the background -->
    <item name="android:background">#4CAF50</item>
</style>

ผลลัพธ์

เตือนการแจ้งเตือนสไตล์

แก้ไข

ในการเปลี่ยนลักษณะที่ปรากฏของชื่อคุณสามารถทำสิ่งต่อไปนี้ เพิ่มสไตล์ใหม่ก่อน:

<style name="MyTitleTextStyle">
    <item name="android:textColor">#FFEB3B</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat.Title</item>
</style>

หลังจากนั้นเพียงอ้างอิงสไตล์นี้ในMyAlertDialogStyle:

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    ...
    <item name="android:windowTitleStyle">@style/MyTitleTextStyle</item>
</style>

วิธีนี้คุณสามารถกำหนดความแตกต่างtextColorให้กับข้อความผ่านandroid:textColorPrimaryและแตกต่างกันสำหรับชื่อเรื่องผ่านสไตล์


2
ขอบคุณ @reVerse อีกอย่างหนึ่ง ห้องสมุดหลายแห่งอนุญาตให้มีสีชื่อและข้อความที่แตกต่างกัน คุณรู้หรือไม่ว่าสิ่งนี้เป็นไปได้ที่นี่เช่นกัน?
ThanosFisherman

3
เฮ้อีกครั้ง! มีวิธีในการเปลี่ยนขนาดข้อความหรือไม่?
ThanosFisherman

1
@ThanosF น่าเสียดายที่ฉันไม่ทราบคุณลักษณะ xml ใด ๆ ที่ทำเช่นนี้ แต่เป็นไปได้แน่นอนผ่านทาง Java-Code
ย้อนกลับ

2
@summers Jup โดยพื้นฐานแล้วความคิดของappcompat-v7- มันนำความเข้ากันได้ย้อนหลังของส่วนประกอบใหม่ลงไปที่ระดับ API 7 (Android 2.1)
ย้อนกลับ

1
เพื่อให้สีข้อความของปุ่มทำงานบน 21+ ฉันต้องมีรายการ Android: buttonStyle เป็น "MyAlertDialogStyle" และรายการ android: textColor ในรูปแบบปุ่มที่กำหนดเอง
ทิม Autin

61

เมื่อต้องการใช้ชุดรูปแบบสำหรับแอปพลิเคชันทั้งหมดและไม่ใช้พารามิเตอร์ที่สองเพื่อจัดรูปแบบไดอะล็อกของคุณ

<style name="MyTheme" parent="Base.Theme.AppCompat.Light">
    <item name="alertDialogTheme">@style/dialog</item>
    <item name="colorAccent">@color/accent</item>
</style>

<style name="dialog" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">@color/accent</item>
</style>

ในแอพของฉันโดยใช้การเน้นสีในชุดรูปแบบไม่แสดงปุ่มของ alertDialog ด้วย color themeAccent ฉันต้องเพิ่มสไตล์การโต้ตอบในธีม


ไม่ทำงานบน API 10 (android 2.3) อาจใช้กับ API 11+ เท่านั้น
Oliv

2
อาจใช้ API 15+ ฉันเริ่มต้นโครงการใหม่เฉพาะบน API 15+ ฉันคิดว่า Android ก่อนหน้า 4 จะล้าสมัยในปี 2558
neoteknic

@Oliv มันทำงานกับ API 10 โดยใช้การพึ่งพา com.android.support:design:23.2.1
passerby

IDEA กล่าวว่า API 21+ จำเป็นต้องใช้ colorAccent บน BaseTheme.AppCompat.Light.Dialog.Alert โดยใช้ 'com.android.support:design:22.2.1'
Felipe Andrade

@Felipe Andrade Alway กำหนดเป้าหมายไปยัง SDK เวอร์ชันล่าสุดที่ควรใช้งาน! ฉันมี projet ที่มี min api 15 และการออกแบบเป้าหมาย 25: 22.x ล้าสมัยใช้ 25.1.x และอื่น ๆ อีกมากมาย
neoteknic

19

หากคุณต้องการใช้ android.support.v7.app.AlertDialog ใหม่และมีสีที่แตกต่างกันสำหรับปุ่มและยังมีรูปแบบที่กำหนดเองจากนั้นให้ดูที่https://gist.github.com/JoachimR/6bfbc175d5c8116d411e

@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    View v = inflater.inflate(R.layout.custom_layout, null);

    initDialogUi(v);

    final AlertDialog d = new AlertDialog.Builder(activity, R.style.AppCompatAlertDialogStyle)
            .setTitle(getString(R.string.some_dialog_title))
            .setCancelable(true)
            .setPositiveButton(activity.getString(R.string.some_dialog_title_btn_positive),
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            doSomething();
                            dismiss();
                        }
                    })
            .setNegativeButton(activity.getString(R.string.some_dialog_title_btn_negative),
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            dismiss();
                        }
                    })
            .setView(v)
            .create();

    // change color of positive button         
    d.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            Button b = d.getButton(DialogInterface.BUTTON_POSITIVE);
            b.setTextColor(getResources().getColor(R.color.colorPrimary));
        }
    });

    return d;
}

ป้อนคำอธิบายรูปภาพที่นี่


เยี่ยมมาก! ขอขอบคุณ
ThanosFisherman

ขอบคุณนี่เป็นวิธีเดียวที่ได้ผลสำหรับฉัน แต่คุณช่วยบอกฉันได้อย่างไรว่าฉันจะได้สีสำหรับช่องทำเครื่องหมายด้วยเช่นกัน? ใน app Builder setSingleChoiceItems(CharSequence[] items, int checkedItem, final OnClickListener listener)ของฉันมีการโต้ตอบกับรายการของปุ่มที่สร้างผ่าน ฉันไม่ต้องการไปไกลเท่าที่ subclassing อะแดปเตอร์และปรับแต่งมุมมองที่นั่น
Gabor

ปืนใหญ่ที่หนักหน่วงคือสิ่งที่ใช้งานได้! ฉันต้องใช้ปุ่มนี้เพื่อดูแลปุ่มกบฏ 2 ปุ่มที่ปฏิเสธที่จะเปลี่ยนเป็นสีที่เน้น!
rupps

7

ติดตามคำตอบ @reVerse แต่ในกรณีของฉันฉันแล้วมีคุณสมบัติบางอย่างในของฉันAppThemeเช่น

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:textColor">#111</item>
    <item name="android:textSize">13sp</item>
</style>

ดังนั้นบทสนทนาของฉันจะเป็นอย่างไร
ป้อนคำอธิบายรูปภาพที่นี่

ฉันแก้ไขมันโดย

1) เปลี่ยนการนำเข้าจากandroid.app.AlertDialogเป็น android.support.v7.app.AlertDialog
2) ฉันแทนที่คุณสมบัติ 2 AppThemeด้วยค่า Null

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <!-- Used for the buttons -->
    <item name="colorAccent">#FFC107</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">#FFFFFF</item>
    <!-- Used for the background -->
    <item name="android:background">#4CAF50</item>


    <item name="android:textColor">@null</item>
    <item name="android:textSize">@null</item>
</style>

.

AlertDialog.Builder builder = new AlertDialog.Builder(mContext, R.style.MyAlertDialogStyle);

หวังว่าจะช่วยคนอื่น

ป้อนคำอธิบายรูปภาพที่นี่


อ้าขอบคุณ! ฉันไม่ได้ใช้งาน AlertDialog
masterwok

1

หากคุณเป็นเหมือนฉันคุณแค่ต้องการปรับเปลี่ยนสีบางส่วนใน AppCompat และสีเดียวที่คุณต้องเปลี่ยนในกล่องโต้ตอบก็คือพื้นหลัง จากนั้นสิ่งที่คุณต้องทำคือตั้งค่าสีให้colorBackgroundFloatingแล้วสิ่งที่คุณต้องทำคือการตั้งค่าสีสำหรับ

นี่คือชุดรูปแบบพื้นฐานของฉันที่เพียงแค่ปรับเปลี่ยนบางสีโดยไม่มีชุดรูปแบบซ้อนกัน:

    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/theme_colorPrimary</item>
        <item name="colorPrimaryDark">@color/theme_colorPrimaryDark</item>
        <item name="colorAccent">@color/theme_colorAccent</item>
        <item name="colorControlActivated">@color/theme_colorControlActivated</item>
        <item name="android:windowBackground">@color/theme_bg</item>
        <item name="colorBackgroundFloating">@color/theme_dialog_bg</item><!-- Dialog background color -->
        <item name="colorButtonNormal">@color/theme_colorPrimary</item>
        <item name="colorControlHighlight">@color/theme_colorAccent</item>
    </style>

-3
    <item name="editTextColor">@color/white</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHint">@color/gray</item>
    <item name="android:textColorPrimary">@color/gray</item>
    <item name="colorControlNormal">@color/gray</item>
    <item name="colorControlActivated">@color/white</item>
    <item name="colorControlHighlight">#30FFFFFF</item>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.