Adicionar seletores ao app

Experimente trabalhar com o Compose

O Jetpack Compose é o kit de ferramentas de IU recomendado para Android. Aprenda a adicionar componentes no Compose.

Seletores de data →

O Android oferece controles para que o usuário selecione um horário ou uma data como caixas de diálogo prontas para uso. Esses seletores fornecem controles para selecionar cada parte do horário (hora, minuto, período do dia) ou data (dia, mês, ano).

O uso desses seletores ajuda a garantir que os usuários possam escolher um horário ou data válido, com o formato correto e ajustado para a localidade do usuário.

Recomendamos que você use DialogFragment para hospedar cada seletor de horário ou data. O DialogFragment gerencia o ciclo de vida da caixa de diálogo e permite exibir seletores em diferentes configurações de layout, como uma caixa de diálogo básica em dispositivos móveis ou uma parte incorporada do layout em telas grandes.

Criar um seletor de horário

Para mostrar um TimePickerDialog usando DialogFragment, defina uma classe de fragmento que estenda DialogFragment e retorne um TimePickerDialog do fragmento's onCreateDialog() método.

Estender o DialogFragment para um seletor de horário

Para definir um DialogFragment para um TimePickerDialog, faça o seguinte:

• Defina o método onCreateDialog() para retornar uma instância de TimePickerDialog.
• Implemente a TimePickerDialog.OnTimeSetListener interface para receber um callback quando o usuário definir o horário.

Veja um exemplo:

class TimePickerFragment : DialogFragment(), TimePickerDialog.OnTimeSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current time as the default values for the picker.
        val c = Calendar.getInstance()
        val hour = c.get(Calendar.HOUR_OF_DAY)
        val minute = c.get(Calendar.MINUTE)

        // Create a new instance of TimePickerDialog and return it.
        return TimePickerDialog(activity, this, hour, minute, DateFormat.is24HourFormat(activity))
    }

    override fun onTimeSet(view: TimePicker, hourOfDay: Int, minute: Int) {
        // Do something with the time the user picks.
    }
}

public static class TimePickerFragment extends DialogFragment
                            implements TimePickerDialog.OnTimeSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker.
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        // Create a new instance of TimePickerDialog and return it.
        return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
        // Do something with the time the user picks.
    }
}

Consulte a classe TimePickerDialog para ver informações sobre os argumentos do construtor.

Agora, você só precisa de um evento que adicione uma instância desse fragmento à sua atividade.

Mostrar o seletor de horário

Depois de definir um DialogFragment como o do exemplo anterior, você pode mostrar o seletor de horário criando uma instância do DialogFragment e chamando o método show().

Por exemplo, veja um botão que, quando clicado, chama um método para mostrar a caixa de diálogo:

<Button
    android:id="@+id/pickTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick time" />

Quando o usuário clica nesse botão, o sistema chama o seguinte método:

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker")
}

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker");
}

Esse método chama show() em uma nova instância do DialogFragment definida no exemplo anterior. O método show() precisa de uma instância de FragmentManager e um nome de tag exclusivo para o fragmento.

Criar um seletor de datas

Criar um DatePickerDialog é como criar um TimePickerDialog. A diferença é a caixa de diálogo criada para o fragmento.

Para mostrar um DatePickerDialog usando DialogFragment, defina uma classe de fragmento que estenda DialogFragment e retorne um DatePickerDialog do método onCreateDialog() do fragmento.

Estender DialogFragment para um seletor de datas

Para definir um DialogFragment para um DatePickerDialog, faça o seguinte:

• Defina o método onCreateDialog() para retornar uma instância de DatePickerDialog.
• Implemente a DatePickerDialog.OnDateSetListener interface para receber um callback quando o usuário definir a data.

Veja um exemplo:

class DatePickerFragment : DialogFragment(), DatePickerDialog.OnDateSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current date as the default date in the picker.
        val c = Calendar.getInstance()
        val year = c.get(Calendar.YEAR)
        val month = c.get(Calendar.MONTH)
        val day = c.get(Calendar.DAY_OF_MONTH)

        // Create a new instance of DatePickerDialog and return it.
        return DatePickerDialog(requireContext(), this, year, month, day)

    }

    override fun onDateSet(view: DatePicker, year: Int, month: Int, day: Int) {
        // Do something with the date the user picks.
    }
}

public static class DatePickerFragment extends DialogFragment
                            implements DatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current date as the default date in the picker.
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        // Create a new instance of DatePickerDialog and return it.
        return new DatePickerDialog(requireContext(), this, year, month, day);
    }

    public void onDateSet(DatePicker view, int year, int month, int day) {
        // Do something with the date the user picks.
    }
}

Consulte a classe DatePickerDialog para ver informações sobre os argumentos do construtor.

Você só precisa de um evento que adicione uma instância desse fragmento à sua atividade.

Mostrar o seletor de datas

Depois de definir um DialogFragment como o do exemplo anterior, você pode mostrar o seletor de datas criando uma instância do DialogFragment e chamando show().

Por exemplo, veja um botão que, quando clicado, chama um método para mostrar a caixa de diálogo:

<Button
    android:id="@+id/pickDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick date"/>

Quando o usuário clica nesse botão, o sistema chama o seguinte método:

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment()
    newFragment.show(supportFragmentManager, "datePicker")
}

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment();
    newFragment.show(supportFragmentManager, "datePicker");
}

Esse método chama show() em uma nova instância do DialogFragment definida no exemplo anterior. O método show() precisa de uma instância de FragmentManager e um nome de tag exclusivo para o fragmento.

Usar seletores com o preenchimento automático

Em 2017, o Android introduziu a Estrutura de preenchimento automático, que permite que os usuários salvem dados que podem ser usados para preencher formulários em diferentes apps. Os seletores podem ser úteis em algumas situações de preenchimento automático, fornecendo uma IU que permite que os usuários mudem o valor de um campo que armazena dados de data ou horário. Por exemplo, em um formulário de cartão de crédito, um seletor de data permite que os usuários insiram ou mudem a data de validade do cartão.

Como os seletores são caixas de diálogo, eles não são mostrados em uma atividade junto com outros campos. Para mostrar os dados do seletor quando ele não estiver visível, você pode usar outra visualização, como EditText, que pode mostrar o valor quando o seletor não estiver visível.

Um objeto EditText espera dados de preenchimento automático do tipo AUTOFILL_TYPE_TEXT de forma nativa. Em contrapartida, os serviços de preenchimento automático salvam a data como AUTOFILL_TYPE_DATE para que seja possível criar uma representação adequada dela. Para solucionar a inconsistência nos tipos, recomendamos criar uma visualização personalizada herdada de EditText que implemente os métodos exigidos para processar corretamente os valores do tipo AUTOFILL_TYPE_DATE.

Siga as etapas a seguir para criar uma subclasse de EditText que possa processar valores do tipo AUTOFILL_TYPE_DATE:

1. Crie uma classe herdada de EditText.
2. Implemente o getAutofillType() método, que retorna AUTOFILL_TYPE_DATE.
3. Implemente o getAutofillValue() método, que retorna um AutofillValue objeto que representa a data em milissegundos. Para criar o objeto de retorno, use o método para gerar um objeto.forDate()AutofillValue
4. Implemente o autofill() método. Esse método fornece a lógica para manipular o AutofillValue parâmetro, que é do tipo AUTOFILL_TYPE_DATE. Para manipular o parâmetro, crie uma representação de string adequada dele, como mm/yyyy. Use a representação de string para definir a propriedade text da visualização.
5. Implemente a funcionalidade que mostra um seletor quando o usuário quer editar a data na subclasse personalizada de EditText. A visualização atualiza a propriedade text com uma representação de string do valor que o usuário seleciona no seletor.

Para ver um exemplo de uma subclasse de EditText que processa AUTOFILL_TYPE_DATE valores, consulte a amostra da Estrutura de preenchimento automático em Java ou Kotlin.

Para saber mais sobre como provar a compatibilidade com o preenchimento automático para suas visualizações personalizadas, consulte Estrutura de preenchimento automático.