Come cambiare il colore della finestra di dialogo DatePicker per Android 5.0


111

È possibile modificare lo schema dei colori del datepicker (e anche del timepicker) per Android 5.0?

Ho provato a impostare i colori dell'accento, ma non funziona (sia con che senza 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>

Dall'originale: inserisci qui la descrizione dell'immagine

A qualcosa del genere: inserisci qui la descrizione dell'immagine


Di che colore è impostato il tuo accento di colore negli stili del tema della tua app
Neil

@ Neil ho aggiunto il codice che ho provato a utilizzare per lo styling finora.
Warpzit

Risposte:


322

Il motivo per cui il suggerimento di Neil si traduce in uno schermo intero DatePickerè la scelta del tema principale:

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

Inoltre, se segui questa strada, devi specificare il tema durante la creazione di 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();

Questo, secondo me, non va bene. Si dovrebbe cercare di mantenere lo stile fuori da Java e all'interno di styles.xml / themes.xml.

Sono d'accordo sul fatto che il suggerimento di Neil, con un po 'di cambiamento (cambiando il tema principale in dire, Theme.Material.Light.Dialog) ti darà il risultato desiderato. Ma ecco l'altro modo:

A prima vista, ci imbattiamo in datePickerStyleche definisce cose come: headerBackground(cosa stai cercando di cambiare) dayOfWeekBackground, e alcuni altri colori e stili di testo.

L'override di questo attributo nel tema della tua app non funzionerà. DatePickerDialogutilizza un tema separato assegnabile dall'attributo datePickerDialogTheme. Quindi, affinché le nostre modifiche abbiano effetto, dobbiamo eseguire l'override datePickerStyleall'interno di un overridendatePickerDialogTheme .

Eccoci qui:

Sostituisci datePickerDialogThemeall'interno del tema di base della tua app:

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

Definisci MyDatePickerDialogTheme. La scelta del tema principale dipenderà dal tema di base della tua app: potrebbe essere Theme.Material.Dialogo Theme.Material.Light.Dialog:

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

Abbiamo sovrascritto datePickerStylecon lo stile MyDatePickerStyle. La scelta del genitore dipenderà ancora una volta dal tema di base della tua app: o Widget.Material.DatePickero Widget.Material.Light.DatePicker. Definiscilo secondo le tue esigenze:

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

Attualmente, stiamo solo sovrascrivendo quello headerBackgroundche di default è impostato su ?attr/colorAccent(questo è anche il motivo per cui il suggerimento di Neil funziona nel cambiare lo sfondo). Ma c'è molta personalizzazione possibile:

dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
calendarTextColor
calendarSelectedTextColor

Se non desideri questo controllo (personalizzazione), non è necessario eseguire l'override datePickerStyle. colorAccentcontrolla la maggior parte dei DatePicker'scolori. Quindi, l'override appena colorAccentdentro MyDatePickerDialogThemedovrebbe funzionare:

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

Override colorAccentti dà il vantaggio di cambiare OKe CANCELcolori del testo pure. Non male.

In questo modo non è necessario fornire alcuna informazione di stile al DatePickerDialog'scostruttore. Tutto è stato cablato correttamente:

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
Grazie per una buona e completa descrizione di come funziona e di come doveva essere sovrascritto negli stili
Warpzit

Ottima spiegazione @Vikram come possiamo cambiare ok, cancellare il colore del testo?
Dilip

1
@Vikram calendarSelectedTextColor non trovato.
Akhilesh Dhar Dubey

7
È possibile essere retrocompatibili per Android <21 the datePicker?
RoCk RoCk

1
@RoCk Non sono sicuro di cosa intendi, ma ho creato una libreria per eseguire il back port dei selettori di data e ora dalla versione 23 di Android alla versione 14. Il progetto è ospitato su: https://github.com/vikramkakkar/SublimePicker .
Vikram

68

Fai un tentativo.

Il codice

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

Lo stile nel file styles.xml

MODIFICA - Cambiato il tema in Theme.AppCompat.Light.Dialog come suggerito

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

2
Sì è viola, ma anche a tutto schermo :) ma forse se lo metto dentro un frammento sarà contenuto. Qualche suggerimento prima di ricominciare a giocarci?
Warpzit

Vedrò se riesco a trovare una soluzione più appropriata che non lo faccia diventare a schermo intero
Neil

9
Basta usare al parent="Theme.AppCompat.Light.Dialog"posto diparent="Theme.AppCompat.Light"
Chupik

@Neil grazie per la risposta, mi ha indirizzato nella giusta direzione e questa è correttamente la soluzione più rapida ma stavo cercando un approccio tutto stile / tema :)
Warpzit

Non funziona su Android 6, è a schermo intero e il colore non è cambiato
Jemshit Iskenderov

16

Crea un nuovo stile

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

Codice Java:

Il tema principale è la chiave qui. Scegli il tuo coloreAccent

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

Risultato:

inserisci qui la descrizione dell'immagine


6

prova questo, lavora per me

Metti le due opzioni colorAccenteandroid: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>

Questa risposta non richiede le API v24 e successive 💪
Michael

3

Solo per menzionare, puoi anche usare il tema predefinito come android.R.style.Theme_DeviceDefault_Light_Dialoginvece.

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

Non è necessario creare un tema, basta scriverlo nell'oggetto di creazione della finestra di dialogo

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

segui questo ti darà tutti i tipi di stile di selezione della data che funziona davvero

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


Funziona come Gem, fratello!
sam

AlertDialog.THEME_HOLO_LIGHT obsoleto .. non funzionante
Yash

1

Ho avuto il problema che i pulsanti di selezione dell'ora non sono stati visualizzati nella schermata per l'API 24 in Android. (API 21+) è risolto da

<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

Per cambiare il colore del testo della voce dell'elenco dell'anno (SPECIFICO PER ANDROID 5.0)

Basta impostare un determinato colore del testo nello stile della finestra di dialogo del selettore di date. Per qualche motivo l'impostazione del flag yearListItemTextAppearancenon riflette alcun cambiamento nell'elenco degli anni.

<item name="android:textColor">@android:color/black</item>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.