• Home
  • Tutorials
    • Game Development Tutorial>
      • Unit 1: Beginning Java>
        • Before you begin...
        • Day 1: Setting Up
        • Day 2: Java Basics
        • Day 3: More Basics
        • Day 4: Java Math
        • Day 5: More Math
        • Day 6: If... else...
        • Day 7: More Control Flow
        • Day 8: Looping
        • Day 9: More on Looping
        • Day 10: Inheritance, Interface
        • Day 11: Threads and Graphics
      • Unit 2: Creating a Game I>
        • Day 1: Foundations
        • Day 2: Basic Framework
        • Day 3: Taking User Input
        • Day 4: Enter the Robot
        • Day 5: Background and Sprites
        • Day 6: Adding Enemies
        • Day 7: Shooting Bullets
        • Day 8: Animations
        • Day 9: 2D-Arrays
        • Day 10: Painting the Tilemap
      • Unit 3: Creating a Game II>
        • Day 1: Level Creation - Part 1
        • Day 2: Level Creation - Part 2
        • Day 3: Level Creation - Part 3
        • Collision Detection Basics
        • Day 4: Collision Detection Part 1
        • Day 5: Collision Detection Part 2
        • Day 6: Collision Detection Part 3
        • Day 7: Health System & Death
        • Day 8: Basic AI & Final Touches
      • Unit 4: Android Game Development>
        • Day 1: Introduction to Android
        • Day 2: Setting up for Development
        • Day 3: Creating our First Android Application
        • Day 4: Parts of an Android Application
        • Day 5: The Android Game Framework: Part I
        • Day 6: The Android Game Framework: Part II
        • Create an Android Game From Scratch (or port your existing game)
        • Day 7: Creating an Android Game (From Start to Finish)
      • Reference Sheet
    • Zombie Bird Tutorial (Flappy Bird Remake)>
      • Unit 1: Building the Game>
        • Introduction
        • Day 1: Flappy Bird - An In-depth Analysis
        • Day 2: Setting up libGDX
        • Day 3: Understanding the libGDX Framework
        • Day 4: GameWorld and GameRenderer and the Orthographic Camera
        • Day 5: The Flight of the Dead - Adding the Bird
        • Day 6: Adding Graphics - Welcome to the Necropolis
        • Day 7: The Grass, the Bird and the Skull Pipe
        • Day 8: Collision Detection and Sound Effects
        • Day 9: Finishing Gameplay and Basic UI
        • Day 10: GameStates and High Score
        • Day 11: Supporting iOS/Android + SplashScreen, Menus and Tweening
        • Day 12: Completed UI & Source Code
    • Android Application Development Tutorial>
      • Unit 1: Writing Basic Android Apps>
        • Before you begin...
        • Day 1: Android 101
        • Day 2: Getting to Know the Android Project
        • Day 3: The Development Machine
        • Day 4: Building a Music App - Part 1: Building Blocks
        • Day 5: Building a Music App - Part 2: Intents
        • Day 6: Building a Music App - Part 3: Activity Lifecycles
  • New Forum
  • About Us
    • Contact Us
  • Our Games
    • TUMBL: FallDown
  • Facebook
  • Twitter

        Android Application Development: Day 1-5: Building a Music App - Part 2: Intents


In the previous lesson, we set up our first application's project. We will now be creating another activity and sending a message by using buttons, which will determine which song will be played.
Let's have another look at our app's architecture.

We have a MainActivity with four icons, each of which is a button. When we click any button, we keep track of which button is pressed, and we start the SecondActivity by sending a small message.

Picture
To start other activities, Android requires the usage of Intents. Intents are messages that hold data about a desired action. We pass in an Intent, for example, when we start a new Activity. We can even bundle extra information along within our Intent, which can be used in another Activity. 

This will become more clear when you see it in action.


Let's start by creating our SecondActivity.
1. Right click on your package: mine is called "com.example.awesomemusicselectorapp."
2. Select New > Other > Android > Android Activity

Picture

3. We will also make this a Blank Activity. Call it SecondActivity.

Picture
The SecondActivity is identical to the first one. Before we add the buttons, let's first make our app's screen orientation landscape (width is greater than height). To do so, we must open up the AndroidManifest. If you have forgotten how to do it, you can do it by double clicking on AndroidManifest.xml:

IMPORTANT: Eclipse should have automatically defined the SecondActivity in your manifest. If this is not done, then your app will crash when you attempt to open the SecondActivity. Make sure that your AndroidManifest has any activity that you open.

For each activity, we will add:
android:screenOrientation="landscape"


You can see the example below:
Picture


AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.awesomemusicselectorapp"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.awesomemusicselectorapp.MainActivity"
            android:label="@string/app_name"
            android:screenOrientation="landscape" >
             >


            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.example.awesomemusicselectorapp.SecondActivity"
            android:label="@string/title_activity_second"
            android:screenOrientation="landscape" >
             >

        </activity>
    </application>

</manifest>
This should make the two activities landscape. Now when we run our app, it should be in landscape mode!
I will try running it on a physical device:
Picture
The result:
Picture

Time to add buttons

What's the point of having two activities if you can't start the second one? Let's create a button that will take us to the second activity.

Three ways to modify UI

There are three ways you can modify the UI of your app. The first (and possibly the easiest) is to use a Graphical Layout, which will show us our XML files in a realistic preview. The second is to use XML to insert objects and to modify them. The third is to do it dynamically in Java. We will be sticking with the first two for this lesson.

If we open up our MainActivity.java, which is our first screen, the onCreate method (the method that is called when the Activity is starting) calls the method:

@Override
   protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

We previously discussed that setContentView will take in the ID of a layout resource and sets the content of our Activity as specified in the layout resource. In this case, we can find the layout in:

res > layout > activity_main.xml.

If we open this up, we can access the Graphical Layout and the XML versions of this file like so:
Picture
Picture
Again, these are two ways to modify the same file. Make sure that you change the preview in Graphical Layout to landscape (it does not take the Manifest into account). 

Let's begin by removing the existing TextView and adding four buttons in the Graphical Layout. To do so, we click on "Hello world" and press Delete, and then we select the button widget from the left and drag it to a desired location (four times).

As this is a RelativeLayout, we will be able to define each button's location with respect to each other or to the parent. You should get something similar to this:
Picture
Let's now see how this translates to XML. Select the activity_main.xml tab:
Picture
Yours should look something like this. Try adjusting the margins (alignments) to make everything equidistant! I made everything 19dp and 38dp apart, because I plan on making these buttons into squares.

Note: If you copy my XML below, your GraphicalLayout should be identical to mine (given that you have the same screen preview options).


Note 2: Learn about different types of units of measurement: px, dp, dip, and sp, and when to use them here:
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="19dp"
        android:layout_marginTop="19dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="38dp"
        android:text="Button" />

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

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button2"
        android:layout_marginLeft="19dp"
        android:layout_toRightOf="@+id/button1"
        android:text="Button" />

</RelativeLayout>

Okay! We created four buttons. I am going to label them One, Two, Three, and Four by changing their android:text values in the XML (Android's Lint -- the problem/error checking program -- will suggest that you do not hard code string values, meaning that you should store them elsewhere and retrieve them rather than typing out One, Two, and so on. Let's ignore this for now, but this is a great suggestion that will make your life easier in the future!):

Here's the result:
Picture
If you run the app at this time, you will notice that your buttons do nothing. Zero. There are many ways to make them do something. We can do something in XML, or we can do it in Java. 

Let's add a button listener in our MainActivity.java.

1. First, we will declare four member variables (in bold):

public class MainActivity extends Activity {

    Button b1, b2, b3, b4;
    ...

2. Import "Button" by pressing Ctrl + Shift + O.

3. We will now initialize each of these buttons in the onCreate method. To do so, we retrieve each button by its ID. Buttons b1, b2, b3, b4 should have ID's button1, button2, button3, and button4 (as defined in our activity_main.xml).

       @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

   b1 = (Button) findViewById(R.id.button1);
   b2 = (Button) findViewById(R.id.button2);
   b3 = (Button) findViewById(R.id.button3);
   b4 = (Button) findViewById(R.id.button4);

}

Notice that findViewById retrieves a View (a basic element in Android). We then cast it as a Button by using (Button), which takes the View and turns it into a Button object. This now allows us to refer to the four buttons: b1, b2, b3, and b4.

4. Now we must add onClick listeners. You can do this for each button like so. I will do this in a new method::

private void createListeners() {

   b1.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                // TODO Auto-generated method stub
            }
        });

   
    ...
}
This is what my code looks like so far:

package com.example.awesomemusicselectorapp;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

    Button b1, b2, b3, b4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        b1 = (Button) findViewById(R.id.button1);
        b2 = (Button) findViewById(R.id.button2);
        b3 = (Button) findViewById(R.id.button3);
        b4 = (Button) findViewById(R.id.button4);

        createListeners();

    }

    private void createListeners() {
        b1.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                // TODO Auto-generated method stub
            }
        });
        
        b2.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                // TODO Auto-generated method stub
            }
        });
        
        b3.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                // TODO Auto-generated method stub
            }
        });
        
        b4.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                // TODO Auto-generated method stub
            }
        });
    }

    @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;
    }

}

Make sure you call createListeners() inside your onCreate! Otherwise, it will never be called and your buttons will NOT work.

Also make sure that you import properly! Check my imports if you have errors with undefined objects.

Inside the empty onClick method for each button found in the createListeners method, we can tell a button to do whatever we want. I will create another helper method, in which I will create an Intent, which I will use to start my secondActivity.

5. Add the following method:

private void startSecondActivity(int buttonNum) {
   Intent intent = new Intent(this, SecondActivity.class);
   intent.putExtra("BUTTON NUMBER", buttonNum);
   startActivity(intent);
}


6. Call this method in each of the onClick listeners, passing in the button number: 

                private void createListeners() {
b1.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
startSecondActivity(1);
}
});

b2.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
startSecondActivity(2);
}
});

b3.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
startSecondActivity(3);
}
});

b4.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
startSecondActivity(4);
}
});
}


This method is straightforward. Notice that it will take in an integer as a parameter. In the first line, we create an Intent that will take this Activity (MainActivity) to the SecondActivity. Then, we add the value of the passed in integer (buttonNum) to the Intent, along with a key of "BUTTON NUMBER" so that we can keep track of what this message means. We finally call startActivity by passing in this newly created intent. This will start our SecondActivity (no matter which button is pressed) and also send a message that can be retrieved on the other side (an integer between 1 and 4 -- discussed in the next lesson)!

Picture
Refer to our app's architecture one more time. Everything is coming together now! We will discuss step 5 in detail in the next lesson.
Picture
Thank you for reading, and see you in Day 5! Please Like us on Facebook if you are enjoying the tutorials!

Picture

Source Code:

kiloboltandroidday4.zip
File Size: 1271 kb
File Type: zip
Download File

Go to Unit 1: Day 4
Go to Unit 1: Day 6
comments powered by Disqus
© 2014 Kilobolt, LLC. All rights reserved.