Android SDK & App Development CSE651C, B.Ramamurthy 9/19/2018

References Android developer documentation by Google Android Studio Essentials by Belen Cruz Zapata, Book. Also many texts available online through UB Library. CSE651C, B.Ramamurthy 9/19/2018

General Architecture of Android Application Web UI HTML Logic/functionJavaScript Resources Images/etc. App UI XML Logic/functionJava Resources Images/etc. CSE651C, B.Ramamurthy 9/19/2018

Getting Started (Pre)Install Android SDK and configure it as directed by the installation. You will need a minimal version of Java. Step 1: Open the SDK and create a new project. Step 2: Configure the project for a simple project. Step 3: Understand the various regions of the development environment. Step 4: Add a simple User Interface, with a RelativeLayout (find out about other layouts) with a “text”, “image” and a “button”– the three of the important components in a User Interface (UI) CSE651C, B.Ramamurthy 9/19/2018

Name your app: App1 CSE651C, B.Ramamurthy 9/19/2018

Select the Device & Version CSE651C, B.Ramamurthy 9/19/2018

Choose an Activity Type (Basic or Empty) CSE651C, B.Ramamurthy 9/19/2018

Customize Activity We will take the default name for this exercise and click the Finish button. SDK will auto generate a lot of code. Important components on the Project panel on the left: Manifest file Java files Res(ource) file Gradle, the build tool You will working with Res (Layout, drawable etc.) files for the UI and Java file for the control logic CSE651C, B.Ramamurthy 9/19/2018

Sample Layout Content_main.xml CSE651C, B.Ramamurthy 9/19/2018

Lets start with UI Views: TextView, ImageView Widgets: Button, EditText Layout of the various components on the UI: Different types of Layouts are available RelativeLayout Managing the limited “real-estate” of the mobile device screen Lets just run the simple project we created and check it out: What do you see on the screen? Can we modify the various items and understand a few concepts? CSE651C, B.Ramamurthy 9/19/2018

TextView <string name="hello">Hello EAP Students.</string> https://developer.android.com/reference/android/widget/TextView.html Now add this snippet to the content_main.xml <TextView android:id="@+id/hello_id" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="@string/hello" /> Also add a resource to string.xml: <string name="hello">Hello EAP Students.</string> Run it and see…Hmm.. It is all squished to the top left due the RelativeLayout. Lets add some space…. CSE651C, B.Ramamurthy 9/19/2018

Adding Spacing & change font size android:layout_marginTop="20dp” android:textSize="32sp" CSE651C, B.Ramamurthy 9/19/2018

Add an Image <ImageView android:id="@+id/image1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/imagep1" /> Hmm.. It is not spaced right? What do you do? Add space from the top. android:layout_marginTop=“120dp” CSE651C, B.Ramamurthy 9/19/2018

Sample Projects on GitHub CSE651C, B.Ramamurthy 9/19/2018

Summary We looked at development of a sample App You can easily load it to your phone in a few simple steps, I will let you do it. (I cannot give you instructions since you may all have different phones.) Next we will look at the Java code for interacting with the UI. CSE651C, B.Ramamurthy 9/19/2018