[Android][Java] Material DatePicker 달력(캘린더) 사용하기

안녕하세요.

오늘 Material 라이브러리를 사용한 DatePicker 달력을 만드는 방법에 대해 알아보겠습니다.

해당 달력으로 날짜뿐만 아니라 시작일, 종료일을 지정해 날짜의 범위도 선택할 수 있습니다.

 

먼저 gradle에 라이브러리를 등록해줍니다.

 

build.gradle(Module:프로젝트명:app)
dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

implementation 'com.google.android.material:material:1.4.0'

 

다음으로 테마를 수정합니다.

 

themes.xml
( res -> value -> themes)
style 태그 속성 parent를 아래 코드로 변경해주시면 됩니다.

<style name="MaterialCustomRoot" parent="Theme.MaterialComponents.Light">

 

다음으로 레이아웃(xml 파일) 입니다.

activity_material_caledar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/date_picker_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:text="날짜"
        android:textColor="@color/black"
        android:textSize="30sp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp">

        <Button
            android:id="@+id/date_picker_btn"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="80dp"
            android:text="날짜 선택" />

        <Button
            android:id="@+id/date_range_picker_btn"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="80dp"
            android:text="기간 선택" />
    </RelativeLayout>
</LinearLayout>

단일 날짜만 선택할 수 있는 버튼과 기간을 선택할 수 있는 버튼, 선택한 날짜/ 기간을 표시해주는 텍스트뷰가 있습니다.

 

 다음으로 java 파일을 보겠습니다.

ActivityMaterialCalendar.java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.util.Pair;

import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.TimeZone;

public class ActivityMaterialCalendar extends AppCompatActivity {

    TextView datePickerText;

    Calendar calendar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_caledar);

        datePickerText = findViewById(R.id.date_picker_text);

        calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"));

        //오늘 날짜
        Long today = MaterialDatePicker.todayInUtcMilliseconds();

        //날짜 선택 버튼
        Button datePicker = findViewById(R.id.date_picker_btn);
        datePicker.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MaterialDatePicker materialDatePicker = MaterialDatePicker.Builder.datePicker()
                        .setTitleText("Date Picker")
                        .setSelection(today).build(); //오늘 날짜 셋팅

                materialDatePicker.show(getSupportFragmentManager(), "DATE_PICKER");

                //확인버튼
                materialDatePicker.addOnPositiveButtonClickListener(new MaterialPickerOnPositiveButtonClickListener<Long>() {
                    @Override
                    public void onPositiveButtonClick(Long selection) {

                        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy년 MM월 dd일");
                        Date date = new Date();
                        date.setTime(selection);

                        String dateString = simpleDateFormat.format(date);

                        datePickerText.setText(dateString);
                    }
                });
            }
        });

        //기간 선택 버튼
        Button dateRangePicker = findViewById(R.id.date_range_picker_btn);
        dateRangePicker.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MaterialDatePicker.Builder<Pair<Long, Long>> builder = MaterialDatePicker.Builder.dateRangePicker();

                builder.setTitleText("Date Picker");

                //미리 날짜 선택
                builder.setSelection(Pair.create(MaterialDatePicker.thisMonthInUtcMilliseconds(), MaterialDatePicker.todayInUtcMilliseconds()));

                MaterialDatePicker materialDatePicker = builder.build();

                materialDatePicker.show(getSupportFragmentManager(), "DATE_PICKER");

                //확인버튼
                materialDatePicker.addOnPositiveButtonClickListener(new MaterialPickerOnPositiveButtonClickListener<Pair<Long, Long>>() {
                    @Override
                    public void onPositiveButtonClick(Pair<Long, Long> selection) {
                        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy년 MM월 dd일");
                        Date date1 = new Date();
                        Date date2 = new Date();

                        date1.setTime(selection.first);
                        date2.setTime(selection.second);

                        String dateString1 = simpleDateFormat.format(date1);
                        String dateString2 = simpleDateFormat.format(date2);

                        datePickerText.setText(dateString1 + " \n " + dateString2);
                    }
                });
            }
        });
    }
} // ActivityMaterialCalendar.java

 

실행화면 입니다.

 

오늘 준비한 내용은 여기까지 입니다.

궁금한 점은 댓글로 남겨주세요.

감사합니다!