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)
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
Hi Jitesh,
ReplyDeleteI 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.