JetPack-Compose

In Google IO '19, Google launched Jetpack Compose aims to be a declarative framework to build Android user interfaces easily using a Kotlin. So, basically, declarative UI means to create UI by specifying a specific set of UI elements.

This repository is a collection of jetpack compose modules to help bootstrap an Android Application.

	Name	Description
1	AppBar	AppBar component is often used as the header for our screen. It displays navigation title, color, vector icon along with menu components and clicks listener.
2	TextView	TextView helps to display the text on screen.
3	Button	Button is a component where the user can tap or click to perform an action. Available style for Button DefaultStyle, OutlineStyle and TextStyle.
4	ImageView	Displaying image resources, for example Drawable and Vector Drawable using Composable function DrawableImage and VectorDrawableImage.
5	ListView	It creates a column and stack all of them in listView vertically and inside this VerticalScroller help column in the scrolling of the list items.

Jetpack Compose still isn’t ready for production. Developer preview libraries were made only to simplify trying the future of UI in Android.So you should be on 4.1 Canary build of Android Studio

Step 01. Project's gradle file

allprojects {
    repositories {
        google()
        jcenter()
    }
}

dependencies {
    classpath "com.android.tools.build:gradle:4.1.0-alpha01"
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
}

Step 02. App's build.gradle

android 
{
    // Set both the Java and Kotlin compilers to target Java 8.
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        // Enables JetPack Compose for this module
        compose true
    }

    // Only use for dev06 Version
    composeOptions {
            kotlinCompilerVersion "1.3.61-dev-withExperimentalGoogleExtensions-20200129"
            kotlinCompilerExtensionVersion "0.1.0-dev06"
        }
}

When importing classes related to JetPack Compose in this project, use those from:

• androidx.compose.* for compiler and runtime classes.
• androidx.ui.* for ui toolkit and libraries.

UI components

implementation 'androidx.ui:ui-layout:0.1.0-dev06'
implementation 'androidx.ui:ui-material:0.1.0-dev06'
implementation 'androidx.ui:ui-tooling:0.1.0-dev06'
implementation 'androidx.ui:ui-foundation:0.1.0-dev06'
implementation 'androidx.ui:ui-animation:0.1.0-dev06'
implementation 'androidx.ui:ui-animation-core:0.1.0-dev06'
implementation 'androidx.ui:ui-vector:0.1.0-dev06'
implementation 'androidx.ui:ui-foundation:0.1.0-dev06'
implementation 'androidx.ui:ui-text:0.1.0-dev06'
implementation 'androidx.ui:ui-test:0.1.0-dev06'

Demo

Build it

You can build and run the project using the Android Studio/Gradle. You need an android emulator or a real device to test the build.

Prerequisites

• Android Studio 4.1 Canary 1
• Gradle version 4.1.0-alpha01
• Kotlin version 1.3.61
• Android Device with USB Debugging Enabled

Built With

• Android Studio Preview - The Official IDE for Android
• Kotlin - Language used to build the application
• Gradle - Build tool for Android Studio

Thanks for reading this repo. Be sure to click ★ below to recommend this repo if you found it helpful. It means a lot to me.

For more about programming, follow me on Medium

Also, Let’s become friends on Linkedin