lemonbloggywog

Just another non ranting, helpful guide blog. http://www.lemoncog.com/

Custom Dialogs within an activity–Android

The completed view.

A dialog is a popup for the android that launches from within an activity, allowing the user to interact with the dialog, which is essentially a view within the main view.
It’s your decision how you use a dialog, but it appears that you can customize it as much as a regular view.

 

 

 

 

 

 

 

 

 

To create a dialog like the one shown, here is how:-

Firstly create your Android project, I am using Eclipse. If done correctly you should find yourself looking at this code, if not find the .java file within your src folder.

public class Main extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }
 

For demonstration purposes we should add our main.xml to include a button that can be pressed and will trigger the custom dialog. Navigate to res/layout and click on main.xml, switch to the non-graphical layout and add this code:-

<Button android:id="@+id/dialogStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:layout_x="152px" android:layout_y="86px" > </Button>
 

The entire main.xml should now look like this :-

<?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="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <Button android:id="@+id/dialogStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:layout_x="152px" android:layout_y="86px" > </Button> </LinearLayout>
 

TIP: I use http://www.droiddraw.org/ to quickly create my layouts, generate it then copy it into my xml file.
The layout should have some text and beneath it a button.
We want the user to click this button , causing the custom dialog to launch. To do this need to create a Button variable, link it to our Layout and add an action listener.
Add the variable by adding the following line of code to your Main class:-

Button mLaunchDialog;

In the onCreate function, after the setContentView(R.layout.main) link the button to the layout using the following line of code:-

mLaunchDialog = (Button) findViewById(R.id.dialogStart);

If you come across any problems here make sure you save all, as sometimes Eclipse can be slow to update things.
Our button is now linked to the Layout, when the application is running anything we do to that button can now be handled by the variable mLaunchDialog.
As its a button it should be clickable, so we give it a OnClickListener. There are two ways of doing this, one is to use a common function that all onClick events will goto, or have a custom function for each event. To create the custom function you can do this :-

mLaunchDialog.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { } });
 

Sometimes it’s not possible to do this so you can instead do this:-

mLaunchDialog.setOnClickListener(this);

Passing this as the parameter means it will look within this class for the function

public void onClick(View paramView)

If you do it this way, your going to have to implement OnClickListener by changing the class to:-

public class Main extends Activity implements OnClickListener

and add the onClick function.

Whichever option you have chosen your now at a point where you will need to create your custom dialog layout, navigate to the res/layout folder and create a file, I have named mine customdialog.xml.
To this file I’ve decided to add a textView and a Analog clock to demonstrate how most things can be used in the custom dialog. It looks like this:-

<?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="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/about" /> <AnalogClock android:id="@+id/widget30" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="119px" android:layout_y="65px" > </AnalogClock> </LinearLayout>
 

The next step is to create a class that will extend dialog and within this we can customize it to our hearts content. Create a new file in the src folder, mine is named customDialog.
Your class should initially end up looking like this :-

public class customDialog extends Dialog { public customDialog(Context context) { super(context); // TODO Auto-generated constructor stub } }
 

The only function we have at the moment is the constructer; within this we’ll link the class to the layout. We achieve this by adding the following lines :-

setContentView(R.layout.customdialog);
this.setTitle("This is a custom Dialog");
this.setCancelable(true);

You can see a list of the different options available by typing this. and seeing what pop ups but the ones we have set are fine for now.
With the custom dialog class created its a simple task of launching it when the button is clicked, go back to the main.java class and add our new class as a variable by adding this to the main class:-

customDialog mCustDialog;

Initialise it within the onCreate function by doing this :-


mCustDialog = new customDialog(this);

Note how we pass this to the customDialog, we are passing the context that the dialog will launch from.
The final step is to show the customDialog, we want it to appear when the button is clicked so add this line of code to the onClick function:-

mCustDialog.show();

And that’s it. You now have a custom dialog.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: