Mobiiliarvutus ja asjade internet 2019/20 sügis

Download & Install the latest Android Studio

• https://developer.android.com/studio/install
• Create an Android Virtual Device (AVD) a.k.a. Emulator
  • Choose System Image API version 28 (Android Pie) for the emulator.
  • If you have errors installing Intel HAXM on Windows, make sure Hyper-V is disabled

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 succesful, you should see the app launch with a text "Hello World!" appearing.

Introducing XML-based Android 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. 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.
• 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.

Task 2: ConstraintLayout practice

• Using the constraints concept, position 3 buttons as shown below.
  • First button should have its top constrained to the top of the parent and its start (the left edge) to the start of the parent
  • Second button should
    • vertically have both its top and bottom constrainted to the top and bottom of the parent (respectively).
    • Similarly, the start and end should horizontally be constrainted to the parent.
  • Third button should have
    • 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. Note the warnings the editor gives you.
• 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 XML editing and visual approach.

Task 4: Localization options

• 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, instead of ConstraintLayout, the created activity uses LinearLayout.

• Add a few 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.

• Tips:
  • To get weight-based dimensions, the height/width should be set to "0dp", and layout_weight should have some value
  • To change the placement of an element using wrap_content, you can use layout_gravity.
• In the ConstraintLayout, set the layout_width property of the 2nd button to some numeric value such as 100dp. Then, try setting it to match_constraint.

Homework 1: Simple Biography Viewer GUI

Detailed description is here