Showing posts with label Material Design Date Picker before 21. Show all posts
Showing posts with label Material Design Date Picker before 21. Show all posts

Saturday, December 03, 2016

Date Picker


Date Picker is a type of dialog in android which is used to get date by the user. In this tutorial, I am covering the use of material design datepicker before api level 21.




Steps to use date picker in your project.
  1. Crate a project in android studio.
  2. Open build.gradle(app).
  3. Add a dependancy (<project>/<app-module>/build.gradle)-

     //   if you want to use default date picker then just skip this step
    compile 'com.wdullaer:materialdatetimepicker:3.0.0' 

    
    
  4. Click on sync project .


    apply plugin: 'com.android.application'
    android {
    
        compileSdkVersion 25
        buildToolsVersion "25.0.0"
    
        defaultConfig {
            applicationId "com.date.picker"
            minSdkVersion 15
            targetSdkVersion 25
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        }
    
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
            exclude group: 'com.android.support', module: 'support-annotations'
        })
        compile 'com.android.support:appcompat-v7:25.0.0'
        testCompile 'junit:junit:4.12'
       
     //use for custom(Material design) date picker before api21
        compile 'com.wdullaer:materialdatetimepicker:3.0.0'
    }
    
     

  5. Open your main_activity.xml and update it-

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context="com.date.picker.MainActivity">
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                                create default date picker                              -->
        <!--_____________________________________________________-->
    
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="defaultDatePickerDialog"
            android:text="Default Date Picker Dialog" />
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                             create custom date picker                                -->
        <!--_____________________________________________________-->
    
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="customDatePickerDialog"
            android:text="Custom Date Picker Dialog" />
    </LinearLayout>
    
    
    
     
  6. Open your MainActivity.JAVA class and update it -

    package com.date.picker;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.DatePicker;
    import android.widget.Toast;
    import com.wdullaer.materialdatetimepicker.date.DatePickerDialog;
    import java.util.Calendar;
    
    public class MainActivity extends AppCompatActivity implements DatePickerDialog.OnDateSetListener  /*____implementation for custom date select listener______*/, android.app.DatePickerDialog.OnDateSetListener    /*____implementation for default date select listener______*/ {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }
        
        //__methode will be call when we click on "Default Date Picker Dialog" and will be show the default date selection dilog.
        public void defaultDatePickerDialog(View view) {
            Calendar now = Calendar.getInstance();
            android.app.DatePickerDialog dpd = new android.app.DatePickerDialog(this, this, now.get(Calendar.YEAR),
                    now.get(Calendar.MONTH),
                    now.get(Calendar.DAY_OF_MONTH));
            dpd.show();
        }
        
        //__methode will be call when we click on "Custom Date Picker Dialog" and will be show the custom date selection dilog.
        public void customDatePickerDialog(View view) {
            Calendar now = Calendar.getInstance();
            DatePickerDialog dpd = DatePickerDialog.newInstance(
                    this,
                    now.get(Calendar.YEAR),
                    now.get(Calendar.MONTH),
                    now.get(Calendar.DAY_OF_MONTH)
            );
            dpd.show(getFragmentManager(), "DatePickerDialog");
        }
    
        //___this is the listener callback method will be call on date selection by default date picker.
        @Override
        public void onDateSet(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) {
            Toast.makeText(this, "Selected by default date picker : " +datePicker.getDayOfMonth() + "/" + (datePicker.getMonth()+1) + "/" + datePicker.getYear(), Toast.LENGTH_SHORT).show();
        }
        
        //___this is the listener callback method will be call on date selection by custom date picker.
        @Override
        public void onDateSet(DatePickerDialog view, int year, int monthOfYear, int dayOfMonth) {
            Toast.makeText(this, "Selected by custom date picker : " + dayOfMonth + "/" + (monthOfYear+1) + "/" + year, Toast.LENGTH_SHORT).show();
        }
    }
    

  7. Now all the development steps for DatePicker has completed, Please run the application and see the screen of device.



  8. Now click on "Default Date Picker Dialog" and see the screen - 



  9. Now select any date and click on "ok" and see the screen-



  10. Now click on "Custom Date Picker Dialog" and see the screen - 



    for the selection of year click on the year and select any year




  11. Now select any date and click on "ok" and see the screen-





  12. Good bye, Thanks to read this blog.