Android Workshop 2013 DEVELOPMENT DR ABDUL RAHIM BIN
Android Workshop 2013 DEVELOPMENT DR. ABDUL RAHIM BIN AHMAD College of IT UNITEN 21&22 September 2013
First App • Bare essentials for Android app development. • How to build your first Android app. – Create an Android project – Run a debuggable version of the app. – Learn Some fundamentals of Android app design – Build a simple user interface – Handle user input.
Creating an Android Project • Android project – Contains all source code files for your Android app. • The Android SDK tools – Gives a set of default project directories and files to start a new Android project. • We can create a new project either – using Eclipse (with the ADT plugin) – or using the SDK tools from a command line.
Create a Project with Eclipse • Start Eclipse from the eclipse directory. • Choose the workspace, ie: where your apps directory is to be stored. • Choose new android applications • Enter the Application Name, Project Name and Package Name and all the other 4 information • Click Next • In Configure project window click Next to accept the default. • In Configure Launcher Icon window click Next to accept the default icon. • In Create Activity window select Blank. Activity and click Next • In Blank Activity window click Finish The Android project is now set up with some default files and you’re ready to begin building the app.
Running the Apps • How app is run depends on two things: – You have a real Android-powered device or emulator – You're using Eclipse or command line. • A few directories and files in the Android project: – Android. Manifest. xml • describes the fundamental characteristics of the app and defines each of its components. – src/ • Directory for your app's main source files. By default, it includes an Activity class that runs when your app is launched using the app icon. – res/ • Contains several sub-directories for app resources • drawable-hdpi/ – Directory for drawable objects • layout/ – Directory for files that define your app's UI • values/ – Directory for other various XML files that contain a collection of resources, such as string and color definitions. • When you build and run the default Android app, the default Activity class starts and loads a layout file that says "Hello World. "
Manifest File <manifest xmlns: android="http: //schemas. android. com/apk/res/android". . . > <uses-sdk android: min. Sdk. Version="8" android: target. Sdk. Version="17" />. . . </manifest> • Always set the android: target. Sdk. Version as high as possible • Test your app on the corresponding platform version.
Running on Real Device • Plug in your device to your computer with a USB • Enable USB debugging: – Go to Settings > Developer options. • Run the App – Open one of your project's files and click Run from the toolbar. – In the Run as window that appears, select Android Application and click OK. – Eclipse installs the app on your connected device and starts it.
Running on Emulator • First, create an Android Virtual Device (AVD)(a device configuration for the Android emulator that can model different devices). • To create an AVD: – Launch the Android Virtual Device Manager: • In Eclipse, click Android Virtual Device Manager from the toolbar. • From the command line, change directories to<sdk>/tools/ and execute: android avd • In the Android Virtual Device Manager panel, click New. • Fill in the details for the AVD. Give it a name, a platform target, an SD card size, and a skin (HVGA is default). • Click Create AVD. • Select the new AVD from the Android Virtual Device Manager and click Start. • After the emulator boots up, unlock the emulator screen.
Building a Simple User Interface • GUI for Android app is built using a hierarchy of View and View. Group objects. • View objects are usually UI widgets such as buttons or text fields and View. Group objects are invisible view containers that define how the child views are laid out, such as in a grid or a vertical list. • Android provides an XML vocabulary that corresponds to the subclasses of View and View. Group so you can define your UI in XML using a hierarchy of UI elements.
Create a layout in XML • To include a text field and a button. – Respond when the button is pressed by sending the content of the text field to another activity. • Steps – Create a Linear Layout • Open the activity_main. xml file from the res/layout/ directory. – Add a Text Field – Add String Resources – Add a Button
Create a Linear Layout • In Blank. Activity template, the activity_main. xml file has Relative. Layout root view and a Text. View child view. • Delete the <Text. View> element and change the <Relative. Layout> element to <Linear. Layout>. • Add the android: orientation attribute and set it to "horizontal". • The activity_main. xml will look like this: <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout 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: orientation="horizontal" > </Linear. Layout>
Add Text Field • Create a user-editable text field – Add an <Edit. Text> element inside the <Linear. Layout>. – Define certain XML attributes to specify the Edit. Text object's properties: <Edit. Text android: id="@+id/edit_message" android: layout_width="wrap_content" android: layout_height="wrap_content" android: hint="@string/edit_message" />
Add String Resources • To add text in the UI, always specify string as a resource – This allow managing all UI text in a single location - easier to find and update. – Also allows localization to different languages. • By default, Android project includes a string resource file at res/values/strings. xml. – Add a new string named "edit_message" and set the value to "Enter a message. " (Delete the "hello_world" string. ) – Add a "Send" string for the button you’ll soon add, called "button_send". • The result for strings. xml looks like this: <? xml version="1. 0" encoding="utf-8"? > <resources> <string name="app_name">My First App</string> <string name="edit_message">Enter a message</string> <string name="button_send">Send</string> <string name="action_settings">Settings</string> <string name="title_activity_main">Main. Activity</string> </resources>
Add a Button / Make the Input Box Fill in the Screen Width • To add a <Button> to the layout – After the <Edit. Text> element, add: <Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="@string/button_send" /> – The height and width are set to "wrap_content" so the button is only as big as necessary to fit the button's text. – This button doesn't need the android: id attribute, because it won't be referenced from the activity code. • The Edit. Text and Button widgets are only as big as necessary to fit their content. • It would be nice to fill the unused screen width with the text field. Specify using the android: layout_weight attribute. • Change Edit. Text to be as follows: <Edit. Text android: layout_weight="1" android: layout_width="0 dp". . . />
Completed layout in XML <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout 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: orientation="horizontal"> <Edit. Text android: id="@+id/edit_message" android: layout_weight="1" android: layout_width="0 dp" android: layout_height="wrap_content" android: hint="@string/edit_message" /> <Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="@string/button_send" /> </Linear. Layout>
Running the completed app • Run the completed app in read device or the emulator • The output on the emulator is as shown.
Adding Activities - Respond to the Send Button • We will add some code to Main. Activity that starts a new activity when the user clicks the Send button. • To respond to the button's on-click event, open theactivity_main. xml layout file and add theandroid: on. Click attribute to the <Button> element: <Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="@string/button_send" android: on. Click="send. Message" /> • The android: on. Click attribute’s value, "send. Message", is the name of a method in the activity that the system calls when the user clicks the button.
Adding Activities - Respond to the Send Button • Add the method for handling user clicks on the Send button: – Open the Main. Activity class (located in the project's src/ directory) – Add the corresponding method: /** Called when the user clicks the Send button */ public void send. Message(View view) { // Do something in response to button } • This requires us to import the View class: In order for the system to match this method to the method name given to android: on. Click, the signature must be exactly as shown. Specifically, the method must: • Be public • Have a void return value • Have a View as the only parameter (this will be the View that was clicked) import android. view. View; – Tip: In Eclipse, press Ctrl + Shift + O to import missing classes (Cmd + Shift + O on Mac). • Next, we’ll fill in this method to read the contents of the text field and deliver that text to another activity.
Adding Method to Build Intent • • An Intent can be used to start another activity (in this case, the send. Message activity). An Intent actually is an object that provides runtime binding between separate components (such as two activities). The Intent represents an app’s "intent to do something. “ Inside the send. Message() method, create an Intent to start an activity called Display. Message. Activity: Intent intent = new Intent(this, Display. Message. Activity. class ); • The constructor used here takes two parameters: – A Context as its first parameter (this is used because the Activity class is a subclass of Context) – The Class of the app component to which the system should deliver the Intent (in this case, the activity that should be started) • • An intent not only allows you to start another activity, but it can carry a bundle of data to the activity as well. Inside thesend. Message() method, use find. View. By. Id() to get the. Edit. Text element and add its text value to the intent: Intent intent = new Intent(this, Display. Message. Activity. class); Edit. Text edit. Text = (Edit. Text) find. View. By. Id(R. id. edit_message); String message = edit. Text. get. Text(). to. String(); intent. put. Extra(EXTRA_MESSAGE, message); • • An Intent can carry a collection of various data types as key-value pairs called extras. The put. Extra()method takes the key name in the first parameter and the value in the second parameter.
Adding Method to Build Intent • In order for the next activity to query the extra data, you should define the key for your intent's extra using a public constant. – So add the EXTRA_MESSAGE definition to the top of the Main. Activity class: public class Main. Activity extends Activity { public final static String EXTRA_MESSAGE = "com. example. myfirstapp. MESSAGE"; . . . } • It's generally a good practice to define keys for intent extras using your app's package name as a prefix. – This ensures they are unique, in case your app interacts with other apps. Sending an intent to other apps The intent created in this lesson is what's considered an explicit intent, because the Intent specifies the exact app component to which the intent should be given. However, intents can also be implicit, in which case the Intent does not specify the desired component, but allows any app installed on the device to respond to the intent as long as it satisfies the metadata specifications for the action that's specified in various Intentparameters. For more information, see the class about Interacting with Other Apps.
Starting the Send Button Activity • To start an activity, call start. Activity() and pass it your Intent. • The system receives this call and starts an instance of the Activity specified by the Intent. • With this new code, the complete send. Message() method that's invoked by the Send button now looks like this: /** Called when the user clicks the Send button */ public void send. Message(View view) { Intent intent = new Intent(this, Display. Message. Activity. class); Edit. Text edit. Text = (Edit. Text) find. View. By. Id(R. id. edit_message); String message = edit. Text. get. Text(). to. String(); intent. put. Extra(EXTRA_MESSAGE, message); start. Activity(intent); } • Now you need to create the Display. Message. Activity class in order for this to work.
Create the Send Button Activity • To create a new activity using Eclipse: – Click New in the toolbar. – In the window that appears, open the. Android folder and select Android Activity. Click Next. – Select Blank. Activity and click Next. – Fill in the activity details: • • • Project: My. First. App Activity Name: Display. Message. Activity Layout Name: activity_display_message Title: My Message Hierarchial Parent: com. example. myfirstapp. Main. Activity Navigation Type: None – Click Finish. • Open the Display. Message. Activity. java file : – The class already includes an implementation of the required on. Create() method. – There's also an implementation of the on. Create. Options. Menu() method, but you won't need it for this app so you can remove it. – There's also an implementation of on. Options. Item. Selected() which handles the behavior for the action bar's Up behavior. Keep this one the way it is.
Create the Send Button Activity • Because the Action. Bar APIs are available only on HONEYCOMB (API level 11) and higher, you must add a condition around the get. Action. Bar() method to check the current platform version. • Additionally, you must add the @Suppress. Lint("New. Api") tag to the on. Create() method to avoid lint errors. • The Display. Message. Activity class should now look like this: public class Display. Message. Activity extends Activity { @Suppress. Lint("New. Api") @Override protected void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. activity_display_message); } } // Make sure we're running on Honeycomb or higher to use Action. Bar APIs if (Build. VERSION. SDK_INT >= Build. VERSION_CODES. HONEYCOMB) { // Show the Up button in the action bar. get. Action. Bar(). set. Display. Home. As. Up. Enabled(true); } @Override public boolean on. Options. Item. Selected(Menu. Item item) { switch (item. get. Item. Id()) { case android. R. id. home: Nav. Utils. navigate. Up. From. Same. Task(this); return true; } return super. on. Options. Item. Selected(item); }
Add to the manifest and Run • The Android. Manifest. xml should look like this: <application. . . >. . . <activity android: name="com. example. myfirstapp. Display. Message. Activity" android: label="@string/title_activity_display_message" android: parent. Activity. Name="com. example. myfirstapp. Main. Activity" > <meta-data android: name="android. support. PARENT_ACTIVITY" android: value="com. example. myfirstapp. Main. Activity" /> </activity> </application> • The android: parent. Activity. Name attribute declares the name of this activity's parent activity within the app's logical hierarchy. The system uses this value to implement default navigation behaviors, such as Up navigation on Android 4. 1 (API level 16) and higher. You can provide the same navigation behaviors for older versions of Android by using the Support Library and adding the <meta-data> element as shown here. • Run the app: – Clicking the Send button starts the second activity but it uses a default "Hello world" layout provided by the template.
Receive the Intent • Every Activity is invoked by an Intent, regardless of how the user navigated there. • You can get the Intent that started your activity by calling get. Intent() and retrieve the data contained within it. • In the Display. Message. Activity class’s on. Create() method, get the intent and extract the message delivered by Main. Activity: Intent intent = get. Intent(); String message = intent. get. String. Extra(Main. Activity. EXTRA_MESSAGE);
Display the Message • To show the message on the screen, create a Text. View widget and set the text using set. Text(). • Then add the. Text. View as the root view of the activity’s layout by passing it to set. Content. View(). • The complete on. Create() method for Display. Message. Activity now looks like this: @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); // Get the message from the intent Intent intent = get. Intent(); String message = intent. get. String. Extra(Main. Activity. EXTRA_MESSAGE); // Create the text view Text. View text. View = new Text. View(this); text. View. set. Text. Size(40); text. View. set. Text(message); } // Set the text view as the activity layout set. Content. View(text. View);
Run • You can now run the app. • When it opens, type a message in the text field, click Send, and the message appears on the second activity.
Thank You…
- Slides: 28