Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 2: Simplify! The Android User Interface.

Slides:



Advertisements
Similar presentations
CE881: Mobile and Social Application Programming Simon M. Lucas Menus and Dialogs.
Advertisements

Android User Interface
App Customization. Introduction  Not all Android apps look the same  i.e. the default bland black and white look  Most have custom looks like  Background.
Chapter 1: Voilà! Meet the Android
Chapter 6 Jam! Implementing Audio in Android Apps.
Chapter 6: Jam! Implementing Audio in Android Apps.
All About Android Introduction to Android 1. Creating a New App “These aren’t the droids we’re looking for.” Obi-wan Kenobi 1. Bring up Eclipse. 2. Click.
Hello world Follow steps under the sections “Create an AVD” and “Create a New Android Project” at
Application Fundamentals. See: developer.android.com/guide/developing/building/index.html.
Filip Debelić What is it? Android is a mobile operating system (OS) based on the Linux kernel and currently developed by Google Android,
Android Development (Basics)
App Development on Android. Contents  First Milestone  Second Milestone  Third Milestone  Last Milestone 
Android Programming. Outline Preparation Create new project Build and Run a project Debug a project Deploy on devices.
Creating Android user interfaces using layouts 1Android user interfaces using layouts.
Chapter 1: Voilà! Meet the Android. Smartphones –Can browse the Web –Allow you to play games –Use business applications –Check –Play music –Record.
Better reference the original webpage :
Introduction to Android Programming Content Basic environmental structure Building a simple app Debugging.
Android development the first app. Andoid vs iOS which is better? Short answer: neither Proponents on both sides For an iOS side, see this article on.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 9: Customize! Navigating with a Master/Detail.
Introducing the Sudoku Example
Android: versions Note that: Honeycomb (Android v3.0) A tablet-only release Jelly Bean (Android v4.1) Released on July 09, 2012.
 Understanding an activity  Starting an activity  Passing information between activities  Understanding intents  Understanding the activity lifecycle.
Chapter 5: Investigate! Lists, Arrays, and Web Browsers.
Chapter 9: Customize! Navigating with Tabs on a Tablet App.
Chapter 1: Voilà! Meet the Android
Chapter 10: Move! Creating Animation
Favorite Twitter® Searches App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
Hello world Follow steps under the sections “Create an AVD” and “Create a New Android Project” at
Chapter 2: Simplify! The Android User Interface
Tip Calculator App Building an Android App with Java © by Pearson Education, Inc. All Rights Reserved.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 5: Investigate! Android Lists, Arrays,
Chapter 5 Creating User Interfaces GOALS and OBJECTIVES Begin our application by creating our user interface. More than one way to create a user interface.
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Using Android XML Resources.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Chapter 2 The Android User Interface. Objectives  In this chapter, you learn to:  Develop a user interface using the TextView, ImageView, and Button.
INTRODUCTION TO ANDROID. Slide 2 Application Components An Android application is made of up one or more of the following components Activities We will.
Engage! Android User Input, Variables,
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 7: Reveal! Displaying Pictures in a GridView.
Android Boot Camp for Developers Using Java, 3E
User Interfaces: Part 1 (View Groups and Layouts).
Chapter 7: Reveal! Displaying Pictures in a Gallery.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Android Hello World 1. Click on Start and type eclipse into the textbox 2.
ANDROID – DRAWING IMAGES – SIMPLE EXAMPLE IN INTERFACE AND EVENT HANDLING L. Grewe.
First Venture into the Android World Chapter 1 Part 2.
ANDROID AND MODEL / VIEW / CONTROLLER. Slide 2 Design Patters Common solutions to programming problems are called design patterns Design patterns are.
HW#9 Clues CSCI 571 Fall, HW#9 Prototype
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Building User Interfaces Basic Applications
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Field Trip #30 A Memory Game By Keith Lynn. View A View is the basic building block of an app Some Views hold other views An example of this is GridLayout.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 10: Move! Creating Animation 1 Android.
Mobile Programming Lecture 4 Resources, Selection, Activities, Intents.
ANDROID LAYOUTS AND WIDGETS. Slide 2 Introduction Parts of the Android screen Sizing widgets and fonts Layouts and their characteristics Buttons, checkboxes.
Chapter 5: Investigate! Lists, Arrays, and Web Browsers.
Chapter 2: Simplify! The Android User Interface
Explore! Icons and Decision-Making Controls
Open Handset Alliance.
Android – Event Handling
Mobile Application Development Chapter 3 [Using Eclipse Android Studio for Android Development] IT448-Fall 2017 IT448- Fall2017.
Android Boot Camp for Developers Using Java, 3E
Creation of an Android App By Keith Lynn
Mobile Application Development Chapter 4 [Android Navigation and Interface Design] IT448-Fall 2017 IT448- Fall2017.
Mobile Programmming Dr. Mohsin Ali Memon.
Activities, Fragments, and Intents
Presentation transcript:

Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 2: Simplify! The Android User Interface Android Boot Camp for Developers Using Java, 2nd Ed.

Objectives In this chapter, you learn to: Develop a user interface using the TextView, ImageView, and Button controls Create an Android project that includes a Button event Describe relative and Linear layouts for the user interface Create multiple Android Activities Add activities to the Android Manifest file Add a Java class file Android Boot Camp for Developers Using Java, 2nd Ed.

Objectives (continued) Write code using the onCreate method Display content using the setContentView command Open a second screen using a Button event handler Use an OnClickListener to detect user interaction Launch a second screen using a startActivity method Correct errors in Java code Run the completed app in the emulator Android Boot Camp for Developers Using Java, 2nd Ed.

Designing an Android App Designing apps is like constructing a building The Big Picture Follow these steps: Create the user interface for every screen Create an Activity for every screen Update the Android Manifest file Code each Java class with objects and actions Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface The interface is a window on the screen of any mobile device The layout is designed with XML code Special Android-formatted XML code is extremely compact Relative Layouts and Linear Layouts A Relative Layout organizes layout components in relation to each other Provides more flexibility in positioning than Linear layouts Must be changed from the linear default Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) A Linear Layout organizes layout components in a vertical column or horizontal row Objects are placed directly below each other Can be switched from vertical to horizontal orientation Linear layout is the default layout Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Designing the Healthy Recipes Opening User Interface Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Android Text Properties Text Property – changes the text written in the control Text Size Property – can be adjusted in inches, millimeters, pixels, density-independent pixels, and scaled-independent pixels Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Adding a File to the Resources Folder Before you can use images, they must be placed in the resources folder Res folder contains three subfolders All folder names begin with drawable xhdpi (resources for extra high-density screens) hdpi (resources for high-density screens) mdpi (resources for medium-density screens) ldpi (resources for low-density screens) Android supports three graphic formats .png (preferred), .jpg (acceptable), .gif(discouraged) Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Adding an ImageView Control An ImageView control displays icons or graphics on the Android screen Adding a Button Control There are four types of Buttons Button (buttons that perform a function) Small Button (Smaller buttons) ToggleButton (buttons that can be on or off) ImageButton (buttons that have a picture on them) Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Android Boot Camp for Developers Using Java, 2nd Ed.

Using the Android User Interface (cont’d) Planning a Program Gather and analyze program requirements Design the user interface Design the program processing objects Code the program Test the program Android Boot Camp for Developers Using Java, 2nd Ed.

Creating Activities Each screen is considered an activity Constructed using XML layout files and a Java class Creating an XML Layout file All layout files are placed in the res/layout directory Adding a Class File A class describes a group of objects and serves as a blueprint, or template, for creating those objects An object is a specific, concrete instance of a class When you create an object, you instantiate it; meaning you define one particular variation of the object Android Boot Camp for Developers Using Java, 2nd Ed.

Creating Activities (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

The Android Manifest File The Android Manifest file contains: the name of the Java application a listing of each activity permissions needed to access other Android functions (like accessing the Internet) the minimum level of the Android APL Adding an Activity to the Android Manifest When applications have more than one activity, the Manifest must have an intent to navigate among multiple activities Android Boot Camp for Developers Using Java, 2nd Ed.

The Android Manifest File (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity A method is a set of Java statements that can be included inside a Java class Methods perform specific tasks The method body contains a collection of statements that defines what the method does. Coding an onCreate Method public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } Note the use of Curly braces { that begin and end the method code and the use of the semi-colon ; SetContentView(R.layout.main); is added to display the screen Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Displaying the User Interface Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Creating a Button Event Handler An event handler is part of a program coded to respond to a specific event Tapping the button is called a click event Java code must contain the following sections Class property to hold a reference to the Button object onClickListener() method to await the button click action onClick() method to respond to the click event Code Syntax: Button b=(Button)findViewById(R.id.btnRecipe); Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) When you import the Button type as an Android widget, the button package becomes available throughout the app An import statement makes more Java functions available to your app A stub is a code placeholder module b.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub } }); Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Coding a Button Event Handler Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Coding a Button Event Handler Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Coding a Button Event Handler Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Coding a Button Event Handler Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Correcting Errors in Code Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the Java Activity (continued) Saving and Running the Application Testing the App automatically saves it The Save All button will save the project Select Android Application from the dialog window the first time an app runs Android Boot Camp for Developers Using Java, 2nd Ed.

Summary Relative layouts arrange components freely on the screen Linear layouts arrange screen components in a vertical column or horizontal row Text Property and TextSize property are used when creating text To display graphics (pictures and icons), use the ImageView control An Activity is when the app makes contact with the user and is a core component of the app Android Boot Camp for Developers Using Java, 2nd Ed.

Summary (continued) Each screen in your app is an Activity Every app has an Android Manifest file containing the name if the app and a list of each activity When an app has more than one activity, it must have an intent so the app can navigate among multiple activities A method is a set of Java statements included in a Java class The onCreate method initializes an Activity Android Boot Camp for Developers Using Java, 2nd Ed.

Summary (continued) The setContentView command displays the content on the screen Tapping or clicking a button invokes the event listener (OnClickListener) and runs the code in that button Use the startActivity() method to start an Activity in an app that has multiple Activities The intent contains a context - initiating Activity class is making the request - and the name of the Activity Red error icons and red curly lines indicate errors Android Boot Camp for Developers Using Java, 2nd Ed.