Board index
FAQ
Register
Login
As the support for the community i would like to post one tutorial on the custom dialog in Android. In one sentence , lets have dialog box similar to one in iPhone.
I know sticking to basics and default is the best but sometime we need to go out of it due to requirements from the clients or from sheer competition .
First lets define the function for the alert pop-up
- Code: Select all
[syntax="java"]
/**
* it will show the OK dialog like iphone, make sure no keyboard is visible
*
* @param pTitle - title for dialog ( like Alert,COnfirmation...)
* @param pMsg - msg for body (like "Are you sure you want to exit this app")
*/
private void showCustomMessage(String pTitle, final String pMsg) {
final Dialog lDialog = new Dialog(ParkingMeterScreenActivity.this,
android.R.style.Theme_Translucent_NoTitleBar);
lDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
lDialog.setContentView(R.layout.r_okcanceldialogview);
((TextView) lDialog.findViewById(R.id.dialog_title)).setText(pTitle);
((TextView) lDialog.findViewById(R.id.dialog_message)).setText(pMsg);
((Button) lDialog.findViewById(R.id.ok)).setText("Ok");
((Button) lDialog.findViewById(R.id.cancel))
.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
// code on user pressing cancel button
lDialog.dismiss();
}
});
((Button) lDialog.findViewById(R.id.ok))
.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
// code on user pressing ok button
lDialog.dismiss();
}
});
lDialog.show();
}
[/syntax]
Code for the xml layout dialog box :
- Code: Select all
[syntax="xml"]
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="@drawable/alert"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dip"
android:textColor="#ffffff"
android:text="About to call 323"
android:textStyle="bold"
android:textSize="16dip"
android:id="@+id/dialog_title"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:gravity="center_horizontal"
android:textSize="16dip"
android:textColor="#ffffff"
android:text="Are you sure you want to proceed?"
android:id="@+id/dialog_message"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:gravity="center_horizontal"
>
<Button android:layout_height="40dip"
android:layout_width="0dip"
android:background="@drawable/custom_button1"
android:layout_weight="0.5"
android:layout_gravity="left"
android:textColor = "@color/White"
android:text="Cancel"
android:textStyle="bold"
android:layout_marginLeft="10dip"
android:id="@+id/cancel" />
<Button android:layout_height="40dip"
android:layout_width="0dip"
android:background="@drawable/custom_button"
android:text="OK"
android:textStyle="bold"
android:layout_weight="0.5"
android:textColor="@color/White"
android:layout_marginRight="10dip"
android:layout_marginBottom="10dip"
android:id="@+id/ok" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
[/syntax]
Lets see the custom background elements thats used in the example - custom_button :
- Code: Select all
[syntax="xml"]
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/nofocused" >
<!-- <shape>
<gradient
android:endColor="#5c5c5c"
android:startColor="#5c5c5c"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#b3b3b4" />
<corners
android:radius="3dp" />
<padding
android:top="10dp"
android:bottom="10dp" />
</shape>-->
</item>
<item android:state_focused="true" android:drawable="@drawable/nofocused" >
</item>
<item android:drawable="@drawable/focused">
<!-- <shape>
<gradient
android:endColor="#c1c1c1"
android:startColor="#c1c1c1"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#e5e5e5" />
<corners
android:radius="3dp" />
<padding
android:top="10dp"
android:bottom="10dp" />
</shape>-->
</item>
</selector>
[/syntax]
Now 2nd Custom background element - custom_button1:
- Code: Select all
[syntax="xml"]
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/focused" >
<!-- <shape>
<gradient
android:endColor="#5c5c5c"
android:startColor="#5c5c5c"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#b3b3b4" />
<corners
android:radius="3dp" />
<padding
android:top="10dp"
android:bottom="10dp" />
</shape>-->
</item>
<item android:state_focused="true" android:drawable="@drawable/focused" >
</item>
<item android:drawable="@drawable/nofocused">
<!-- <shape>
<gradient
android:endColor="#c1c1c1"
android:startColor="#c1c1c1"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#e5e5e5" />
<corners
android:radius="3dp" />
<padding
android:top="10dp"
android:bottom="10dp" />
</shape>-->
</item>
</selector>
[/syntax]
Also there are 3 elements that will be used as below;
a. drawable/alert -> alert.png => background for the alert pop up
b. drawable/focussed & drawable/nonfocussed => nonfocussed.png & focussed.png => button background for cancel and ok.
Iam not able to upload the these images.Let me know how to do so.
