Jetpack Compose for Designers

Add to favorites

Learn about the basics of Jetpack Compose to build an NFT Marketplace Android app with the powerful declarative framework

Play video

Jetpack Compose for Designers image 1

Please download the resources from the download link. This will be vital for completing this course. In this folder you should find a Figma file which is where we will be getting our designs from and the assets that we will use in the development of our sample app.

About this Course

This course is meant to introduce you to the Jetpack Compose framework and how you can still build amazing, powerful Android applications using Kotlin and the declarative syntax. I'll introduce you to some basics of Kotlin and how you can use Android Studio’s previews to quickly set up and visualize your app. We'll then delve further into Jetpack Compose code to see how we can customize basic view layouts of the app.

In this course, we'll build a sample NFT Marketplace app. We'll take a look at how we can use basic view elements like Text and Card, customize buttons and and other elementary views to match our design, and how to load data to make our composable functions dynamic. We'll also see how we can visually enhance our app by working with Material Icons, Android Theming, and more. Finally, we'll take a look at how we can use navigation throughout our app to support the default Android controls.

Project Setup

This course expects you to have some prior programming knowledge. Therefore, please make sure you have taken some of the previous courses before continuing. In this course, I am running macOS Monterey and Android Studio Bumblebee | 2021.1.1 Patch 2. You can download Android Studio from here.

To create a new project, open up Android Studio and select New Project . Under Templates and Phone and Tablet, select Empty Compose Activity . Enter the details for your app and save it in a location on your disk for you to find easily.

Inside of Android Studio Preferences, under Languages and Frameworks, select Kotlin. We’ll change the update channel from Stable to Early Access Preview. Currently, I am using 211-1.6.20-release-275-AS7442.40.

Inside of our project navigator, we need to update some of the build.gradle files we have. Be sure to note the difference between the app-level gradle file and the project level gradle file. For the project-level file, change it to the following:

buildscript {
    ext {
        compose_version = '1.1.0'
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.0.4'
        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.10'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.1.2' apply false
    id 'com.android.library' version '7.1.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.5.21' apply false
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

allprojects {
    tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
        kotlinOptions {
            freeCompilerArgs += [
                    "-Xuse-experimental=kotlin.ExperimentalUnsignedTypes",
                    "-Xuse-experimental=kotlinx.coroutines.DelicateCoroutinesApi",
                    "-Xuse-experimental=kotlinx.coroutines.ExperimentalCoroutinesApi",
                    "-Xuse-experimental=kotlinx.coroutines.FlowPreview",
                    "-Xuse-experimental=kotlinx.coroutines.InternalCoroutinesApi",
                    "-Xuse-experimental=kotlinx.serialization.ExperimentalSerializationApi",
                    "-Xuse-experimental=androidx.compose.animation.ExperimentalAnimationApi",
                    "-Xuse-experimental=androidx.compose.ExperimentalComposeApi",
                    "-Xuse-experimental=androidx.compose.material.ExperimentalMaterialApi",
                    "-Xuse-experimental=androidx.compose.runtime.ExperimentalComposeApi",
                    "-Xuse-experimental=androidx.compose.ui.ExperimentalComposeUiApi",
                    "-Xuse-experimental=coil.annotation.ExperimentalCoilApi",
                    "-Xuse-experimental=com.google.accompanist.pager.ExperimentalPagerApi",

            ]
        }
    }
}

For the app-level file, change build.gradle to the following:

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 31

    defaultConfig {
        applicationId "io.designcode.nftapp"
        minSdk 21
        targetSdk 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_11
        targetCompatibility JavaVersion.VERSION_11
    }
    kotlinOptions {
        jvmTarget = '11'
        useIR = true
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.6.10'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    implementation "androidx.navigation:navigation-compose:2.4.0-beta02"
}

We’re now ready to start building our application.

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

Subtitles

Assets

Jetpack Compose for Designers

Learn about the basics of Jetpack Compose to build an NFT Marketplace Android app with the powerful declarative framework