Wednesday, November 23, 2011

Android Tutorial: Custom Dialog

Hello people!
Last part of the Dialogs tutorials is here!
We went throught AlertDialog and ProgressDialog now its only one left, And this one is called Custom Dialog.

What is a Custom Dialog?
Pretty self explainatory here.. A Custom Dialog is a dialog that you can customize and design urself with your own custom design.

How does it work?
As simple as you make ur layouts for your application you also make this custom dialog inside an .XML file and then you connect it with some code which i will show later.


Lets make an Custom dialog with XML!
Create a new .xml file named: custom_dialog.xml
Pick i usualy pick RelativeLayout as the layout for my XML files but if you want to work with Linear or whatever its totaly you'r own choise!
Inside the xml file's code we want to past something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_height="wrap_content"
android:src="@drawable/icon"
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true">
</ImageView>

<TextView
android:id="@+id/text"
android:layout_height="wrap_content"
android:text="This is a Custom Dialog"
android:layout_width="wrap_content"
android:layout_alignBottom="@+id/image"
android:layout_toRightOf="@+id/image"
android:layout_marginLeft="22dp">
</TextView>

<Button
android:layout_height="wrap_content"
android:id="@+id/button1"
android:text="Button 1"
android:layout_width="wrap_content"
android:layout_below="@+id/image"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp">
</Button>

<Button
android:layout_height="wrap_content"
android:id="@+id/button2"
android:text="Button 2"
android:layout_width="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:layout_alignBottom="@+id/button1"
android:layout_alignLeft="@+id/text">
</Button>

</RelativeLayout>

When we did that we should have a small picture with a text next to it and two buttons. Great for an example!

Lets get to the code!
After that we also do want to see this in our application.. This is how we do it:
Dialog myDialog;
myDialog = new Dialog(AndroidTutorialsActivity.this)
;
myDialog.setContentView(R.layout.custom_dialog)
;
myDialog.setCancelable(true)
;

TextView text = (TextView) myDialog.findViewById(R.id.text)
;
text.setText("My Custom Dialog!")
;

ImageView image = (ImageView) myDialog.findViewById(R.id.image)
;
image.setImageResource(R.drawable.icon)
;

Button button1 = (Button) myDialog.findViewById(R.id.button1)
;
button1.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub

}
});

Button button2 = (Button) myDialog.findViewById(R.id.button2)
;
button2.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub

}
});
myDialog.show()
;
In this code above its pretty self explainatory.. We create the dialog and then we initiate it with the context of our Activity.. Then the intresting part we set the content view of the Dialog to the .XML file we created..
Set cancelable to true cus lets say we want to be able to cancel this dialog.. Then we do as probaly most of the people looking at the tutorial did many times before we use the things we made in our .XML the TextViews ImageViews Buttons.. We declare then and initiate them. And i also added a onClick listeners for the two buttons on the Dialog..

Small note: This dialog does look ugly i know but im in a hurry so i don't have time to polish.

Here is a picture how this dialog would look like when you run it in your app..




The tutorials about Dialogs is now over i hope you read them and you learned something atleast.. I have no idea what tutorials i will make next so send me an E-Mail what tutorial you want or put a comment bellow and i will make the tutorial about the request.

Thanks for reading!

No comments:

Post a Comment