Android Application Development: Day 1-5: Building a Music App - Part 2: Intents
- 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.
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.
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.
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
2. Select New > Other > Android > Android Activity
3. We will also make this a Blank Activity. Call it SecondActivity.
|
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: |
|
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:
I will try running it on a physical device:
The result:
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:
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:
|
|
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:
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:
Let's now see how this translates to XML. Select the activity_main.xml tab:
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
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:
Here's the result:
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:
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)!
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)!
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.
Thank you for reading, and see you in Day 5! Please Like us on Facebook if you are enjoying the tutorials!
Source Code:
| kiloboltandroidday4.zip |