Showing posts with label Custom Dialog. Show all posts
Showing posts with label Custom Dialog. Show all posts

Saturday, October 20, 2012

Creating DatePicker using DialogFragment in android

Android has transform its UI after 3.1. They had deprecated Activity Group and so many other thing and introduce Fragment. Maintaining Fragment is comparatively easy. Just few month back they they introduce DialogFragment and deprecated showDialog(id) method. it affects creating DatePicker and TimePicker also.so today we will discuss about creating DatePicker using brand new concept DialogFragment.

For More Information on  Fragment Visit Integration Of Action Bar And Fragment

Creating DatePicker using DialogFragment is quite easy. Lets divide it in step and make it more easy :)

Step 1) Repeated step create a new Project

Step 2) Add one button to your main xml. So that on click this button we can show Date Picker

<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:orientation="vertical" >

<Button
android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp"
android:text="@string/show_date_picker_fragment" />

</LinearLayout> 
View Of XML

Step 3) Change your activity to a Fragment Activity and replace with below code

package com.home;

import java.util.Calendar;

import android.app.DatePickerDialog.OnDateSetListener;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.DatePicker;
import android.widget.Toast;

import com.dialog.DatePickerFragment;

public class MainActivity extends FragmentActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.date).setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
showDatePicker();
}
});
}

private void showDatePicker() {
DatePickerFragment date = new DatePickerFragment();
/**
* Set Up Current Date Into dialog
*/
Calendar calender = Calendar.getInstance();
Bundle args = new Bundle();
args.putInt("year", calender.get(Calendar.YEAR));
args.putInt("month", calender.get(Calendar.MONTH));
args.putInt("day", calender.get(Calendar.DAY_OF_MONTH));
date.setArguments(args);
/**
* Set Call back to capture selected date
*/
date.setCallBack(ondate);
date.show(getSupportFragmentManager(), "Date Picker");
}

OnDateSetListener ondate = new OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear,
int dayOfMonth) {
Toast.makeText(
MainActivity.this,
String.valueOf(year) + "-" + String.valueOf(monthOfYear)
+ "-" + String.valueOf(dayOfMonth),
Toast.LENGTH_LONG).show();
}
};

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

Step Final ) Now you are done from your side..We just need to create one class that will extends DialogFragment and will return a DatePicker .

package com.dialog;

import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.app.Dialog;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;

public class DatePickerFragment extends DialogFragment {
OnDateSetListener ondateSet;

public DatePickerFragment() {
}

public void setCallBack(OnDateSetListener ondate) {
ondateSet = ondate;
}

private int year, month, day;

@Override
public void setArguments(Bundle args) {
super.setArguments(args);
year = args.getInt("year");
month = args.getInt("month");
day = args.getInt("day");
}

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
return new DatePickerDialog(getActivity(), ondateSet, year, month, day);
}
}

See how to integrate Action bar with Tab

Wednesday, August 1, 2012

Date Time Picker in android

We know how simple is to create Date Picker Dialog and  Time Picker Dialog ! but so what about a situation where we  need to pick Time and Date both at once with all attributes e.g AM_PM, second, minute, Hour, Month, Year etc. We got stuck  right?

I have search a lot about this on Google but i did not find efficient and easy solution. So decide to write about this important concept. While you are developing any android application then you just copy one class from my sample project. and your work has done.

There are two simple step to understand what's going on in my project

1) Create object of CustomDateTimePicker with two argument Your Current activity context and one Call back listener so that when you select time and date, it will return result

2) CustomDateTimePicker has number of method to fulfill your custom requirement like---


/**
* Pass Directly current time format it will return AM and PM if you set
* false
*/
custom.set24HourFormat(false);

                 /**
* Pass Directly current data and time to show when it pop up
*/
custom.setDate(Calendar.getInstance());

Custom is instance of my CustomDateTimePicker .Except this , CustomDateTimePicker  has number of method. 


                       The Output of my sample project will be like these screen shot.

Date time Picker
Date And Time Picker

Selected Value
          
                                                       

                                                              Download Source Code


Monday, July 23, 2012

Replacing spinner with drop down alert in android application

Dialog box are powerful tools in android. They have given so much access in dialog box so that we  do not need to use spinner. You can create simple Alert Dialog, Custom Alert dialog, Multiple choice, Single choice , Alert Dialog with Base adapter. We easily can create them.

I am going to create All type of dialog boxes with screen shot and source code.

1) Simple Alert Box or Default Alert Box - creating a simple alert dialog is very simple

   private void SimpleAlert() {  
Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Simple Alert");
builder.setMessage("This is simple alert box");
builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
AlertDialog alert = builder.create();
alert.show();
}


2) Simple Single Choice Dialog box -
you can create single choice dialog. For this you just need to pass a string array in you dialog box setItem methods

   private void SingleChoice() {  
Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Single Choice");
builder.setItems(selectFruit, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this,
selectFruit[which] + " Selected", Toast.LENGTH_LONG)
.show();
dialog.dismiss();
}
});
builder.setNegativeButton("cancel",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
AlertDialog alert = builder.create();
alert.show();
}

Simple single choice dialog box
Single Choice

                               
3)Single choice alert box with Radio button -  If you want to make single choice box with radio button then change it like that

   private void SingleChoiceWithRadioButton() {  
Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Single Choice With Radio button");
builder.setSingleChoiceItems(selectFruit, -1,
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this,
selectFruit[which] + " Selected",
Toast.LENGTH_LONG).show();
dialog.dismiss();
}
});
builder.setNegativeButton("cancel",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
AlertDialog alert = builder.create();
alert.show();
}

Single Choice dialog with radio button in android
Single Choice Dialog With Radio Button
                                                     

4) Mulitple Choice Alert Dialog Box - Its some what complicated. For that you need to corresponding array one for values and one for their corresponding slected position . Now when you set select, you have to compare values with selected array


 private void MultipleChoiceAlertBox() {  
Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Multiple Choice");
builder.setMultiChoiceItems(selectFruit, selectVal,
new DialogInterface.OnMultiChoiceClickListener() {
@Override
public void onClick(DialogInterface dialog, int which,
boolean isChecked) {
selectVal[which] = isChecked;
}
});
builder.setPositiveButton("Set", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
for (int i = 0; i < selectFruit.length; i++) {
if (selectVal[i]) {
selectetdVal += "+" + selectFruit[i];
}
}
Toast.makeText(MainActivity.this, selectetdVal,
Toast.LENGTH_LONG).show();
}
});
builder.setNegativeButton("cancel",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
AlertDialog alert = builder.create();
alert.show();
}
Multiple Choice dialog in android
Multiple Choice Dialog
                                             

Select Value


                                                 
5) Creating custom alert using Adapter -  This is awesome way to create dialog with you fully customize view.you can show a complete list view inside a dialog box in android. Here i have taken simple array adapter but you can take complex base adapter here like List View.

      private void AlertUsingAdapter() {  
Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Adapter Alert");
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1);
for (int i = 0; i < selectVal.length; i++) {
arrayAdapter.add(selectFruit[i]);
}
builder.setAdapter(arrayAdapter, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(AllAlertBoxExample.this, selectFruit[which],
Toast.LENGTH_LONG).show();
}
});
builder.setPositiveButton("Cancel",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
AlertDialog alert = builder.create();
alert.show();
}
                                   
Alert dialog with Base Adapter
Alert Box with Adapter
                                       
In last Dialog we can customize at any level. All though i have posted each method of its own type of dialog but if you have any difficulty then you can download source from latest article Creating Time Picker in android.

Related Article on this Blog

Purely Custom Dialog in android



  

Wednesday, April 4, 2012

Android: Creating custom alert dialog

In android sometimes we want to display some data but we do not want to start a new activity.As starting a new activity is not feasible in some cases.So what should we do?

First take a case

We have news showing in List-View now if some one click on on particular news then it should show detail about this this news.so instead of starting new activity we can just pop a custom dialog (with same view as activity) then we will use a custom dialog for this. Because of its benefit we call this custom dialog as Dialog activity

Step 1) Create a new project in android

Step 2) Change your main.xml as follows

  <?xml version="1.0" encoding="utf-8" ?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
<Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/start" android:id="@+id/show_dialog" />
</LinearLayout>



Step 3) Create a new xml to showing our custom dialog
 
 <?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFF00"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="@string/msg"
android:textColor="#000" >
</TextView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clickable="true" android:id="@+id/dismis_dialog"
android:text="@string/dismis" />
</LinearLayout>

Step 4) Change your main activity code to as following


 package com.ahmad.com;  
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
public class CustomDialogActivity extends Activity implements OnClickListener {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
findViewById(R.id.show_dialog).setOnClickListener(this);
}
@Override
public void onClick(View v) {
CustomDialogClass cdd=new CustomDialogClass(this);
cdd.show();
}
}
Step 5) Create a new class for showing dialog
package com.ahmad.com;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class CustomDialogClass extends Dialog implements android.view.View.OnClickListener{
public CustomDialogClass(Context context) {
super(context);
}
Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dialog);
setTitle("This Sameer Custom Dialog");
btn=(Button) findViewById(R.id.dismis_dialog);
btn.setOnClickListener(this);
}
@Override
public void onClick(View v) {
dismiss();
}
}


Enjoy this will show a custom dialog as below images


If you click on button show dialog it will show a dialog.your can dismis this dialog by clicking on dismiss button


   

Final thing how to remove title of dialog if you do not want this

In on-create() method of dialog class write this one line

this.findViewById(android.R.id.title).setVisibility(View.GONE);

If you like this please leave a comment.If you have any doubt then also mention your problem by leaving comment
Posting Lama ►
 

Copyright 2013 Tutorials For Newbie: Custom Dialog Template by CB Blogger Template. Powered by Blogger