Post 11: Wizard-App-Tutorial

Alright, I've been busy throughout the week with writing a paper and implementing parts for my project. Phewww.... yesterday I worked till 3 a.m. Needless to say I don't have something new to offer. All I'm showing you today is an App that works like a Wizard and is able to exchange data with the PC. 

If this sounds similar to you, then you're right. Because I made a similar project here already. The only difference is the Wizard feature (I reckon there aren't that many Tutorials about how to make a Wizard in Android App) and I'll extend the functionality of the Server site Software a little bit by displaying the message that it sends to the client on its GUI (so the demonstration of the data exchange becomes more clearly.).

A Wizard

For those who may not familar with the word "Wizard": In Programming a "Wizard" is an application that guides you through consecutive steps. If you're using Windows, then you've probably installed a program already where you constantly had to press the "next" button. Well, this installation program was a Wizard.

Our Wizard will look like this. First you have the start screen. In there you can see two Buttons with the name "Option 1" and "Option 2":

If you click on "Option 1" the screen will switch to this screen (fancy right? ^^ ):

 

If you press on "Option 2", you'll get this screen (...not so fancy right... TT  ):

That should be a piece of cake for us. But what do we need?

Tools

Alright, now that we know what a Wizard is and our aim is, we want to build on ourselves. To do that, I'll use eclipse and the plugin for Android. If you haven't installed yet, you can go here

• Eclipse (choose the standard version)
• After that go here to install the Android plugin for Eclipse:

 Setup

 So, if you're ready you have to first create an Android project. In order to do that, go to "File-> New-> Android Application Project" as shown in this picture:

After that you'll see this Wizard. Now type in any name you want. I chosed "wizardApp_Table". You're allowed to be a tad more creative. 

Now that you've created your Android Application project, we dive into coding. As an outlook, we'll create these files (edged in red):

I'll show you step by step how to make these files and how to write code for them, so we'll get our desired Wizard.

Create Class

First we want to create a package for the two JAVA classes you see on the top. To do that, rightclick n the "src" folder you see on the very top and then choose the "package" and give it a name you want. I choosed the name "option":

Now create two new Activity classes in this package. Each of these Activity classes represents a screen that you'd see if you clicked on one of the buttons in th start screen. It's important not to create just any class, but an Activity class. Click on the package you just created and then click on "other" as depictured here:

After you've done that you should see this window pop up. Chose our Activity class and follow the instructions (= just click the "next" button until you can't any more):

Repeat these processes for the second class.

Modify Layout XML File

After you've done that Eclipse should create two new XML-files for you. You can find them in the "layout" folder:

With the XML files you can create the layout for your two respectively. Here's how to code for your "Option 1" screen looks like:

So you've seen in the preview, the screen have Texts on their Labels, Buttons, Headers, etc. These Texts are saved in a separate XML file - in the "string" XML-file. You can find it in the "value" folder:

The code for this file looks like this:

    wizzard App
    Settings
    Hello world!
    Suche
    Aufgabe
    Click on the buttons to switch view
    another Option
    Option

    Option 1
    Option 2

Implementing Click-Action 

 Now, let's go to the interesting part. Go to the "MainActivity" class at the very top. This is the code you need to make the magic happen:

package com.example.wizardapp_table;

import com.example.wizzardapp_table.R;

import option.Option2;
import option.Option1;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
    
  Button clickTask=(Button) findViewById(R.id.bTask);
  //set click Listener
  clickTask.setOnClickListener(new OnClickListener(){

   //implement what it should do
   @Override
   public void onClick(View v) {

    Intent intent=null;
    intent=new Intent(MainActivity.this, Option1.class);
    startActivity(intent);
   }
   
  });
  
  Button clickSearch=(Button)findViewById(R.id.bSearch);
  clickSearch.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {

    Intent intent=null;
    intent=new Intent(MainActivity.this, Option2.class);
    startActivity(intent);
    
   }
   
  });
  
  
  }
  
 

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  
  
  return true;
 }
 

}

I'll put all the source code into my GitHub so you can download and play with it.

GitHub 

Hope you enjoyed. Till nex time!