Getting Started - A Complete Android App walkthrough for Beginners (Part 1)

About a year ago I released my first app on to the Android market. I had developed the market primarily as a learning tool, and at the end decided that putting it on the market would be a good step to understand the process and get some feedback.
The application was a simple quiz app based on the popular NBC series Chuck, I released it for free (no-ads) and no real advertising other than one or two target tweets. The app currently has about 4,000 – 5,000 downloads with a 4 star rating – both of which it achieved pretty quickly in the first month or two.



DISCLAIMER: I believe this to be purely down to the fact that at the time there weren’t really any other Chuck related apps, and it has a nerd-ish, cult like following, so I think the rating and popularity is more of a reflection on the show’s popularity than the quality of the app!


Anyway, I thought it might be interesting/helpful to release the source code here and walkthrough the different aspects of the code in a tutorial “my first app” kind of way.

I won’t go in to the setting up Eclipse/Android plug-ins stuff here, so will assume familiarity with getting around the IDE.


Android Directory Structure
Creating a new Android project in Eclipse (using the Android plug-ins) creates the required project structure automatically for you. Lets have a look at that now:


Src : as you would expect, this is the main java source directory, so this is where all your source code lives

Gen: this is the generated code that Eclipse handles for you – the files in here will be generated from your config. You needn’t really worry about what happens in here as Eclipse takes care of it for you

Assets: this can be used to contain any resources or libraries you want to bundle with the app – such as third party jars and data sets (you will see later we use this directory to store the data that we will load to populate all the questions in the DB when the app is first launched on a new device)

Res: this is where the configuration for the layout/UI aspects live:
- Drawable – keep you image files in here (.png/jpg/etc)
- Layout – this is where you keep the xml config for UI layout
- Values – this is where you keep the config with application code, such as application name or set text. This means you can easily change text through out the application without having to change hardcoded strings in the java code and re-compile


Getting Started
Ok, lets get started – the first thing we need is a welcome screen that is displayed when a user first launches the app. In Android, a screen is modelled by an “Activity” class, so to create our welcome screen we need to extend Activity.

public class SplashActivity extends Activity implements OnClickListener{

 @Override
 public void onCreate(Bundle savedInstanceState) {

Every class that overrides the Activity class must implement the onCreate() method – this is called when the activity is launched. As our welcome screen will just be a simple screen with a few buttons on it (play, rules, exit) we don’t need to do much at this point other than set up the buttons to have a listener so we know when one of them is pressed. For convenience here, we will set our current activity class to implement “OnClickListener” – this means we can define the onClick() method directly in our activity to handle the button events.

@Override
 public void onClick(View v) {
  Intent i; 
  switch (v.getId()){
  case R.id.playBtn :
   List questions = getQuestionSetFromDb();

   GamePlay c = new GamePlay();
   c.setQuestions(questions);
   c.setNumRounds(getNumQuestions());
   ((ChuckApplication)getApplication()).setCurrentGame(c);  

   //Start Game Now.. //
   i = new Intent(this, QuestionActivity.class);
   startActivityForResult(i, Constants.PLAYBUTTON);
   break;
   
  case R.id.rulesBtn :
   i = new Intent(this, RulesActivity.class);
   startActivityForResult(i, Constants.RULESBUTTON);
   break;
   
  case R.id.settingsBtn :
   i = new Intent(this, SettingsActivity.class);
   startActivityForResult(i, Constants.SETTINGSBUTTON);
   break;
   
  case R.id.exitBtn :
   finish();
   break;
  }
 }

As you can see, we have one single method that handles any button press, and we manage this with a switch statement checking the id of the view (we will go into this later). Mostly, the cases are simple, “exit” finishes the application whilst “rules” and “settings” have code like this:

i = new Intent(this, RulesActivity.class);
startActivityForResult(i, Constants.RULESBUTTON);

Intents are objects in Android that are used to communicate between activities, and as you can probably spot from the above, this simply creates a new Intent and then uses it to start another Activity class, in this case, our RulesActivity class.

The “Play” case is slightly more complicated – as this needs to initialise the game and load the questions to be used from the DB. Once it has done this, it loads the information in to our “Application” class (we will cover this later also) and then just kicks of the QuestionsActivity with a new Intent as per above.

So that is our welcome page pretty much done, we have a single screen that has a few buttons and we have setup listeners to perform appropriate actions on pressing them. The only remaining issue is the layout of the screen.


Activity Design

In the onCreate() method of our Activity you will notice the second line is

setContentView(R.layout.welcome);

This call tells Android which layout xml file should be used to configure the design – to find the relevant file is quite intuitive, its simply going to be located at /layout/welcome.xml



There are several layouts available to use, each of which are applicable in different circumstances, but as we are just going to have a straight list of buttons, we will use the simple “LinearLayout”. You can nest layouts, as you will see in this example, but lets walk through some of the config options we are using for our layout:

android:orientation="vertical" – This defines our layout as vertical, so new elements will be added on a new row below (if it were horizontal it would add as a new column)

android:layout_width="fill_parent" – this tells the activity to fill the whole width of the screen with the contents

android:layout_height="fill_parent" – this tells the activity to fill the whole width of the screen with the contents

android:gravity="center_horizontal" – this centers all elements that are contained in this layout

android:background="@drawable/background – this defines a background image to use for the activity (this image should exist at /drawable/background.png)


Now, if we look inside the layout you will see some simple components. The first one being a simple ImageView, which points to an image that we want to use as a header. The following elements are the buttons – you will notice that the ID of each button corresponds to the onCreate() method of our Activity where we inflate the button to set the onClickListener.
If you press the “Graphical Layout” tab in eclipse, you will see what the welcome screen will look like.




Ok, so we have our welcome Activty, we have designed a nice UI to control the app and have an onClick handler - the next part will cover intergrating with the DB to pull out the questions and then we are all there!


Grab complete source code for the project here

25 comments:

  1. Thank You Very Very.... much you helped me a lot. Keep updating your posts.

    With Regards....

    ReplyDelete
  2. Lot of useful points are there. Its really keeps me updated.
    Android app development| Android app developer|

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  3. thank you very much for the code :)

    ReplyDelete
  4. Interesting post! I enjoyed reading it!
    Thanks for sharing this useful info.keep updating same way.
    cheers!
    iCaption That

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. hi i got error when i changed the settings into hard or easy but medium works properly.

    ReplyDelete
  7. helo
    how can i change the questions .?!

    ReplyDelete
    Replies
    1. change database file.you can browse it firefox database browser.

      Delete
    2. Hey, I've changed the database but the same questions keep coming up. Can someone help me??? I've been stuck on this for four days.

      Delete
    3. So I solved my problem. I edited the database in sqlite browser (http://sourceforge.net/projects/sqlitebrowser/) and then I uninstalled the app from the eclipse emulator(open the emulator and go to setting, apps and then uninstall). Then in the project I replaced the database in the assets folder with the one i'd edited in sqlite. This brought up my questions. Happy F**king days!!!! :-) Hope this helps someone else if they have this problem. Any questions just ask...... and i'll try help you.

      Delete
    4. when i change setting from medium to easy or hard app crashes..do you know what should I do to avoid this?

      Delete
    5. You need to add easy and hard questions to the database. If you open the data base using SQLite Database Browser, you'll see that the questions are all marked "2". 2 is medium. For easy you need to mark the questions"1" and for hard you need to mark them "3". Hpe this helps.

      Delete
    6. This comment has been removed by the author.

      Delete
    7. Why can´t I open the database file in the assets with mysqlWorkbench?

      Delete
    8. Also, great work you did there, I was trying for a very long time but it didn´t work, so thank you very much ;)

      Delete
  8. Thank you very much. How can change number of question with number picker in setting menu. I want to put a number picker to change number of question.(10, 20,30,40,50)

    ReplyDelete
  9. i am not able to change the data base....it is encrypted

    ReplyDelete
    Replies
    1. Hey, Did you figure out how to changed the database?? I can't seem to be able to change the questions.

      Delete
  10. Why when I click the play button, the app crashed. :( Please someone help me.

    ReplyDelete
  11. We've been long-term iPhone designers and have had it with Apple. Their regard process and absence of correspondence with designers has barely become excessively. The reject applications over the silliest things. We have five applications in the Top 100 on their graphs, and can hardly wait to drop Apple like a block and create in a more nature.
    Build Android App // Mobile
    Application Development
    // Android Application Development

    ReplyDelete
  12. link download has died, plz reupload. thanks.

    ReplyDelete