Android DatePicker Dialog Styling

Android DatePicker Dialog is a sub class of AlertDialog , containing an datepicker Widget for selecting date the date can be selected using year, month .

In the previous tutorial we have seen basic example of datepicker , In this article we will see how to style datepicker dialog ,Lets see an example .

XML Layout

  1. Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
  2. Add Button to your layout file 
file : activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity"
        android:gravity="center_horizontal">

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="22sp"
              android:id="@+id/selectedDate"/>

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

</LinearLayout>


DatePicker Dialog Styling


Create a style "MyDatePickerStyle" tag and extend it Theme.AppCompat.Light.Dialog, Add below attribute to style tag .Below Image is self explanatory .

file : style.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MyDatePickerStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#FF5722</item>
        <!--selected Item color-->
        <item name="colorControlActivated">#2196F3</item>
        <!-- arrow bordercolor(<>)-->
        <item name="android:selectableItemBackgroundBorderless">@color/border</item>
        <!-- Highlight item color-->
        <item name="colorControlHighlight">#d50000</item>
        <!--Calender Background color -->
        <item name="android:windowBackground">@color/dialogWindowBg</item>
        <!-- Ok Cancel Color-->
        <item name="android:textColor">#4CAF50</item>
        <!-- Week TextColor-->
        <item name="android:textColorSecondary">#E91E63</item>
        <!-- Calender Number color arrow color (< >) -->
        <item name="android:textColorPrimary">#3F51B5</item>
        <!--day , month-->
        <item name="android:textColorPrimaryInverse">#0ff</item>
        <!-- year-->
        <item name="android:textColorSecondaryInverse">#009688</item>

    </style>

</resources>

Activity

  1. Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
  2. Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml). 
file : MainActivity.kt
package com.tutorialsbuzz.androiddatepickeradvance

import android.app.DatePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.DatePicker
import kotlinx.android.synthetic.main.activity_main.*
import java.util.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val mcurrentTime = Calendar.getInstance()
        val year = mcurrentTime.get(Calendar.YEAR)
        val month = mcurrentTime.get(Calendar.MONTH)
        val day = mcurrentTime.get(Calendar.DAY_OF_MONTH)

        val datePicker = DatePickerDialog(this, R.style.MyDatePickerStyle, object : DatePickerDialog.OnDateSetListener {
            override fun onDateSet(view: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
                selectedDate.setText(String.format("%d / %d / %d", dayOfMonth, month + 1, year))
            }
        }, year, month, day);

        selectDate.setOnClickListener({ v ->
            datePicker.show()
        })
    }
}



No comments:

Post a comment