Monday, December 31, 2012

Android Custom Dialog

we can easily customize our applications in android and also the dialog's. sometimes we need custom-dialogs for a better UI representation. please make a new project with name AndroidCustomDialog and copy the following code to main activity class which is MainActivity.java
1)

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

Button btn, btnSearch, btnCancel;
Dialog dialog;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

btn = (Button) findViewById(R.id.btn);
btn.setOnClickListener(this);
}

protected void showCustomDialog() {

dialog = new Dialog(MainActivity.this,
android.R.style.Theme_Translucent);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

dialog.setCancelable(true);
dialog.setContentView(R.layout.dialog);


btnSearch = (Button) dialog.findViewById(R.id.btnsearch);
btnCancel = (Button) dialog.findViewById(R.id.btncancel);

btnSearch.setOnClickListener(this);
btnCancel.setOnClickListener(this);

dialog.show();
}


public void onClick(View v) {
switch (v.getId()) {
case R.id.btn:
showCustomDialog();
break;
case R.id.btnsearch:
Toast.makeText(MainActivity.this,
"OK  for you? " ,
Toast.LENGTH_LONG).show();

dialog.dismiss();
break;
case R.id.btncancel:
dialog.dismiss();
break;
default:
break;
}

}
}
2) go to main.xml and copy the given layout to it


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#d3d3d3"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Custom Dialog..."
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:text="click here" />

</RelativeLayout>

3) now it is time to mak a dialog layout dialog.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/bgdialog"
    android:orientation="vertical" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/info" />

        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My Custom Dialog is present here" />
    </LinearLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btnsearch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="27dp"
            android:text=" OK " />

        <Button
            android:id="@+id/btncancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="24dp"
            android:text=" Cancel " />
    </LinearLayout>

</LinearLayout>

4) now make a bgdialog.xml inside drawable folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:endColor="#00A3EF"
        android:startColor="#FFFFFF" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

    <stroke
        android:width="2dp"
        android:color="#000000" />

    <corners android:radius="40dp" />

</shape>

5) copy the following image to yours drawable folder


 6) you can see the following out put on emulator after running the code example sucessfully




1 comment:

  1. Hi Jitesh,
    I came across your site today while searching for some Android samples to begin my Android development learning.
    I may comment here if I have any doubts/questions. Thanks so much for such a methodical and systematic tutorial.

    ReplyDelete