Mobiilirakenduste arendus 2022/23 sügis

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 33 (Android 13) for the emulator.

Task 1: Hello World

• Create a new Android Studio project
  • Configuration:
    • Template: Empty Activity;
    • Language: Kotlin;
    • Minimum SDK level: API 27: Android 8.1 (Oreo)
• 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.
  • Try getting the app to build & run on your device/emulator before proceeding!
    • Troubleshooting Typical Emulator Issues
• Familiarize yourself with Android project structures. Read here for some more information.
  • Try to locate (no need to open yet):
    • AndroidManifest.xml - a global descriptor of the app, its components
    • MainActivity.kt - Kotlin program representing the only UI view of this empty project
    • activity_main.xml - XML layout file for the only UI view of this empty project

Task 2: XML-based activities & ConstraintLayout

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

Open the activity_main.xml Activity definition (located in the res/layout folder). This XML resource describes the layout of the only Activity of the newly created project.

• Try adding 2 Buttons to the activity by dragging them from the Common section of the Palette, drop them near the bottom edge of the screen.
• Run the app.
  • Notice that the added elements are not placed exactly where you placed them, instead they appear on-top of each other at the top-left corner.

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, responsive 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.
  • Here's what defining constraints looks like from the visual editor:

ConstraintLayout practice

• Using the constraints concept, position 3 buttons as shown in the image below.
  • Button 1 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
  • Button 2 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.
  • Button 3 should be vertically centered halfway between Button 2 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.

Chains in ConstraintLayout

A chain is a bidirectional constraint between 2 or more views that allows you adjust positioning of groups of objects.

• Add another button, placing it similarly to the 3rd button:
  • Vertically centered between the Button 2 and bottom of the screen
  • Horizontally constrain the left edge to the left edge of the parent.
• Form a Horizontal Chain from Button 3 and Button 4:
  • Select both of them (Hold Shift and click both)
  • Right-click -> Chains -> Create Horizontal Chain

• Adjust the layout_width of both buttons to 0dp
  • 0dp (also known as match_constraint) allows the element to stretch its dimensions to any constraints that apply to it. In this case, if both buttons have 0dp in a horizontal chain, they will take up all the horizontal space equally.

Task 3: Managing resources

• Let's set some values for the button's texts. We'll try using both the visual designer and the XML source editor to achieve this.
  • 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 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 (activity_main.xml).

• 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.
  • Note: make your device/emulator has orientation changes enabled, enable it from the settings bar by dragging dawn from the top of the screen.

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 (Portrait mode), set the layout_width property of the 2nd button to some numeric value such as 200dp. Then, try setting it to 0dp (match_constraint).
  • It's best practice to try and avoid using fixed numeric values (such as 200dp), if at all possible. Always prefer to use wrap_content, 0dp to achieve more responsive dimensions that scale well across different screen sizes.
  • To read more about units Android uses (such as dp), see here here.

Homework 1: Biography Viewer

Detailed description is here