Como alterar a cor da caixa de diálogo DatePicker para Android 5.0

111

É possível alterar o esquema de cores do selecionador de data (e também do selecionador de tempo) para o Android 5.0?

Tentei definir as cores de destaque, mas isso não funciona (com e sem 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>

Do original: insira a descrição da imagem aqui

Para algo assim: insira a descrição da imagem aqui

Warpzit
fonte
Qual é a cor do seu realce definido nos estilos de tema do seu aplicativo
Neil
@Neil Eu adicionei o código que tentei usar para estilizar até agora.
Warpzit

Respostas:

322

A razão pela qual a sugestão de Neil resulta em tela cheia DatePickeré a escolha do tema pai:

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

Além disso, se você seguir esse caminho, deverá especificar o tema ao criar 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();

Isso, na minha opinião, não é bom. Deve-se tentar manter o estilo fora de java e dentro de styles.xml / themes.xml.

Eu concordo que a sugestão de Neil, com um pouco de mudança (mudando o tema pai para dizer, Theme.Material.Light.Dialog), você obterá o resultado desejado. Mas, aqui está a outra maneira:

Na primeira inspeção, encontramos o datePickerStyleque define coisas como: headerBackground(o que você está tentando mudar) dayOfWeekBackground, e algumas outras cores e estilos de texto.

Substituir este atributo no tema do seu aplicativo não funcionará. DatePickerDialogusa um tema separado atribuível pelo atributo datePickerDialogTheme. Portanto, para que nossas alterações tenham efeito, devemos substituir datePickerStyledentro de uma substituiçãodatePickerDialogTheme .

Aqui vamos nós:

Substituir datePickerDialogThemedentro do tema base do seu aplicativo:

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

Defina MyDatePickerDialogTheme. A escolha do tema pai dependerá de qual é o tema base do seu aplicativo: pode ser Theme.Material.Dialogou Theme.Material.Light.Dialog:

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

Nós substituímos datePickerStylecom o estilo MyDatePickerStyle. A escolha do pai mais uma vez dependerá de qual é o tema base do seu aplicativo: ou Widget.Material.DatePickerou Widget.Material.Light.DatePicker. Defina-o de acordo com seus requisitos:

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

Atualmente, estamos apenas substituindo o headerBackgroundque por padrão é definido como ?attr/colorAccent(é também por isso que a sugestão de Neil funciona na mudança do plano de fundo). Mas há bastante personalização possível:

dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
calendarTextColor
calendarSelectedTextColor

Se você não deseja tanto controle (personalização), não é necessário substituí-lo datePickerStyle. colorAccentcontrola a maioria das DatePicker'scores. Portanto, substituir apenas colorAccentdentro MyDatePickerDialogThemedeve 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>

Substituindo colorAccentlhe dá a vantagem de mudar OKe CANCELcores de texto também. Não é ruim.

Dessa forma, você não precisa fornecer nenhuma informação de estilo ao DatePickerDialog'sconstrutor. Tudo foi conectado corretamente:

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();
Vikram
fonte
8
Obrigado por uma boa e completa descrição de como funciona e como teve que ser substituída em estilos
Warpzit
Excelente explicação @Vikram como podemos mudar ok, cancelar a cor do texto?
Dilip
1
@Vikram calendarSelectedTextColor não encontrado.
Akhilesh Dhar Dubey
7
É possível ser compatível com versões anteriores para Android <21 the datePicker?
RoCk RoCk
1
@RoCk Não tenho certeza do que você quer dizer, mas construí uma biblioteca para fazer a portabilidade dos seletores de data e hora da versão 23 do Android para a versão 14. O projeto está hospedado em: https://github.com/vikramkakkar/SublimePicker .
Vikram
68

Experimente.

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

O estilo em seu arquivo styles.xml

EDIT - Tema alterado para Theme.AppCompat.Light.Dialog conforme sugerido

<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/blue_500</item>
</style>
Neil
fonte
2
Sim, é roxo, mas também em tela inteira :) mas talvez se eu colocá-lo dentro de um fragmento, ele estará contido. Alguma sugestão antes de começar a brincar com ele novamente?
Warpzit
Vou ver se consigo encontrar uma solução mais adequada que não faça com que ele vá para tela inteira
Neil
9
Basta usar em parent="Theme.AppCompat.Light.Dialog"vez deparent="Theme.AppCompat.Light"
Chupik
@Neil obrigado pela resposta, me indicou a direção certa e esta é propriamente a solução mais rápida, mas eu estava procurando uma abordagem de todo estilo / tema :)
Warpzit
Não funciona no Android 6, está em tela cheia e a cor não mudou
Jemshit Iskenderov
16

Crie um novo estilo

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

Código Java:

O tema pai é a chave aqui. Escolha o seu colorAccent

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

Resultado:

insira a descrição da imagem aqui

Siddharth Jaswal
fonte
6

tente isso, trabalhe para mim

Coloque as duas opções 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>
Geral Alexander Torres
fonte
Esta resposta não requer apis v24 e superior 💪
Michael,
3

Só para mencionar, você também pode usar o tema padrão como 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();
user1214120
fonte
1

Você não precisa criar um tema, basta escrevê-lo no seu objeto de criação de diálogo

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

siga isto lhe dará todo o tipo de estilo de selecionador de data é realmente trabalho

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

Avinash Ajay Pandey
fonte
Funciona como Gem, mano!
sam
AlertDialog.THEME_HOLO_LIGHT obsoleto .. não funciona
Yash
1

Eu tive o problema de que os botões do seletor de tempo não eram vistos na tela da API 24 no Android. (API 21+) é resolvido por

<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>
Samet ÖZTOPRAK
fonte
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>
Keshav Gera
fonte
0

Para alterar a cor do texto do item da lista de ano (ESPECÍFICO PARA ANDROID 5.0)

Basta definir uma determinada cor de texto no estilo de diálogo do selecionador de data. Por algum motivo, a configuração do sinalizador yearListItemTextAppearancenão reflete nenhuma alteração na lista de anos.

<item name="android:textColor">@android:color/black</item>
user3354265
fonte