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
- Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
- Add Button to your layout file
<?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 .
<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
- Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
- Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml).
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