Maximiliano Firtman
Independent Consultant
Course Description
Developing Android apps was always challenging, but now we have Kotlin and Jetpack Compose to make development smoother. In this course, we will make an App from scratch, learn Kotlin, create the user interface, connect it with data, and make a bridge to the web. By the end of the course, you'll be able to publish and compile your App for Android and the Google Play Store.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: June 23, 2022
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 44 minutes
Maximiliano Firtman introduces the course by providing some personal background with mobile development and discussing an overview of what material will be covered in this course. Prerequisites for this course are also provided in this segment.
Maximiliano walks through the layers of the Android operating system and which parts will be utilized in this course. An Android application should contain an APK, a ZIP package containing compiled VM code, metadata, assets, and a signature and be installable via the Play Store or USB cable.
Maximiliano discusses Android version numbers, code names, and API numbers. SDK versions, including minimum SDK version, target SDK version, and compile SDK version, are also covered in this segment.
Maximiliano discusses an overview of Kotlin being open source, statically typed, containing type inference, multi-platform, easy to learn, concise, and null-safety. Kotlin's ability to compile to JVM 6, JVM 8, Android - Java DEX, Native, and Kotlin Multiplatform Mobile is also discussed in this segment.
Basics
Section Duration: 59 minutes
Maximiliano walks through some basic expressions in Kotlin, including global expressions, variables, booleans, semicolons, printing to the console, correct casing, and conditionals. A student's question regarding using multiple cases is also covered in this segment.
Maximiliano demonstrates that Kotlin is a statically typed yet flexible language by walking through some variables and types, including mutable and immutable variables, constants, defining types, and core data types.
Maximiliano discusses collections including mutable and immutable lists, sets, maps, and dictionaries. When talking to the Android SDK sometimes Java arrays are required.
Maximiliano demonstrates the function of Null Safety to distinguish between references that can hold null (nullable references) and those that cannot (non-null references). Kotlin's type system is aimed at eliminating the danger of null references
Maximiliano walks through creating functions with the fun keyword, inputting arguments, extension functions, and lambda functions. Lambda expressions and anonymous functions are function literals that are not declared but passed immediately as an expression.
Maximiliano demonstrates how to declare a class with the class name and the optional header and body and discusses constructors. A class in Kotlin can have a primary constructor and one or more secondary constructors.
Maximiliano discusses other data types including the companion objects attached to classes, sealed classes, enum classes,and data classes.
Maximiliano answers student questions regarding SDKs compiling to Android and what the function of the triple double quotes are.
Project
Section Duration: 50 minutes
Maximiliano walks through creating a new project using Android Studio, including setting up the application's app store ID. A walk-through of the application preview window is also covered in this segment.
Maximiliano discusses an overview of Jetpack Compose main concepts, including Android activity, theme, composable (UI component), modifier, composition, mutable state, and remember. This segment also briefly discusses the composition local, side effects, dimension units: dp, sp, and graphical assets: PNG and SVG concepts.
Maximiliano demonstrates how to create a composable to build a user interface by defining a set of composable functions that take in data and emit UI elements.
Maximiliano demonstrates modifiers allow you to decorate or augment a composable, including changing the composable's size, layout, behavior, and appearance. Since each function makes changes to the Modifier returned by the previous function, the sequence affects the final result.
Maximiliano walks through implementing a TextField, using the remember composable to allow a user to input text. A value computed by remember is stored in the Composition during initial composition, and the stored value is returned during recomposition.
UI
Section Duration: 1 hour, 37 minutes
Maximiliano walks through creating the Offers page of the application, including a shortcut to create a Composable and preview, and discusses the purpose of the andriodx imports. Editing the page's text styling and adding auto imports are also covered in this segment.
Maximiliano demonstrates setting the Offers page styles in the theme using MaterialTheme and further styling using modifiers. Setting up custom reusable theme colors in the ui.theme/Color.kt file is also demonstrated in this segment.
Maximiliano walks through creating, converting, and importing a vector background image to the Offers page. Modifying the image width and height is also covered in this segment.
Maximiliano demonstrates creating a private composable just for the preview to allow multiple previews to be viewed at the same time. Implementing a scrollable preview is also covered in this segment.
Maximiliano walks through rendering the application's title bar by downloading a vector logo and placing it in the correct content position in the Scaffold. Implementing the composables Box and TopAppBar are also covered in this segment.
Maximiliano walks through creating a bottom navigation bar by creating a data class to contain the titles, images, and routes for each navigation option. Styling the alignment, image, and text of the NavBarItem is also covered in this segment.
Maximiliano demonstrates rendering each navbar item, implementing state, and updating the navigation icon colors when selected. Styling the bottom nav bar with proper padding, background color, and font is also covered in this segment.
Maximiliano walks through creating and implementing navigation for each page when the corresponding icon is selected. A student's question regarding if iterables could be used is also covered in this segment.
Data
Section Duration: 52 minutes
Maximiliano walks through creating a composable for a ProductItem and then the page with a LazyColumn. Compose provides a set of components that only compose and layout items visible in the component’s viewport. These components include LazyColumn and LazyRow.
Maximiliano demonstrates calling the web service using HTTP(s) with the RetroFit, OkHttp, and JsonConverter libraries. The AsyncImage from Coil will also be used to download images from the web.
Maximiliano walks through creating a DataManager class that will be responsible for managing the application's data. Adding and removing products from the cart will be managed by the created class.
Maximiliano demonstrates fetching and parsing the data using the previously imported libraries within composables. The DataManager is also edited to conform to an Android architectural pattern: ViewModel.
Maximiliano walks through pulling in the dynamic data to render images, names, and prices for each category of ProductItems. The previously created dataManger will pull in the usable data from the web server.
Production
Section Duration: 21 minutes
Maximiliano demonstrates rendering an AndroidView to connect classic Android UI controls with a composable. Integrating an AndroidView into Jetpack can be achieved by embedding a chromium engine into the application.
Maximiliano walks through the finishing steps, including setting the application icons and building the final app APK or bundle. A student's question regarding Android's png support is also covered in this segment.
Wrapping Up
Section Duration: 6 minutes
Maximiliano wraps up the course by providing a brief overview of the material covered and answering student questions.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops