วิธีเปลี่ยนสีไดอะล็อก DatePicker สำหรับ Android 5.0


111

เป็นไปได้หรือไม่ที่จะเปลี่ยนรูปแบบสี datepicker (และ timepicker) สำหรับ Android 5.0

ฉันได้ลองตั้งค่าสีที่เน้นแล้ว แต่ไม่ได้ผล (ทั้งที่มีและไม่มีandroid:):

<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">@color/purple</item>

<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">@color/purple_tint</item>

<!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
<item name="colorAccent">@color/purple_tint</item>

จากต้นฉบับ: ใส่คำอธิบายภาพที่นี่

เพื่อสิ่งนี้: ใส่คำอธิบายภาพที่นี่


สีใดที่เน้นสีของคุณในสไตล์ธีมของแอป
นีล

@ นีลฉันได้เพิ่มโค้ดที่ฉันพยายามใช้เพื่อจัดแต่งทรงผมจนถึงตอนนี้
Warpzit

คำตอบ:


323

สาเหตุที่ข้อเสนอแนะของ Neil ส่งผลให้เป็นแบบเต็มหน้าจอDatePickerคือตัวเลือกของธีมหลัก:

<!-- Theme.AppCompat.Light is not a dialog theme -->
<style name="DialogTheme" parent="**Theme.AppCompat.Light**">
    <item name="colorAccent">@color/blue_500</item>
</style>

ยิ่งไปกว่านั้นหากคุณไปเส้นทางนี้คุณต้องระบุธีมในขณะที่สร้างDatePickerDialog:

// R.style.DialogTheme
new DatePickerDialog(MainActivity.this, R.style.DialogTheme, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        //DO SOMETHING
    }
}, 2015, 02, 26).show();

สิ่งนี้ในความคิดของฉันไม่ดี เราควรพยายามทำให้สไตล์ไม่อยู่ใน java และภายใน styles.xml / themes.xml

ฉันยอมรับว่าคำแนะนำของนีลที่มีการเปลี่ยนแปลงเล็กน้อย (เปลี่ยนธีมหลักเพื่อพูดTheme.Material.Light.Dialog) จะทำให้คุณได้ผลลัพธ์ที่ต้องการ แต่นี่เป็นวิธีอื่น:

ในการตรวจสอบครั้งแรกเราพบdatePickerStyleสิ่งที่กำหนดสิ่งต่างๆเช่น: headerBackground(สิ่งที่คุณพยายามจะเปลี่ยนแปลง) dayOfWeekBackgroundและสีข้อความและลักษณะข้อความอื่น ๆ

การลบล้างแอตทริบิวต์นี้ในธีมของแอปจะไม่ทำงาน ใช้ธีมมอบหมายโดยแยกแอตทริบิวต์DatePickerDialog datePickerDialogThemeดังนั้นการเปลี่ยนแปลงของเราที่จะใช้ส่งผลกระทบต่อเราจะต้องแทนที่datePickerStyleภายใน datePickerDialogThemeoverriden

ไปเลย:

แทนที่datePickerDialogThemeภายในธีมพื้นฐานของแอปของคุณ:

<style name="AppBaseTheme" parent="android:Theme.Material.Light">
    ....
    <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>
</style>

MyDatePickerDialogThemeกำหนด การเลือกธีมหลักจะขึ้นอยู่กับว่าธีมพื้นฐานของแอปของคุณคืออะไรซึ่งอาจเป็นTheme.Material.DialogหรือTheme.Material.Light.Dialog:

<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
    <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
</style>

เราได้แทนที่ด้วยรูปแบบdatePickerStyle MyDatePickerStyleทางเลือกของผู้ปกครองอีกครั้งจะขึ้นอยู่กับสิ่งที่รูปแบบฐานของแอป: ทั้งหรือWidget.Material.DatePicker Widget.Material.Light.DatePickerกำหนดตามความต้องการของคุณ:

<style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
    <item name="android:headerBackground">@color/chosen_header_bg_color</item>
</style>

ขณะนี้เรากำลังลบล้างheaderBackgroundสิ่งที่ตั้งไว้โดยค่าเริ่มต้นเท่านั้น?attr/colorAccent(นี่คือสาเหตุที่คำแนะนำของนีลทำงานในการเปลี่ยนพื้นหลัง) แต่มีการปรับแต่งได้ค่อนข้างมาก:

dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
calendarTextColor
calendarSelectedTextColor

ถ้าคุณไม่อยากให้เรื่องนี้การควบคุมมาก (ปรับแต่ง) datePickerStyleคุณไม่จำเป็นต้องแทนที่ colorAccentควบคุมDatePicker'sสีส่วนใหญ่ ดังนั้นการลบล้างcolorAccentภายในMyDatePickerDialogThemeควรใช้งานได้:

<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
    <item name="android:colorAccent">@color/date_picker_accent</item>

    <!-- No need to override 'datePickerStyle' -->
    <!-- <item name="android:datePickerStyle">@style/MyDatePickerStyle</item> -->
</style>

การลบล้างcolorAccentช่วยให้คุณได้รับประโยชน์เพิ่มเติมในการเปลี่ยนOK& CANCELสีข้อความเช่นกัน ไม่เลว.

ด้วยวิธีนี้คุณไม่จำเป็นต้องให้ข้อมูลการจัดรูปแบบใด ๆ แก่ผู้DatePickerDialog'sสร้าง ทุกอย่างถูกต่อสายอย่างถูกต้อง:

DatePickerDialog dpd = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {

    }
 }, 2015, 5, 22);

 dpd.show();

8
ขอบคุณสำหรับคำอธิบายที่ดีและครบถ้วนเกี่ยวกับวิธีการทำงานและวิธีที่จะต้องถูกลบล้างในรูปแบบ
Warpzit

คำอธิบายที่ยอดเยี่ยม @Vikram เราจะเปลี่ยนตกลงยกเลิกสีข้อความได้อย่างไร?
Dilip

1
ไม่พบปฏิทิน @VikramSelectedTextColor
Akhilesh Dhar Dubey

7
เป็นไปได้ไหมที่จะเข้ากันได้กับ android <21 the datePicker?
RoCk RoCk

1
@RoCk ไม่แน่ใจว่าสิ่งที่คุณหมายถึง แต่ฉันสร้างห้องสมุดกับพอร์ตกลับวันที่และเวลาแจ่มจากหุ่นยนต์รุ่น 23 รุ่น 14 โครงการเป็นเจ้าภาพได้ที่: https://github.com/vikramkakkar/SublimePicker
Vikram

68

ลองดูสิ

รหัส

new DatePickerDialog(MainActivity.this, R.style.DialogTheme, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        //DO SOMETHING
    }
}, 2015, 02, 26).show();

สไตล์ในไฟล์ styles.xml ของคุณ

แก้ไข - เปลี่ยนธีมเป็น Theme.AppCompat.Light.Dialog ตามที่แนะนำ

<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/blue_500</item>
</style>

2
ใช่มันเป็นสีม่วง แต่ก็เต็มหน้าจอ :) แต่บางทีถ้าฉันใส่ไว้ในชิ้นส่วนมันจะมีอยู่ มีข้อเสนอแนะใด ๆ ก่อนที่ฉันจะเริ่มเล่นกับมันอีกครั้ง?
Warpzit

ฉันจะดูว่าฉันสามารถหาวิธีแก้ปัญหาที่เหมาะสมกว่านี้ได้ไหมที่ไม่ทำให้มันเต็มหน้าจอ
นีล

9
แค่ใช้parent="Theme.AppCompat.Light.Dialog"แทนparent="Theme.AppCompat.Light"
ชูปิก

@ นีลขอบคุณสำหรับคำตอบชี้ฉันไปในทิศทางที่ถูกต้องและนี่เป็นวิธีแก้ปัญหาที่รวดเร็วที่สุด แต่ฉันกำลังมองหาแนวทางสไตล์ / ธีมทั้งหมด :)
Warpzit

ไม่ทำงานบน Android 6 เป็นแบบเต็มหน้าจอและสีไม่เปลี่ยนแปลง
Jemshit Iskenderov

16

สร้างรูปแบบใหม่

<!-- Theme.AppCompat.Light.Dialog -->
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/blue_500</item>
</style>

รหัส Java:

ธีมหลักคือกุญแจสำคัญที่นี่ เลือกสีของคุณ

DatePickerDialog = new DatePickerDialog(context,R.style.DialogTheme,this,now.get(Calendar.YEAR),now.get(Calendar.MONTH),now.get(Calendar.DAY_OF_MONTH);

ผลลัพธ์:

ใส่คำอธิบายภาพที่นี่


6

ลองทำเพื่อฉัน

ใส่สองตัวเลือกcolorAccentและandroid:colorAccent

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
   ....
    <item name="android:dialogTheme">@style/AppTheme.DialogTheme</item>
    <item name="android:datePickerDialogTheme">@style/Dialog.Theme</item>
</style>

<style name="AppTheme.DialogTheme" parent="Theme.AppCompat.Light.Dialog">

<!-- Put the two options, colorAccent and android:colorAccent. -->
    <item name="colorAccent">@color/colorPrimary</item>
    <item name="android:colorPrimary">@color/colorPrimary</item>
    <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:colorAccent">@color/colorPrimary</item>
 </style>

คำตอบนี้ไม่ต้องใช้ v24 apis ขึ้นไป💪
Michael

3

เพียงแค่พูดถึงคุณยังสามารถใช้ธีมเริ่มต้นเช่นandroid.R.style.Theme_DeviceDefault_Light_Dialogแทนได้

new DatePickerDialog(MainActivity.this, android.R.style.Theme_DeviceDefault_Light_Dialog, new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    //DO SOMETHING
    }
}, 2015, 02, 26).show();

1

คุณไม่ได้สร้างธีมเพียงแค่เขียนไว้ในออบเจ็กต์การสร้างไดอะล็อกของคุณ

DatePickerDialog datePicker = new DatePickerDialog(getActivity(), AlertDialog.THEME_HOLO_LIGHT,this, mYear, mMonth, mDay);

ทำตามสิ่งนี้จะทำให้คุณมีสไตล์ตัวเลือกวันที่ทั้งหมดที่ใช้งานได้จริง

http://www.android-examples.com/change-datepickerdialog-theme-in-android-using-dialogfragment/


ทำงานเหมือนอัญมณีครับ!
sam

AlertDialog.THEME_HOLO_LIGHT เลิกใช้งานแล้ว .. ไม่ทำงาน
Yash

1

ฉันมีปัญหาที่ไม่เห็นปุ่มตัวเลือกเวลาในหน้าจอสำหรับ API 24 ใน Android (API 21+) แก้ไขได้โดย

<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
            <item name="android:colorAccent">@color/colorPrimary2</item></style>

<style name="Theme" parent="BBaseTheme">
         <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>
</style>

1
<style name="AppThemeDatePicker" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/select2</item>
    <item name="android:colorAccent">@color/select2</item>
    <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
</style>


<style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
    <item name="android:headerBackground">@color/select2</item>
</style>

0

สำหรับการเปลี่ยนสีข้อความรายการปี (เฉพาะสำหรับ ANDROID 5.0)

เพียงตั้งค่าสีข้อความบางอย่างในรูปแบบกล่องโต้ตอบตัวเลือกวันที่ของคุณ ด้วยเหตุผลบางประการการตั้งค่าสถานะyearListItemTextAppearanceไม่ได้แสดงถึงการเปลี่ยนแปลงใด ๆ ในรายการปี

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