Comment changer la couleur de la boîte de dialogue DatePicker pour Android 5.0


111

Est-il possible de changer le jeu de couleurs du sélecteur de date (et aussi du sélecteur de temps) pour Android 5.0?

J'ai essayé de définir les couleurs d'accent, mais cela ne fonctionne pas (avec et sans 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>

De l'original: entrez la description de l'image ici

À quelque chose comme ça: entrez la description de l'image ici


Quelle couleur est votre accent de couleur défini dans les styles de thème de votre application
Neil

@Neil J'ai ajouté le code que j'ai essayé d'utiliser pour le style jusqu'à présent.
Warpzit le

Réponses:


322

La raison pour laquelle la suggestion de Neil aboutit à un plein écran DatePickerest le choix du thème parent:

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

De plus, si vous suivez cette voie, vous devez spécifier le thème lors de la création du 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();

Cela, à mon avis, n'est pas bon. On devrait essayer de garder le style hors de java et dans styles.xml / themes.xml.

Je suis d'accord que la suggestion de Neil, avec un peu de changement (changer le thème parent pour dire, Theme.Material.Light.Dialog) vous donnera le résultat souhaité. Mais voici l'autre manière:

Lors de la première inspection, nous trouvons datePickerStylequi définit des choses telles que: headerBackground(ce que vous essayez de changer) dayOfWeekBackground, et quelques autres couleurs de texte et styles de texte.

Le remplacement de cet attribut dans le thème de votre application ne fonctionnera pas. DatePickerDialogutilise un thème distinct assignable par l'attribut datePickerDialogTheme. Donc, pour que nos modifications prennent effet, nous devons remplacer à l' datePickerStyleintérieur d'un remplacementdatePickerDialogTheme .

Et c'est parti:

Remplacez datePickerDialogThemele thème de base de votre application:

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

Définissez MyDatePickerDialogTheme. Le choix du thème parent dépendra du thème de base de votre application: il peut s'agir de l'un Theme.Material.Dialogou l' autre Theme.Material.Light.Dialog:

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

Nous avons remplacé datePickerStylele style MyDatePickerStyle. Le choix du parent dépendra encore une fois du thème de base de votre application: soit Widget.Material.DatePickerou Widget.Material.Light.DatePicker. Définissez-le selon vos besoins:

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

Actuellement, nous ne remplaçons que headerBackgroundce qui est défini par défaut ?attr/colorAccent(c'est aussi pourquoi la suggestion de Neil fonctionne pour changer l'arrière-plan). Mais il y a pas mal de personnalisation possible:

dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
calendarTextColor
calendarSelectedTextColor

Si vous ne voulez pas autant de contrôle (personnalisation), vous n'avez pas besoin de remplacer datePickerStyle. colorAccentcontrôle la plupart des DatePicker'scouleurs. Donc, le remplacement juste à l' colorAccentintérieur MyDatePickerDialogThemedevrait fonctionner:

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

Redéfinition colorAccentvous donne l'avantage de changer OKet les CANCELcouleurs du texte aussi bien. Pas mal.

De cette façon, vous n'avez pas à fournir d'informations de style au DatePickerDialog'sconstructeur. Tout a été correctement câblé:

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
Merci pour une bonne description complète de son fonctionnement et de la façon dont il a dû être
remplacé

Excellente explication @Vikram comment pouvons-nous changer ok, annuler la couleur du texte?
Dilip

1
@Vikram calendarSelectedTextColor introuvable.
Akhilesh Dhar Dubey

7
Est-il possible d'être rétrocompatible pour Android <21 le datePicker?
RoCk RoCk

1
@RoCk Je ne sais pas ce que vous voulez dire, mais j'ai construit une bibliothèque pour porter les sélecteurs de date et d'heure de la version Android 23 à la version 14. Le projet est hébergé sur: https://github.com/vikramkakkar/SublimePicker .
Vikram

68

Essayez ceci.

Le code

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

Le style dans votre fichier styles.xml

EDIT - Changement du thème en Theme.AppCompat.Light.Dialog comme suggéré

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

2
Oui c'est violet, mais aussi plein écran :) mais peut-être que si je le mets dans un fragment, il sera contenu. Des suggestions avant de recommencer à jouer avec?
Warpzit le

Je vais voir si je peux trouver une solution plus appropriée qui ne la fasse pas passer en plein écran
Neil

9
Il suffit d'utiliser à la parent="Theme.AppCompat.Light.Dialog"place deparent="Theme.AppCompat.Light"
Chupik

@Neil merci pour la réponse, m'a pointé dans la bonne direction et c'est correctement la solution la plus rapide mais je cherchais une approche tout style / thème :)
Warpzit

Ne fonctionne pas sur Android 6, il est en plein écran et la couleur n'est pas modifiée
Jemshit Iskenderov

16

Créer un nouveau style

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

Code Java:

Le thème parent est la clé ici. Choisissez votre couleur

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

Résultat:

entrez la description de l'image ici


6

essaie ça, travaille pour moi

Mettez les deux options, colorAccentetandroid: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>

Cette réponse ne nécessite pas les API v24 et supérieures 💪
Michael

3

Juste pour mentionner, vous pouvez également utiliser le thème par défaut comme à la android.R.style.Theme_DeviceDefault_Light_Dialogplace.

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

Vous n'avez pas de thème de création, écrivez-le simplement dans votre objet de création de dialogue

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

suivez ceci, cela vous donnera tous les styles de sélecteur de date de type, cela fonctionne vraiment

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


Fonctionne comme Gem, bro!
sam

AlertDialog.THEME_HOLO_LIGHT obsolète .. ne fonctionne pas
Yash

1

J'ai eu le problème que les boutons de sélection de temps n'ont pas été vus sur l'écran de l'API 24 sous Android. (API 21+) il est résolu par

<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

Pour changer la couleur du texte de l'élément de liste Année (SPÉCIFIQUE POUR ANDROID 5.0)

Définissez simplement une certaine couleur de texte dans votre style de dialogue de sélection de date. Pour une raison quelconque, le réglage de l'indicateur yearListItemTextAppearancene reflète aucun changement sur la liste des années.

<item name="android:textColor">@android:color/black</item>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.