Create Material Design Time Picker Tool Widget in pre Lollipop devices

How to implement material style time picker inside KitKat, Jelly bean, Ice cream sandwich android apps.

In this tutorial we are going to add fully material style Time Picker Tool widget inside our android app that can also support pre lollipop devices because material design comes with Android Lollipop 5.0 and any devices which has lower version of android 5.0 dose not support material style and if you want to use material design in pre lollipop devices then you have to use external libraries into your projects. So here is the complete step by step tutorial for Create Material Design Time Picker Tool Widget in pre Lollipop devices.

android-project-download-code-button

Note :  Please follow the below steps to add support library in your android application project :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:24.0.0'

compile 'com.wdullaer:materialdatetimepicker:2.3.0'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

time_picker_library

Here your go friends….Now We are going start coding.

How to Create Material Design Time Picker Tool Widget in pre Lollipop devices.

Code for MainActivity.java file.

package com.android_examples.materialdesigntimepicker_android_examplescom;
import android.content.DialogInterface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import java.util.Calendar;
import com.wdullaer.materialdatetimepicker.time.RadialPickerLayout;
import com.wdullaer.materialdatetimepicker.time.TimePickerDialog;

public class MainActivity extends AppCompatActivity implements TimePickerDialog.OnTimeSetListener {

    Button button;
    Calendar calendar ;
    TimePickerDialog timePickerDialog ;
    int CalendarHour, CalendarMinute;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = (Button)findViewById(R.id.button);

        calendar = Calendar.getInstance();

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                CalendarHour = calendar.get(Calendar.HOUR_OF_DAY);

                CalendarMinute = calendar.get(Calendar.MINUTE);

                timePickerDialog = TimePickerDialog.newInstance(MainActivity.this, CalendarHour, CalendarMinute, true);

                timePickerDialog.setThemeDark(false);

                timePickerDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {

                    @Override
                    public void onCancel(DialogInterface dialogInterface) {

                        Toast.makeText(MainActivity.this, "Time Not Selected", Toast.LENGTH_SHORT).show();
                    }
                });

                timePickerDialog.show(getFragmentManager(), "Material Design TimePicker Dialog");


            }
        });
    }

    @Override
    public void onTimeSet(RadialPickerLayout view, int hourOfDay, int minute, int second) {

        int Hour = 0 ;

        if(hourOfDay > 12)
        {
            switch (hourOfDay)
            {
                case 13 :
                    Hour = 1 ;
                    break;

                case 14 :
                    Hour = 2 ;
                    break;

                case 15 :
                    Hour = 3 ;
                    break;

                case 16 :
                    Hour = 4 ;
                    break;

                case 17 :
                    Hour = 5 ;
                    break;

                case 18 :
                    Hour = 6 ;
                    break;

                case 19 :
                    Hour =  7;
                    break;

                case 20 :
                    Hour = 8 ;
                    break;

                case 21 :
                    Hour = 9 ;
                    break;

                case 22 :
                    Hour = 10 ;
                    break;

                case 23 :
                    Hour = 11 ;
                    break;

                case 24 :
                    Hour = 12 ;
                    break;
            }

        }
        else {

            Hour = hourOfDay ;
        }

        String SelectedTime = "Selected Time is " + Hour + " : " + minute ;


        Toast.makeText(MainActivity.this, SelectedTime, Toast.LENGTH_LONG).show();
    }

}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.android_examples.materialdesigntimepicker_android_examplescom.MainActivity">

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CLICK HERE TO SHOW TIME PICKER DIALOG WITH MATERIAL DESIGN THEME"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />


</RelativeLayout>

Screenshots:

Material-Time-Picker-Tool-1

Create Material Design Time Picker Tool Widget in pre Lollipop devices

Material-Time-Picker-Tool-3

Material-Time-Picker-Tool-4

Click here to download Create Material Design Time Picker Tool Widget in pre Lollipop devices project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *