Wednesday 3 April 2013

How to create Custom dialog in android ? How it useful for real world programming ?

Custom dialog created by using your layout file and that file you can bind your layout to dialog box.And it is useful when we have to integrate facebook,twitter and all other real word programming.

Steps To Create Custom Dialog
==========================

1. Create your layout which is shown in dialog.
2. Bind that layout file to dialog
3. Show your Dialog on any event.
4. Done





1.Layout your android custom dialog in xml file. create new project in android and give name CustomDialog in that layout folder create file login.xml which is your dialog file and write above code.

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"     android:layout_height="wrap_content"    android:background="#ff00ff"   android:orientation="vertical">      <TextView          android:id="@+id/username_view"         android:layout_height="wrap_content"         android:layout_width="wrap_content"         android:layout_marginLeft="20dip"         android:layout_marginRight="20dip"         android:text="@string/username"         android:gravity="left"         android:textAppearance="?android:attr/textAppearanceMedium"       />                  <EditText        android:id="@+id/username_edit"        android:layout_height="wrap_content"        android:layout_width="match_parent"        android:layout_marginLeft="20dip"        android:layout_marginRight="20dip"        android:scrollHorizontally="true"        android:autoText="false"        android:singleLine="true"        android:capitalize="none"        android:gravity="fill_horizontal"        android:textAppearance="?android:attr/textAppearanceMedium" />     <TextView        android:id="@+id/password_view"        android:layout_height="wrap_content"        android:layout_width="wrap_content"        android:layout_marginLeft="20dip"        android:layout_marginRight="20dip"        android:text="@string/password"        android:gravity="left"        android:textAppearance="?android:attr/textAppearanceMedium"       />       <EditText         android:id="@+id/password_edit"       android:layout_height="wrap_content"       android:layout_width="match_parent"       android:layout_marginLeft="20dip"       android:layout_marginRight="20dip"       android:scrollHorizontally="true"       android:autoText="false"       android:singleLine="true"       android:capitalize="none"       android:gravity="fill_horizontal"       android:password="true"       android:textAppearance="?android:attr/textAppearanceMedium"       />  </LinearLayout>

2. Now create your second xml file call first.xml file in layout which is shown after login done

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="match_parent"  android:layout_height="match_parent"        <TextView       android:layout_width="wrap_content"       android:layout_height="wrap_content"        android:text="Welcome to First Page"         android:textColor="#00ff00"     /> </LinearLayout>

3. Now change the code of main.xml file which is available in layout folder to show your dialog in this layout we have put one button.

<?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:gravity="center"  android:orientation="vertical">              <Button        android:id="@+id/button"        android:layout_width="wrap_content"       android:textColorHint="#00FF00"       android:textColor="#FF0000"       android:textSize="20px"       android:layout_height="wrap_content"           android:text="Login"/> </LinearLayout>  

4. Now bind all xml file to java file so look at src folder in your project and change the CustomDialogActivity.java file. You can loged in by using same username and password.

package your package name.CustomDialog;
import your package name.CustomDialog.CustomDialogActivity;
import your package name.CustomDialog.R;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class CustomDialogActivity extends Activity
{
   private static final int DIALOG_TEXT_ENTRY = 1;
   protected Dialog onCreateDialog(int id)   
   {
       switch (id) 
       {
            case DIALOG_TEXT_ENTRY:
           // This example shows how to add a custom layout to an AlertDialog 
                        LayoutInflater factory = LayoutInflater.from(this);
                        final View textEntryView = factory.inflate(R.layout.login,null);
                        return new AlertDialog.Builder(CustomDialogActivity.this)
                        .setIcon(R.drawable.user)
                        .setTitle(R.string.txt_entry)
                        .setView(textEntryView)
                        .setPositiveButton(R.string.Login, new DialogInterface.OnClickListene()               
                         {
                             public void onClick(DialogInterface dialog, int whichButton);                  
                             {
                                   EditText username,password;                 
                                   username=(EditText)textEntryView.findViewById(R.id.username_edit);
                                   password=(EditText)textEntryView.findViewById(R.id.password_edit);
                                    if(username.getText().toString.equals(password.getText().toString()))
                                    {
                                       Intent i=new Intent(CustomDialogActivity.this,First.class);
                                       startActivity(i);
                                    }
                         })
                 .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener()  
                 {
                     public void onClick(DialogInterface dialog, int whichButton) 
                     {    
                     /* User clicked cancel so do some stuff */
                     }
                 }).create();      
     }
     return null;
}
   
/** Called when the activity is first created. */
   
@Override protected void onCreate(Bundle savedInstanceState) 
{
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       Button textEntry = (Button) findViewById(R.id.button);
       textEntry.setOnClickListener(new OnClickListener() 
       {
              public void onClick(View v) 
              {
                   showDialog(DIALOG_TEXT_ENTRY);
              }
        });
 
    }
}


5. Now Create your second class called First.java file in src folder

package com.ss.paresh.DD;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
public class First extends Activity
{
     protected void onCreate(Bundle savedInstanceState) 
     {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.first);
        Intent i=getIntent();
    }
}


6. Important note about this post put one drawable name user.png in your drawable folder otherwise error occurs in your project now your custom dialog project is completed run build and go best of luck.

 

 

1 comment:

  1. Custom dialog created by using your layout file and that file you can bind your layout to dialog box.And it is useful when we have to integrate facebook,twitter and all other real word programming.oh its really interesting.


    App builder online

    ReplyDelete