Change TimePickerDialog theme in android programmatically

How to modify + create custom timepicker dialog in android with default dark, light, holo light, dark and traditional.

Time picker dialog comes with 5 different type of themes Default dark, Default light, Holo light, Holo dark and Traditional theme. App developer can set any of theme using DialogFragment class and get the selected time from it. So here in my this tutorial we are creating 5 buttons and each button connected to one class that is holding time picker dialog with theme. So here is the complete step by step tutorial for Change TimePickerDialog theme in android programmatically.

android-project-download-code-button

How to Change TimePickerDialog theme in android programmatically.

Code for MainActivity.java file.

 package com.timepickertheme_android_examples.com;

import java.util.Calendar;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.TimePicker;

public class MainActivity extends Activity {

 // Creating 5 buttons, Each button for each theme.
 Button Theme1,Theme2,Theme3,Theme4,Theme5;
 
 //Creating TextView to display selected time.
 TextView DisplayTime;
 
 //Creating calendar. 
 Calendar calendar;
 
 int Chour,Cminute;
 
 //Creating 5 TimePickerDialog, each one for different theme.
 TimePickerDialog timepickerdialog1,
 timepickerdialog2,
 timepickerdialog3,
 timepickerdialog4,
 timepickerdialog5;
 
 DialogFragment dialogfragment;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 Theme1 = (Button)findViewById(R.id.button1);
 Theme2 = (Button)findViewById(R.id.button2);
 Theme3 = (Button)findViewById(R.id.button3);
 Theme4 = (Button)findViewById(R.id.button4);
 Theme5 = (Button)findViewById(R.id.button5);
 
 DisplayTime = (TextView)findViewById(R.id.textView1);
 
 calendar = Calendar.getInstance();
 Chour = calendar.get(Calendar.HOUR_OF_DAY);
 Cminute = calendar.get(Calendar.MINUTE);
 
 Theme1.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 //Creating object of TimePickerTheme1class using DialogFragment.
 dialogfragment = new TimePickerTheme1class();

 dialogfragment.show(getFragmentManager(),"Time Picker with Theme 1");
 
 }
 });
 
 Theme2.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 //Creating object of TimePickerTheme2class using DialogFragment.
 dialogfragment = new TimePickerTheme2class();

 dialogfragment.show(getFragmentManager(),"Time Picker with Theme 2");
 
 }
 });

 Theme3.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 //Creating object of TimePickerTheme3class using DialogFragment.
 dialogfragment = new TimePickerTheme3class();

 dialogfragment.show(getFragmentManager(),"Time Picker with Theme 3");
 
 }
 });

 Theme4.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 //Creating object of TimePickerTheme4class using DialogFragment.
 dialogfragment = new TimePickerTheme4class();

 dialogfragment.show(getFragmentManager(),"Time Picker with Theme 4");
 
 }
 });

 Theme5.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 //Creating object of TimePickerTheme5class using DialogFragment.
 dialogfragment = new TimePickerTheme5class();

 dialogfragment.show(getFragmentManager(),"Time Picker with Theme 5");
 
 }
 });
 
 }
 
 public class TimePickerTheme1class extends DialogFragment implements TimePickerDialog.OnTimeSetListener{

 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState){

 timepickerdialog1 = new TimePickerDialog(getActivity(),
 AlertDialog.THEME_DEVICE_DEFAULT_DARK,this,Chour,Cminute,false);

 return timepickerdialog1;
 }

 public void onTimeSet(TimePicker view, int hourOfDay, int minute){
 
 DisplayTime.setText(hourOfDay + ":" + minute);
 }
 
}
 
 public class TimePickerTheme2class extends DialogFragment implements TimePickerDialog.OnTimeSetListener{

 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState){

 timepickerdialog1 = new TimePickerDialog(getActivity(),
 AlertDialog.THEME_DEVICE_DEFAULT_LIGHT,this,Chour,Cminute,false);

 return timepickerdialog1;
 }

 public void onTimeSet(TimePicker view, int hourOfDay, int minute){

 DisplayTime.setText(hourOfDay + ":" + minute);
 }
 
}
 
 public class TimePickerTheme3class extends DialogFragment implements TimePickerDialog.OnTimeSetListener{

 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState){

 timepickerdialog1 = new TimePickerDialog(getActivity(),
 AlertDialog.THEME_HOLO_DARK,this,Chour,Cminute,false);

 return timepickerdialog1;
 }

 public void onTimeSet(TimePicker view, int hourOfDay, int minute){

 DisplayTime.setText(hourOfDay + ":" + minute);
 }
 
}
 
 public class TimePickerTheme4class extends DialogFragment implements TimePickerDialog.OnTimeSetListener{

 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState){

 timepickerdialog1 = new TimePickerDialog(getActivity(),
 AlertDialog.THEME_HOLO_LIGHT,this,Chour,Cminute,false);

 return timepickerdialog1;
 }

 public void onTimeSet(TimePicker view, int hourOfDay, int minute){
 
 DisplayTime.setText(hourOfDay + ":" + minute);
 }
 
}
 
 public class TimePickerTheme5class extends DialogFragment implements TimePickerDialog.OnTimeSetListener{

 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState){

 timepickerdialog1 = new TimePickerDialog(getActivity(),
 AlertDialog.THEME_TRADITIONAL,this,Chour,Cminute,false);

 return timepickerdialog1;
 }

 public void onTimeSet(TimePicker view, int hourOfDay, int minute){
 
 DisplayTime.setText(hourOfDay + ":" + minute);
 }
 
}
 
}

Code for activity_main.xml layout file.

 <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.timepickertheme_android_examples.com.MainActivity" >

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:text="Display Time"
 android:textAppearance="?android:attr/textAppearanceLarge" />

 <Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/textView1"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="29dp"
 android:text="TimePickerDialog Theme 1" />

 <Button
 android:id="@+id/button2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignLeft="@+id/button1"
 android:layout_below="@+id/button1"
 android:text="TimePickerDialog Theme 2" />

 <Button
 android:id="@+id/button3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/button2"
 android:layout_centerHorizontal="true"
 android:text="TimePickerDialog Theme 3" />

 <Button
 android:id="@+id/button4"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/button3"
 android:layout_centerHorizontal="true"
 android:text="TimePickerDialog Theme 4" />

 <Button
 android:id="@+id/button5"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/button4"
 android:layout_centerHorizontal="true"
 android:text="TimePickerDialog Theme 5" />

</RelativeLayout>

Screenshot :

Click here to download Change TimePickerDialog theme in android programmatically project with source code.

Leave a Reply

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