Showing posts with label Time Picker. Show all posts
Showing posts with label Time Picker. Show all posts

Saturday, December 03, 2016

Time Picker


Time Picker is a type of dialog in android which is used to get time by the user. In this tutorial, I am covering the use of material design time picker 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 time 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.time.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.time.picker.MainActivity">
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                                create default time picker                              -->
        <!--_____________________________________________________-->
    
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="defaultTimePickerDialog"
            android:text="Default Time Picker Dialog" />
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                             create custom time picker                                -->
        <!--_____________________________________________________-->
    
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="customTimePickerDialog"
            android:text="Custom Time Picker Dialog" />
    </LinearLayout>
    
    
     
  6. Open your MainActivity.JAVA class and update it -

    package com.time.picker;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.TimePicker;
    import android.widget.Toast;
    import com.wdullaer.materialdatetimepicker.time.TimePickerDialog;
    import java.util.Calendar;
    
    public class MainActivity extends AppCompatActivity implements TimePickerDialog.OnTimeSetListener, android.app.TimePickerDialog.OnTimeSetListener {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }
    
        //__methode will be call when we click on "Default Time Picker Dialog" and will be show the default date selection dilog.
        public void defaultTimePickerDialog(View view) {
            Calendar now = Calendar.getInstance();
            android.app.TimePickerDialog dpd = new android.app.TimePickerDialog(this, this, now.get(Calendar.HOUR), now.get(Calendar.MINUTE), false);
            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 customTimePickerDialog(View view) {
            Calendar now = Calendar.getInstance();
            TimePickerDialog dpd = TimePickerDialog.newInstance(this, now.get(Calendar.HOUR), now.get(Calendar.MINUTE), false);
            dpd.show(getFragmentManager(), "Timepickerdialog");
        }
    
        //___this is the listener callback method will be call on time selection by default date picker.
        @Override
        public void onTimeSet(TimePicker timePicker, int hourOfDay, int minute) {
            Toast.makeText(this, "Selected by default time picker : " + hourOfDay + ":" + minute, Toast.LENGTH_SHORT).show();
        }
    
        //___this is the listener callback method will be call on time selection by custom date picker.
        @Override
        public void onTimeSet(TimePickerDialog view, int hourOfDay, int minute, int second) {
            Toast.makeText(this, "Selected by custom time picker : " + hourOfDay + ":" + minute + ":" + second, Toast.LENGTH_SHORT).show();
        }
    }
    

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



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



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



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



    for the selection of minute click on the minute or select an hour then a screen will be open for seconds




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





  12. Good bye, Thanks to read this blog.