Mobile Computing and Internet of Things 2020/21 fall

Video recording of wednesday lab session

Download & Install the latest Android Studio

• https://developer.android.com/studio/install

A guide for going through the installation procedure with video can be found here.

• Create an Android Virtual Device (AVD) a.k.a. Emulator
  • Choose System Image API version 30 (Android R) for the emulator.

Task 1: Hello World

• Create a new Android Studio project
  • Configuration: Empty Activity; Language: Kotlin; Minimum API level: API 21
• Run the new project, either on emulator or your physical device.
  • If you're successful, you should see the app launch with a text "Hello World!" appearing.

Familiarize yourself with Android project structures. read here for some more information.

Task 2: XML-based activities & ConstraintLayout

Single UI screens/windows in Android are called "Activities". An Activity can contain various UI elements (called Views) such as buttons, texts, images, and others.

Open the activity_main.xml Activity definition (it is located in the res folder). This XML describes the only activity of the newly created project.

• Try adding 2-3 buttons to the activity by dragging them from the Common section of the palette.
  • Run the app. Notice that the added elements are not placed exactly where you placed them. This is because of the layout manager used in this Activity, called ConstraintLayout. Layout managers govern how elements are placed in relation to the screen and to each other. They can be arranged as a grid, shown one after the other as a list, or in more complex and useful ways.
• ConstraintLayout is designed for creating adaptive UI-s which ensures a similar experience across various screen types and sizes. Familiarize yourself with the first sections of this Android tutorial up until the "Add a text box" section (inclusive).
  • Every element in a ConstraintLayout must have at least 1 vertical and at least 1 horizontal constraint - if you run into issues, verify you have followed this principle.

ConstraintLayout practice

• Using the constraints concept, position 3 buttons as shown in the image below.
  • First button should be at the top-left corner of the layout, i.e. it should have:
    • its top constrained to the top of the parent
    • its start (the left edge) to the start of the parent
  • Second button should be exactly at the center of the screen, both horizontally and vertically:
    • vertically, its top and bottom should be constrained to the top and bottom of the parent (respectively).
    • Similarly, the start and end should horizontally be constrained to the parent.
  • Third button should be vertically centered halfway between the 2nd button and bottom of the screen, horizontally be at the right edge of the screen.
    • right edge constrained to the right edge of the parent.
    • top constrained to bottom of the 2nd button.
    • bottom constrained to bottom of the parent.

Task 3: Managing resources

• Set some values for the button display texts. Try using both the visual designer and the XML source editor.
  • In the visual designer, you can just update the value by finding the 'text' field to the right of the preview window
  • Switch to XML source by clicking on the "Code" button at the top right of the screen . Try updating the 'text' attribute there as well.

Note the warnings the editor gives you. While setting these values directly works, Android has a system of managing resources, which allows you to better organize resources such as strings, images, UI layouts. Storing such values separately from your source code improves the maintainability of your projects and also enables you to make your app more adaptive, e.g. by using different resources for based on the device's screen size, for example.

Let's try using string resources for the button texts.

• Create some string resources for the values to display on the buttons.
  • Edit app\src\main\res\values\strings.xml and add 3 values for each button
  • Set the 'text' attribute of the Button to the created String resource. E.g. specify as value @string/my_button_string . Try both the XML editing and visual approach.

Task 4: Localization options

The XML Layouts are also resources. Let's see how we can make the application use different resources depending on the device's orientation (portrait mode or landscape).

• Create a new activity resource, and add add an Orientation qualifier for Landscape mode. Take care to keep the filename identical to the original activity.

• Note that by default, the created activity uses ConstraintLayout. Change that value to LinearLayout. LinearLayout is a simpler layout compared to ConstraintLayout, you don't have to define constraints to the elements. Instead, you can define the layout to be either horizontal or vertical, and elements will be placed one after the other accordingly.

• Add 3 buttons to your created LinearLayout.
• Run the app and try switching between portrait and landscape modes. You should be able to see the different activities with different layouts being rendered.

Task 5: XML attributes

The behaviour of the UI elements can be configured with various XML attributes.

• In the landscape LinearLayout, using layout_width/layout_height, layout_weight and layout_gravity, try to create the following set-up.

• Let's make the top and bottom buttons each take up 40% of the screen vertically, and the middle button take up 20% of the screen.To do this, set layout_weight values to 4,2,4.
  • You can get the exact same result by using values 2,1,2 as well, the weights are summed and then the dimensions of each subweight are determined.
• Make the middle button narrow by changing its layout_width to wrap_content
  • To center the middle button, update the layout_gravity of that button to "center".
• Make the bottom button text right-algined, by changing the buttons gravity to center_vertical|end
• In the ConstraintLayout, set the layout_width property of the 2nd button to some numeric value such as 200dp. Then, try setting it to 0dp (match_constraint).

Homework 1: Simple Biography Viewer GUI

Detailed description is here