Cómo cambiar el color del cuadro de diálogo DatePicker para Android 5.0


111

¿Es posible cambiar el esquema de color del selector de fecha (y también el selector de tiempo) para Android 5.0?

Intenté configurar los colores de acento, pero esto no funciona (con y sin 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>

Del original: ingrese la descripción de la imagen aquí

A algo como esto: ingrese la descripción de la imagen aquí


¿De qué color está configurado su acento de color en los estilos de tema de su aplicación
Neil

@Neil He agregado el código que he intentado usar para diseñar hasta ahora.
Warpzit

Respuestas:


322

La razón por la que la sugerencia de Neil da como resultado una pantalla completa DatePickeres la elección del tema principal:

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

Además, si sigue esta ruta, debe especificar el tema mientras crea 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();

Esto, en mi opinión, no es bueno. Uno debería intentar mantener el estilo fuera de Java y dentro de styles.xml / themes.xml.

Estoy de acuerdo en que la sugerencia de Neil, con un poco de cambio (cambiando el tema principal para decir, Theme.Material.Light.Dialog) obtendrá el resultado deseado. Pero aquí está la otra forma:

En la primera inspección, nos encontramos con datePickerStyleque define cosas como: headerBackground(lo que está tratando de cambiar) dayOfWeekBackground, y algunos otros colores de texto y estilos de texto.

No funcionará anular este atributo en el tema de su aplicación. DatePickerDialogutiliza un tema independiente asignable por el atributo datePickerDialogTheme. Por lo tanto, para que nuestros cambios surtan efecto, debemos anular datePickerStyledentro de un anuladodatePickerDialogTheme .

Aquí vamos:

Anular datePickerDialogThemedentro del tema base de su aplicación:

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

Definir MyDatePickerDialogTheme. La elección del tema principal dependerá de cuál sea el tema base de su aplicación: podría ser Theme.Material.Dialogo Theme.Material.Light.Dialog:

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

Hemos anulado datePickerStylecon el estilo MyDatePickerStyle. La elección del padre dependerá una vez más de cuál es el tema base de su aplicación: Widget.Material.DatePickero Widget.Material.Light.DatePicker. Defínalo según sus requisitos:

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

Actualmente, solo estamos anulando lo headerBackgroundque está configurado de forma predeterminada en ?attr/colorAccent(esta es también la razón por la que la sugerencia de Neil funciona para cambiar el fondo). Pero hay muchas posibilidades de personalización:

dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
calendarTextColor
calendarSelectedTextColor

Si no desea tanto control (personalización), no necesita anular datePickerStyle. colorAccentcontrola la mayoría de los DatePicker'scolores. Entonces, anular solo el colorAccentinterior MyDatePickerDialogThemedebería funcionar:

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

Anulando colorAccentle da el beneficio adicional de cambiar OKy CANCELlos colores del texto también. No está mal.

De esta manera, no tiene que proporcionar ninguna información de estilo al DatePickerDialog'sconstructor. Todo ha sido cableado correctamente:

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
Gracias por una buena y completa descripción de cómo funciona y cómo tuvo que
anularse

Excelente explicación @Vikram ¿cómo podemos cambiar ok, cancelar el color del texto?
Dilip

1
@Vikram calendarSelectedTextColor no encontrado.
Akhilesh Dhar Dubey

7
¿Es posible ser compatible con versiones anteriores de Android <21 the datePicker?
RoCk RoCk

1
@RoCk No estoy seguro de lo que quieres decir, pero construí una biblioteca para realizar un backport de los selectores de fecha y hora de la versión 23 de Android a la versión 14. El proyecto está alojado en: https://github.com/vikramkakkar/SublimePicker .
Vikram

68

Pruébelo.

El código

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

El estilo en su archivo styles.xml

EDITAR: tema cambiado a Theme.AppCompat.Light.Dialog como se sugiere

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

2
Sí, es morado, pero también a pantalla completa :) pero tal vez si lo pongo dentro de un fragmento estará contenido. ¿Alguna sugerencia antes de empezar a jugar con él de nuevo?
Warpzit

Veré si puedo encontrar una solución más adecuada que no haga que se muestre en pantalla completa
Neil

9
Solo use en parent="Theme.AppCompat.Light.Dialog"lugar deparent="Theme.AppCompat.Light"
Chupik

@Neil, gracias por la respuesta, me indicó la dirección correcta y esta es la solución más rápida, pero estaba buscando un enfoque de estilo / tema :)
Warpzit

No funciona en Android 6, está en pantalla completa y el color no cambia
Jemshit Iskenderov

16

Crea un nuevo estilo

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

Código Java:

El tema principal es la clave aquí. Elige tu color Acento

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

Resultado:

ingrese la descripción de la imagen aquí


6

prueba esto, trabaja para mi

Pon las dos opciones colorAccentyandroid: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>

Esta respuesta no requiere apis v24 y superior 💪
Michael

3

Solo por mencionar, también puede usar el tema predeterminado como en su android.R.style.Theme_DeviceDefault_Light_Dialoglugar.

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

No tienes un tema de creación, solo escríbelo en tu objeto de creación de diálogo

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

siga esto, le dará todo tipo de estilo de selector de fecha, realmente funciona

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


¡Funciona como Gem, hermano!
sam

AlertDialog.THEME_HOLO_LIGHT obsoleto ... no funciona
Yash

1

Tuve el problema de que los botones del selector de tiempo no se veían en la pantalla de API 24 en Android. (API 21+) se resuelve mediante

<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

Para cambiar el color del texto del elemento de la lista de año (ESPECÍFICO PARA ANDROID 5.0)

Simplemente establezca cierto color de texto en el estilo de diálogo del selector de fecha. Por alguna razón, la configuración de la bandera yearListItemTextAppearanceno refleja ningún cambio en la lista de años.

<item name="android:textColor">@android:color/black</item>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.