1. Android development the first app

2. Andoid vs iOS which is better? Short answer: neither Proponents on both sides For an iOS side, see this article on TechCrunch (by the developer of the SMS/MMS app Emu: The Fallacy of Andoid First

3. Basics Apps are composed of activities and layouts an activity is an instance of the activity class manages user interaction with a screen of info subclass it to implement app functionality may have many activities for a complex app a layout defines a set of user interface objects and their position on the screen uses XML each definition creates an object on the screen

4. Create the project in Eclipse: File->New->Android Application name: GeoQuiz package: edu.ithaca.android.geoquiz Target SDK: API 16: Android 4.1 (Jelly Bean) doesn’t matter as long as you’ve downloaded this in Eclipse click next

5. Configuring the project unclick “Create custom launcher icon” leave “Create activity” checked uncheck “Mark this project as a library” check “Create Project in Workspace” should not have to change location uncheck “Add project to working sets” click next

6. Configuring Project click on “Blank Activity” click next Name the activity subclass QuizActivity convention to end name with “Activity” but not required layout name will fill in automagically. Provides recommended naming style. click finish

7. Laying out the user interface Open the layout file in the folder res/layout named activity_quiz.xml select the “activity_quiz.xml” tab at the bottom of the middle screen of Eclipse. we will ignore the graphical layout tool for now we will use this file to create our view. should have a framelayout in the folder res/layout for fragments or partial layouts named fragment_quiz.xml we will ignore this file; we’re not going to use fragments

8. Default Layout (part 1) in activity_quiz.xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="edu.ithaca.geoquiz4.QuizActivity" tools:ignore="MergeRootFrame" />

9. Default Layout (part 1) in fragment_quiz.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="edu.ithaca.geoquiz4.QuizActivity$PlaceholderFragment" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

10. Default Layout (part 2) <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

11. Layout file default fragment_quiz.xml file has two widgets RelativeLayout TextView Widgets are the components of a view every widget is an instance of the View class or one of its subclasses Click the Graphical Layout tab at bottom to see how the layout looks

12. Layout QuizActivity requires 5 widgets: a vertical LinearLayout a TextView a horizontal LinearLayout two Buttons

13. Layout Overwrite all the text in activity_quiz.xml with this <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" > <TextView android:text="@string/question_text” android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="24dp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/true_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/true_button" /> <Button android:id="@+id/false_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/false_button" /> There will be errors! + sign means that you are creating the resource not just referencing it

14. The view hierarchy

15. Widget Attributes android:orientation determines whether the children appear vertically or horizontally the order in which children are defined determines the order in which they appear on screen. in vertical, first child is topmost in horizontal, first child is leftmost (unless right-to-left language)

16. Widget Attributes android:text tells widget what text to display not literal strings (thought they could be) instead references to string resources a string that lives in a separate XML file called the strings file allows for easy localization

17. String Resources every project has a default strings file named strings.xm l open the strings.xml file in res/values click on strings.xml tab at bottom remove the hello_world string, add three new strings GeoQuiz The Pacific Ocean is larger than the Atlantic Ocean. True False Correct! Incorrect! Settings keep the menu_settings or you’ll get lots of errors!

18. String Resources whenever you refer to @string/false_button in any XML file in the GeoQuiz project, get “False” at runtime. save strings.xml errors in fragment_quiz.xml should go away may get warnings; can ignore. You can have multiple strings files in your project must be in res/values must have a resources root element must contain child string elements your strings will be found automagically

19. Creating View Objects How do XML elements become View objects? see code on next slide contains two Activity methods onCreate(Bundle) called when an instance of the activity subclass ( QuizActivity ) is created. calls method setContentView(int layoutResID) this method inflates a layout and puts it on the screen also asks the fragment manager to add the appropriate fragments each widget is instantiated as defined by its attributes you specify which layout by passing the layout’s resource ID (see later) onCreateOptionsMenu(Menu)

20. Creating View Objects protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_quiz); if (savedInstanceState == null) { getFragmentManager().beginTransaction().add(R.id.container, new PlaceholderFragment()).commit(); } Delete this method; we won’t use fragments!

21. Resources and resource IDS resource: a piece of your app that is not code images, audio files, XML files resources live in a subdirectory of the res directory activity_quiz.xml lives in res/layout/ strings file lives in res/values/

22. Resources and resource IDS resource: can see by opening the file R.java it’s in the gen/edu.ithaca.android.geoquiz directory the edu.ithaca.android.geoquiz name depends on what you named your package. this file is generated by the build process won’t be there until you build! you should see a value similar to public static final int activity_quiz=0x7f030000;

23. Resources To access a resource in code use its resourceID resource for our layout is R.layout.activity_quiz Android generates resource IDs for entire layouts and each string but not individual widgets to generate a resourceID for a widget must include an android:id attribute in the widget’s definition For each button add the attribute: android:id="@+id/true_button” or android:id="@+id/false_button" the + sign means to create the id

24. Wiring up widgets Can access buttons via their resource IDs Add the bold lines to QuizActivity: public class QuizActivity extends Activity { private Button mTrueButton; private Button mFalseButton; @Override protected void onCreate(Bundle savedInstanceState) { these will cause errors: the Button type needs to be imported! see next slide! the m prefix is an android convention

25. Wiring up widgets To fix the import error can organize your imports To organize press: Command+Shift+O on mac Ctrl+Shift+Oon windows/linux this will put in the necessary imports

26. Wiring up widgets To wire up buttons: get references to the inflated View objects set listeners on those objects to respond to user actions

27. Get ref to widgets Can get a reference to an inflated widget by calling: public View findViewById(int id) this method accepts a resource ID of a widget it returns a View object Add to QuizActivity.java see next slide

28. Get ref to widgets protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_quiz); mTrueButton = (Button)findViewById(R.id.true_button); mFalseButton = (Button)findViewById(R.id.false_button); return true; }

29. Setting Listeners Android apps are event driven When app is waiting for a specific event it is listening for that event A listener is an object that implements a listener interface for that event. listener interfaces are provided by Android for most events

30. Setting Listeners Our app: want to listen for a mouse click Must implement the View.OnClickListener interface

31. Setting Listeners protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_quiz); mTrueButton = (Button)findViewById(R.id.true_button); mTrueButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub } }); mFalseButton = (Button)findViewById(R.id.false_button); return true; } We’ll fill this in shortly!

32. Anonymous Classes The listener on the last slide is an anonymous inner class Most listeners in Android use this technique The anonymous inner class implements the OnClickListener interface. means it must implement the interface methods in this case, there is only one: OnClick(View) Must set a similar class for the false button (next slide)

33. Setting Listeners // mTrueButton code is still here, I just took it out to save room mFalseButton = (Button)findViewById(R.id.false_button); mFalseButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub } }); return true; } We’ll fill this in shortly!

34. Toasts A pop-up message in Android is called a toast A toast is a short message that informs the user of something but does not require any input or action. We’ll make toasts that announce whether the user answered correctly or not.

35. Toasts To make a toast call the following method from the Toast class: public static toast Toast makeText(Context context, int resId, int duration) The Context parameter is typically an instance of an Activity class. The second parameter is the resource ID of the string that the Toast will display needs the Context to find and use the string’s resource ID Third parameter is one of two Toast constants that specify how long the toast should be visible

36. Toasts After you make a Toast, use Toast.show() to get it on the screen. see next slide

37. Making Toasts for mTrueButton handler: public void onClick(View v) { Toast.makeText(QuizActivity.this, R.string.incorrect_toast, Toast.LENGTH_SHORT).show(); } QuizActivity.this indicates the correct context Cannot just say “this” because we’re inside an anonymous class!

38. Making Toasts for mFalseButton handler: public void onClick(View v) { Toast.makeText(QuizActivity.this, R.string.correct_toast, Toast.LENGTH_SHORT).show(); }

39. Run right click on name and choose Run As->Android Application To run on device, on a Mac just connect device via USB. on Windows may need to install the abd (Android Debug Bridge). may have to download from your device manufacturer’s website must set device up (see next slide).

40. Setting up device Step 1 Must set up device to accept applications that are not from Google Play if device is running Android 4.1 or earlier, go to Settings  Applications. Make sure Unknown sources is checked. if device is running Android 4.2 or later, go to Settings  Security. Make sure Unknown sources is checked.

41. Setting up device Step 2 Must enable USB debugging in the device. Android 4.0 and earlier: Settings  Applications  Development and enable USB debugging Android 4.1 or later. Must enable developer options. Go to Settings  About Tablet/phone and press Build Number 7 times. Return to Settings see Developer Options and enable USB Debugging.

42. Debugging To see what’s happening on the device or the emulator, see the LogCat window at the bottom of Eclipse (next to the console window). If it’s not showing go to Window  Show View  Other Expand Android and double-click on LogCat