CS 151 - Lecture 18

Cay S. Horstmann

Android Programming

• Mobile OS developed by Google
• Open source (Apache licensed)
• Based on Linux and Java (but not the JVM)
• Worldwide market share > 85% in 2016
• Safari book http://0-proquest.safaribooksonline.com.catalog.sjlibrary.org/9780134401959
• Useful snippets https://github.com/codepath/android_guides/wiki

First Android App

• Android app consists of activities
• Activity = single screen with UI
• Transition between activities as needed
• A program can use an activity of another program (e. g. camera)
• Simplest activity:

  public class MainActivity extends AppCompatActivity {
     protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
     }
  }

• Activities must be declared in AndroidManifest.xml

  <activity android:name=".MainActivity">
     <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
  </activity>

Layouts

• Can use programmatic layout, like in Swing
• Much more common to specify layout in XML
  • In res/layout directory
• LinearLayout lays out components horizontally or vertically
• ConstraintLayout lets you specify layout constraints (such as “this image below that text”)
• IDE has drag-and-drop layout editor
• Be sure to look at the XML
• Load in the onCreate method:

   setContentView(R.layout.activity_main);

Resources

• String resources should be declared in res/values/strings.xml
• Those strings can be translated to other languages
  • E.g French strings res/values-fr/strings.xml
• Refer to as

  <TextView ... android:text="@string/app_greeting"/>

• Image resources go to res/drawable

  <ImageView ... android:src="@drawable/spirit_icon"/>
  

• Can provide different resolutions since screen DPI varies widely (ldpi ... xxxhdpi)
  • E.g. res/drawable-xhdpi/spirit-icon.jpg

Lecture 18 Clicker Question 1

What are the most feared words in the English language?

• I'm from the government and I'm here to help you
• Honey, we need to talk
• We're doing this for your own good
• But it builds on my machine

Build Automation

• Reproducible builds happen outside your IDE
• These days, generally on a build server
• Android uses gradle for build automation
• Android Studio puts gradlew into the root of your project
• Build with

  ./gradlew assembleDebug
  

• Run with

  emulator -list-avds
  emulator -avd Nexus_4_API_16 &
  adb install -r app/build/outputs/apk/app-debug.apk
  adb shell am start -n "edu.sjsu.cs151.myapplication/.MainActivity"
  

IDs

• Can specify TextView text declaratively.
  • <TextView ... android:text="Fred">
  • <TextView ... android:text="@string/protagonist">
• Won't work if we need to update text dynamically
• Assign an ID to each component
• Use property pane in GUI builder
• In XML, set android:id="@+id/result"
• Get as R.id.result in Java code

  TextView t = (TextView) findViewById(R.id.questionText);
  t.setText("How old is Fred?");

Buttons

• Add a listener to a button:

  Button button1 = (Button) findViewById(R.id.button1);
  button1.setOnClickListener(
     new View.OnClickListener() {
        @Override public void onClick(View arg0) {
           ...
     }});

• Caution—this is Java 7
  • No lambdas (but Android Studio can give you the illusion by “folding” the listener)
  • Must declare local variables final if the listener accesses them

Lab

• Work with a buddy
• Both of you submit a screen shot of your app on androidLab/screen2.png via Git

Image View

• Pick up with the app that you built when you ran through https://developer.android.com/training/basics/firstapp/running-app.html
• Download one of the SJSU logos (or any image that's not too large)
• Rename if necessary so that the name only has lowercase letters, digits, and underscores.
• Copy it into the src/main/res/drawable directory of the app, e.g.

  cp ~/Downloads/sjsu_logo.jpg ~/AndroidStudioProjects/MyApplication/src/main/res/drawables
  
  

• Add an ImageView in the layout below the greeting
• Add this to the <ImageView ...> element:

  android:src="@drawable/sjsu_logo"
  

  You can either edit the XML text or set the src property in the property window.
  • Note: No .jpg extension!
• Right-click on the ConstraintLayout entry to the left and select Constraint Layout → Clear all constraints. You should see four springs disappear. Now select the text view and mouse over it. Drag a line from the top circle to the top of the surrounding rectangle, and the left circle to the left of the surrounding rectangle. The text should now float to the top left corner.
• Then select ImageView on the left, mouse over it, and drag a line from the top circle to the bottom circle of the text view. Also drag a line from the left circle to the left of the surrounding rectangle.
• Click on Text to see the XML view. How did your dragging get translated to XML?
• Run the app. What happens?

Buttons

• Make a new app, just like before, and call it QuizApp. When you set up the app, make sure the package is set to edu.sjsu.cs151.quizapp.
• Add this TrueFalseQuestion.java class.
• Make a layout with a text field, and below two buttons labeled True and False, and below another text field. It doesn't have to look pretty.
• Rename the text fields into questionText and resultText. That's best done in the property sheet because then Android Studio will rename all references. Rename the buttons trueButton and falseButton.
• In the main activity, make four instance variables questionText, resultText, trueButton, and falseButton. Initialize them by looking up the component by ID.
• Add this to the main activity:

    final TrueFalseQuestion q1 = new TrueFalseQuestion("Was the iPhone the most popular smartphone in 2006?", false);
  questionText.setText(q1.getText());

• Add listeners to the trueButton and falseButton.
• In each of the listeners, add the code to set the resultText to “Correct” or “Incorrect”.
• Run your app and take a screen shot.

Extra time? Localize your app

• Go back to the first application. Look into the layout XML. Notice how the string “Hello, World!” is hardwired into the XML.
• That's reprehensible. Instead, visit res/values/strings.xml and add a string named app_greeting.
• In the layout XML, change the literal string to "@string/app_greeting"
• Try it out—you should still see the same greeting.
• Now go back to strings.xml and locate the link to the translations editor. Click it. Locate the globe icon in the upper left corner. Pick some language that you know. Provide the translation of “Hello, World!”
• Also provide a translation of app_name.
• Run your app. In the phone's home screen, select settings, and change the phone's language to what you just provided. Do you see your localized version?