Jak zmienić kolor okna dialogowego DatePicker na Androida 5.0


111

Czy można zmienić schemat kolorów selektora dat (i timepicker) dla Androida 5.0?

Próbowałem ustawić kolory akcentów, ale to nie działa (zarówno z, jak i bez 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>

Od oryginału: wprowadź opis obrazu tutaj

Do czegoś takiego: wprowadź opis obrazu tutaj


Jaki kolor ma Twój akcent kolorystyczny ustawiony w stylach motywów aplikacji
Neil

@Neil Dodałem kod, którego do tej pory próbowałem używać do stylizacji.
Warpzit

Odpowiedzi:


322

Powodem, dla którego sugestia Neila powoduje wyświetlenie pełnego ekranu, DatePickerjest wybór motywu macierzystego:

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

Ponadto, jeśli wybierzesz tę trasę, musisz określić motyw podczas tworzenia 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();

Moim zdaniem to nie jest dobre. Należy starać się unikać stylizacji z javy i wewnątrz styles.xml / themes.xml.

Zgadzam się, że sugestia Neila, z niewielką zmianą (zmiana motywu nadrzędnego, aby powiedzieć, Theme.Material.Light.Dialog) przyniesie pożądany rezultat. Ale oto inny sposób:

Przy pierwszej inspekcji natrafiamy na datePickerStyletakie rzeczy, jak: headerBackground(co próbujesz zmienić) dayOfWeekBackgroundoraz kilka innych kolorów i stylów tekstu.

Zastąpienie tego atrybutu w motywie aplikacji nie zadziała. DatePickerDialogużywa osobnego motywu, który można przypisać przez atrybut datePickerDialogTheme. Tak więc, aby nasze zmiany odniosły skutek, musimy nadpisać datePickerStylewewnątrz nadpisaniadatePickerDialogTheme .

No to ruszamy:

Zastąp datePickerDialogThemew motywie podstawowym aplikacji:

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

Zdefiniuj MyDatePickerDialogTheme. Wybór macierzystego tematem będzie zależeć od tego, co baza motyw z aplikacji jest: może to być Theme.Material.Dialogalbo Theme.Material.Light.Dialog:

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

Unieważniliśmy datePickerStylestylem MyDatePickerStyle. Wybór rodzica będzie ponownie zależał od podstawowego motywu Twojej aplikacji: albo Widget.Material.DatePickeralbo Widget.Material.Light.DatePicker. Zdefiniuj to zgodnie ze swoimi wymaganiami:

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

Obecnie nadpisujemy tylko to, headerBackgroundktóre jest domyślnie ustawione na ?attr/colorAccent(dlatego też sugestia Neila działa przy zmianie tła). Ale istnieje wiele możliwości dostosowania:

dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
calendarTextColor
calendarSelectedTextColor

Jeśli nie chcesz takiej kontroli (dostosowywania), nie musisz nadpisywać datePickerStyle. colorAccentkontroluje większość DatePicker'skolorów. Zatem nadpisywanie tylko w colorAccentśrodku MyDatePickerDialogThemepowinno działać:

<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>

Zastępowanie colorAccentdaje dodatkową korzyść w postaci zmiany OK& CANCELkolorów tekstu. Nie jest zły.

W ten sposób nie musisz podawać konstruktorowi żadnych informacji o stylizacji DatePickerDialog's. Wszystko zostało prawidłowo okablowane:

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
Dziękuję za dobry i pełny opis tego, jak to działa i jak należało go zastąpić stylami
Warpzit

Doskonałe wyjaśnienie @Vikram, jak możemy zmienić ok, anulować kolor tekstu?
Dilip

1
Nie znaleziono @Vikram calendarSelectedTextColor.
Akhilesh Dhar Dubey

7
Czy można zapewnić wsteczną kompatybilność dla Androida <21 the datePicker?
RoCk RoCk

1
@RoCk Nie jestem pewien, co masz na myśli, ale zbudowałem bibliotekę, aby przenieść selektory daty i czasu z wersji 23 na Androida do wersji 14. Projekt jest hostowany pod adresem : https://github.com/vikramkakkar/SublimePicker .
Vikram

68

Spróbuj.

Kod

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();

Styl w pliku styles.xml

EDYCJA - zgodnie z sugestią zmieniono motyw na Theme.AppCompat.Light.Dialog

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

2
Tak, jest fioletowa, ale też na pełnym ekranie :) ale może jak wstawię to do fragmentu to będzie zawarte. Jakieś sugestie, zanim ponownie zacznę się tym bawić?
Warpzit

Zobaczę, czy uda mi się znaleźć bardziej odpowiednie rozwiązanie, które nie spowoduje wyświetlenia go na pełnym ekranie
Neil,

9
Po prostu użyj parent="Theme.AppCompat.Light.Dialog"zamiastparent="Theme.AppCompat.Light"
Chupik

@Neil dzięki za odpowiedź, wskazał mi właściwy kierunek i jest to właściwie najszybsze rozwiązanie, ale szukałem podejścia opartego na stylu / tematyce :)
Warpzit

Nie działa na Androidzie 6, jest pełny ekran, a kolor nie zmienia się
Jemshit Iskenderov

16

Utwórz nowy styl

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

Kod Java:

Motyw rodzicielski jest tutaj kluczowy. Wybierz swój kolor

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

Wynik:

wprowadź opis obrazu tutaj


6

spróbuj tego, pracuj dla mnie

Umieść dwie opcje colorAccentiandroid: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>

Ta odpowiedź nie wymaga apis w wersji 24 i nowszych 💪
Michael

3

Wystarczy wspomnieć, że android.R.style.Theme_DeviceDefault_Light_Dialogzamiast tego możesz użyć domyślnego motywu, takiego jak .

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

Nie masz motywu tworzenia, po prostu zapisz go w obiekcie tworzenia okna dialogowego

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

podążaj za tym, to da ci wszystkie style wyboru daty, to naprawdę działa

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


Działa jak Gem, brachu!
sam

AlertDialog.THEME_HOLO_LIGHT wycofany, nie działa
Yash,

1

Miałem problem z tym, że przyciski selektora czasu nie były widoczne na ekranie API 24 w Androidzie. (API 21+) rozwiązuje

<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

W przypadku zmiany koloru tekstu pozycji listy roku (SPECYFICZNE DLA ANDROIDA 5.0)

Po prostu ustaw określony kolor tekstu w stylu okna dialogowego selektora dat. Z jakiegoś powodu ustawienie flagi yearListItemTextAppearancenie odzwierciedla żadnej zmiany na liście lat.

<item name="android:textColor">@android:color/black</item>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.