[ Android / Kotlin ] DatePicker 활용하기 ( +Custom)

DatePicker를 사용해보겠습니다.

우선 DatePicker를 사용하기 위한 Activity를 생성한 후 해당 xml 파일로 넘어가봅니다.

 

activity_date_picker.xml

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".DatePickerActivity">
    
        
    <!--Date Picker-->

    <DatePicker
        android:id="@+id/datePicker1"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:calendarViewShown="false"
        android:datePickerMode="calendar"
        android:scaleX="1.2"
        android:scaleY="1.2" />

    <ImageView
        android:id="@+id/yearcalendar"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="30dp"
        android:layout_marginRight="30dp"
        android:scaleType="centerCrop"
        android:src="@drawable/calendar_icon" />


    <RelativeLayout
        android:background="#fff"
        android:id="@+id/getdate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/datePicker1"
        android:layout_marginTop="50dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button1"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="20dp"
            android:background="@color/calendar_day_button_bg"
            android:text="Get"
            android:textSize="15dp" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="20dp"
            android:textSize="18dp"
            android:textStyle="bold" />
    </RelativeLayout>

</RelativeLayout>

 

 

DatePicker : 캘린더 

ImageView : 설정한 년도 미리보기 Button 기능 

Button : 선택한 날짜 정보 불러오는 버튼 

TextView :  선택한 날짜 정보 표시 

 

 

DatePickerActivity.kt

package com.example.kokoapplication;
import android.content.Intent
import android.net.Uri
import android.os.Bundle;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.ImageView
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity
import java.util.Calendar.*

class DatePickerActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_date_picker)

        val picker : DatePicker = findViewById(R.id.datePicker1) //DatePicker id 
        val btnGet : Button = findViewById(R.id.button1) //Button id 
        val tvw : TextView = findViewById(R.id.textView1) //TextView id 

        val minDate = getInstance()
        val maxDate = getInstance()

        minDate.set(2020,1-1,1); // 보여줄 최소 날짜 

        picker.setMinDate(minDate.getTime().getTime()); // 보여줄 최소 날짜 picker에 Set 

        maxDate.set(2024,1-1,1); // 보여줄 최대 날짜 
        picker.setMaxDate(maxDate.getTimeInMillis());  // 보여줄 최대 날짜  picker에 적용 Set 

        btnGet.setOnClickListener { // 버튼 click 시 선택 된 날짜 정보 불러옴
            tvw.setText("Selected Date: "+ picker.getDayOfMonth()+"/"+ (picker.getMonth() + 1)+"/"+picker.getYear());
        }
        
    }
}

 

+ DatePicker Custom 

res > values > styles.xml 생성 

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CreateProfileTheme" parent="Theme.AppCompat.Light">

        <!-- 상단 Title 배경색 -->
        <item name="colorAccent">@color/calendar_day_selected_font</item>

        <!-- 선택한 날짜 배경 색 -->
        <item name="colorControlActivated">@color/calendar_day_selected_bg</item>

        <!-- Highlight item color-->
        <item name="colorControlHighlight">@color/calendar_day_selected_bg</item>

        <!--Calender Background color -->
        <item name="android:colorBackground">@color/calendar_bg</item>

        <!-- Week TextColor-->
        <item name="android:textColorSecondary">@color/calendar_day_normal_font</item>

        <!-- Calender Number color arrow color (< >) -->
        <item name="android:textColorPrimary">@color/calendar_day_normal_font</item>

        <!--day , month TextColor-->
        <item name="android:textColorPrimaryInverse">@color/calendar_month_font</item>

        <!-- year-->
        <item name="android:textColorSecondaryInverse">@color/calendar_month_font</item>

        <!-- 취소/확인버튼 색상 -->
        <item name="android:textColor">@color/calendar_day_normal_font</item>

        <item name="android:textSize">20sp</item>

        <item name="cornerSize">16dp</item>

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>

        <item name="fontFamily">@font/font_style</item>

    </style>
</resources>

 

DatePickerActivity에 해당 style 적용시키기 

 

AndroidManifest.xml

 

<activity
    android:name=".DatePickerActivity"
    android:exported="true"
    android:theme="@style/CreateProfileTheme"
    >

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>

</activity>

 

 

basic

 

get button click 

 

calendar icon click

 

 

이상 DatePicker에 대해 알아봤습니다. 

 

P.S : 부족한 부분은 계속해서 수정하겠습니다. 🥰

 

 

참조 

https://www.tutlane.com/tutorial/android/android-datepicker-with-examples

Android DatePicker with Examples - Tutlane

https://www.tutorialsbuzz.com/2019/09/android-datepicker-dialog-styling-kotlin.html

Android DatePicker Dialog Styling