Göm menyn

Lab 1 - Layout in Kotlin + XML/Compose, Flutter and React Native

Purpose

A layout defines the visual structure of a user interface. In this laboratory work you will create the same layout in multiple different ways, this in order to try some different frameworks and approaches.
In this exercise you will:

  • Create interface elements in 4 different ways
  • Create interface elements both in code and declaratively
Getting started with Android Studio at IDA

Task

Create the same user interface in four copies, one for each of the following frameworks:

  • Java/Kotlin + XML (this solution must be declarative, that is, the layout must be defined in XML)
  • Kotlin + Compose
  • React Native
  • Flutter
Additional instructions:
  • The interface should be similar to the picture below, but does not need to use the same icon and element styling
  • You will only create the user interface, you do not need to implement any functionality
  • The "top bar" must describe what framework the current app is created in, such as "Example 1: Kotlin + Compose"

User interface 1

Presenting your work

Demonstrate your user interfaces for the lab assistant, the assistant may ask you to explain parts of the code.The assistant tells you how they want you to submit your code.

Links

Android utveckling (Good starting point.)
Layout on android
Android Compose
Flutter
React-Native
Flexbox Froggy, learn Flexbox

Sidansvarig: Anders Fröberg
Senast uppdaterad: 2024-11-06