A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential

Overview

ComposeCookBook

Declarative UI
A Collection of all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential.

Jetpack Compose

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Jetpack compose for Desktop:

Compose Spotify Desktop

FontAwesomeIcons in Compose:

FontAwesome Icon Library

Screens

List & Layouts Widgets and building blocks Animations Theme

Demo UI

Spotify Instagram Demo Twitter, Gmail, Youtube Profile
Gmail full Tiktok

Apps with Api, Retrofit, Room, Flow, Livedata Integration

CryptoApp MVVM MovieApp MVI Dating APP DEMO UI

Advance lists and animations

Shimmer Lists List Scroll Animations

If this project helped you in any way feel free to show some love

Buy Me A Coffee

How to get started

Please get Android Studio Arctic Fox 2020.3.1 Canary 4 or above to build this project from here.

Features & Where to start

  • Widgets: Widgets Screen show case all the available components to build UI.
  • Home Screen: Start with Layouts, Modifiers and Simple Listviews
  • Demo UI: Learn how demo UI have been made by using layouts, listviews and widgets.
  • Animations: Animations are very interesting in compose. Checkout single value animations to get started.
  • UI Tests: Checkout UI tests to understand how we can test compose UI.
  • Others: After the above steps feel free to deep dive into Tablayouts, carousel, Dialogs and BottomSheets

Coming Soon

  • Some of the features that will be available in coming weeks
    • Advance lists: Pull Refresh, Swipe lsits etc
    • Clean Architecture Sample with coroutines.
    • Advance canvas drawing. Much more in pipeline stay tuned!!

Official Documentations

Contribution Info

  • All the contributions are welcomed keeping following points in mind.
    • If it's a widget/tool/UI element newly added please add to Widget Screen
    • Any feature showcase like Collapsing AppBar, BottomSheets, Dialogs etc add in HomeScreen list
    • Any Demo UI please add to Demo UI section
    • Try not to add new Icons/Images unless must be needed.
    • Please make sure whatever you add also supports dark mode as well. Thanks happy coding

Please Share & Star the repository to keep me motivated.

Comments
  • Master doesn't seem compile with Arctic Fox RC 1

    Master doesn't seem compile with Arctic Fox RC 1

    Describe the bug Master doesn't seem compile with Arctic Fox RC 1

    To Reproduce Steps to reproduce the behavior:

    I installed Arctic Fox RC 1 and attempted to compile master and I see the following error

    ..../ComposeCookBook/buildSrc/src/main/kotlin/common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Expression 'android' cannot be invoked as a function. The function 'invoke()' is not found

    FWIW I am using Android Studio default JDK, anybody else

    Screen Shot 2021-07-24 at 6 25 50 AM
    opened by snijsure 11
  • Build Failed When Trying to Run the Project

    Build Failed When Trying to Run the Project

    Describe the bug I try to get latest version of this project from version control using master branch. But when i tried to run it, it shows multiple error. I have not tried with use the latest canary.

    Android Studio Arctic Fox | 2020.3.1 Beta 4 Build #AI-203.7717.56.2031.7435690, built on June 8, 2021 Runtime version: 11.0.10+0-b96-7249189 amd64 VM: OpenJDK 64-Bit Server VM by Oracle Corporation Windows 10 10.0

    To Reproduce Steps to reproduce the behavior: Import from version control and use the master branch

    Logcat The complete log can be seen here (using stacktrace)

    Caused by: org.gradle.workers.internal.DefaultWorkerExecutor$WorkExecutionException: A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptWithoutKotlincTask$KaptExecutionWorkAction
    Caused by: java.lang.reflect.InvocationTargetException
    Caused by: java.lang.IllegalAccessError: class org.jetbrains.kotlin.kapt3.base.KaptContext (in unnamed module @0x26ef8ef9) cannot access class com.sun.tools.javac.util.Context (in module jdk.compiler) because module jdk.compiler does not export com.sun.tools.javac.util to unnamed module @0x26ef8ef9
    Caused by: org.gradle.workers.internal.DefaultWorkerExecutor$WorkExecutionException: A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptWithoutKotlincTask$KaptExecutionWorkAction
    Caused by: java.lang.reflect.InvocationTargetException
    Caused by: java.lang.IllegalAccessError: class org.jetbrains.kotlin.kapt3.base.KaptContext (in unnamed module @0x26ef8ef9) cannot access class com.sun.tools.javac.util.Context (in module jdk.compiler) because module jdk.compiler does not export com.sun.tools.javac.util to unnamed module @0x26ef8ef9
    

    Screenshots If applicable, add screenshots to help explain your problem. image

    Additional context I tried to downgrade the gradle to 7.0.0-beta04 but still havent solved the problem

    opened by wiryadev 9
  • Project have build errors

    Project have build errors

    Describe the bug While updating to beta09 I noticed somehow project is not compiling giving multiple build errors on

    Android Studio Bumblebee | 2021.1.1 Canary 2 Build #AI-211.6222.4.2111.7407564

    To Reproduce Please check branch : https://github.com/Gurupreet/ComposeCookBook/tree/update/beta09

    Screenshots If applicable, add screenshots to help explain your problem. Screenshot 2021-06-18 at 9 41 09 PM

    bug 
    opened by Gurupreet 9
  • Create a module per demo or per screen

    Create a module per demo or per screen

    Is your feature request related to a problem? Please describe. When you want to check how a demo or a component are developed, it can be hard with the current architecture.

    Describe the solution you'd like Create a module per demo or per screen

    Describe alternatives you've considered Create module only for demos.

    opened by GerardPaligot 8
  • Font Runtime Error

    Font Runtime Error

    Describe the bug The app force closed the first time it try to launch.

    To Reproduce use the latest master branch (by the time this issue created) and run it

    Screenshots image

    Additional context Here is the full log. It points out to getFontFamily function and i think it is because the Font has multiple implementation. See this screenshot:

    image

    image

    opened by wiryadev 7
  • build failed

    build failed

    with the latest Android Studio Chipmunk 2021.2.1 Canary 5

    error: e: ...common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Expression 'android' cannot be invoked as a function. The function 'invoke()' is not found

    opened by iClaude 6
  • refactor: Migrate instagram in a Gradle module.

    refactor: Migrate instagram in a Gradle module.

    Motivation

    Suggest a first implementation for multi module strategy for demo apps.

    Changelog

    • Create :data module for fake data provider.
    • Create :theme module for all compose template resources.
    • Create :demos:instagram module for instagram demo app.

    Issue #61

    opened by GerardPaligot 5
  • Migrate spotify, twitter and youtube demoapps

    Migrate spotify, twitter and youtube demoapps

    Changelog

    • Create :components:verticalgrid component
    • Create :components:colorpicker component
    • Create :components:fab component
    • Create :demos:spotify, :demos:twitter, :demos:youtube, :demos:gmail and :demos:paint demo apps in a module
    • Create an activity for Instagram demo app.
    opened by GerardPaligot 4
  • App crashes when opening Widgets screen

    App crashes when opening Widgets screen

    I just compiled the project and observed that the app crashes when I open Widgets screen. Its this exception thrown.

    --------- beginning of crash
    2020-10-06 00:57:00.480 7398-7398/com.guru.composecookbook E/AndroidRuntime: FATAL EXCEPTION: main
        Process: com.guru.composecookbook, PID: 7398
        java.lang.IllegalStateException: Surface can have only one direct measurable child!
            at androidx.compose.material.SurfaceKt$SurfaceLayout$1$1.invoke(Surface.kt:131)
            at androidx.compose.material.SurfaceKt$SurfaceLayout$1$1.invoke(Unknown Source:13)
            at androidx.compose.ui.LayoutKt$MeasuringIntrinsicsMeasureBlocks$1.measure-2MWCACw(Layout.kt:385)
            at androidx.compose.ui.node.InnerPlaceable.performMeasure-BRTryo0(InnerPlaceable.kt:48)
            at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
            at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.performMeasure-BRTryo0(DelegatingLayoutNodeWrapper.kt:104)
            at androidx.compose.ui.node.LayerWrapper.performMeasure-BRTryo0(LayerWrapper.kt:67)
            at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
            at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.performMeasure-BRTryo0(DelegatingLayoutNodeWrapper.kt:104)
            at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
            at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.performMeasure-BRTryo0(DelegatingLayoutNodeWrapper.kt:104)
            at androidx.compose.ui.node.LayerWrapper.performMeasure-BRTryo0(LayerWrapper.kt:67)
            at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
            at androidx.compose.foundation.layout.FillModifier.measure-3Jkh9V0(LayoutSize.kt:464)
            at androidx.compose.ui.node.ModifiedLayoutNode.performMeasure-BRTryo0(ModifiedLayoutNode.kt:36)
            at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
            at androidx.compose.foundation.layout.PaddingModifier.measure-3Jkh9V0(LayoutPadding.kt:169)
            at androidx.compose.ui.node.ModifiedLayoutNode.performMeasure-BRTryo0(ModifiedLayoutNode.kt:36)
            at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
            at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(OuterMeasurablePlaceable.kt:90)
            at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(Unknown Source:0)
            at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:133)
            at androidx.compose.ui.platform.AndroidComposeView.observeMeasureModelReads(AndroidComposeView.kt:430)
            at androidx.compose.ui.node.OuterMeasurablePlaceable.remeasure-BRTryo0(OuterMeasurablePlaceable.kt:89)
            at androidx.compose.ui.node.OuterMeasurablePlaceable.measure-BRTryo0(OuterMeasurablePlaceable.kt:62)
            at androidx.compose.ui.node.LayoutNode.measure-BRTryo0(LayoutNode.kt:1173)
            at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(RowColumnImpl.kt:88)
            at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(Unknown Source:13)
            at androidx.compose.ui.LayoutKt$measureBlocksOf$1.measure-2MWCACw(Layout.kt:147)
            at androidx.compose.ui.node.InnerPlaceable.performMeasure-BRTryo0(InnerPlaceable.kt:48)
            at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
            at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(OuterMeasurablePlaceable.kt:90)
            at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(Unknown Source:0)
            at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:133)
            at androidx.compose.ui.platform.AndroidComposeView.observeMeasureModelReads(AndroidComposeView.kt:430)
            at androidx.compose.ui.node.OuterMeasurablePlaceable.remeasure-BRTryo0(OuterMeasurablePlaceable.kt:89)
            at androidx.compose.ui.node.OuterMeasurablePlaceable.measure-BRTryo0(OuterMeasurablePlaceable.kt:62)
            at androidx.compose.ui.node.LayoutNode.measure-BRTryo0(LayoutNode.kt:1173)
            at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(RowColumnImpl.kt:88)
            at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(Unknown Source:13)
    
    opened by wajahatkarim3 4
  • Android studio fail to load project

    Android studio fail to load project

    Describe the bug Latest version of Android studio fails to load project on master.

    Note that manually building the project with gradle works.

    To Reproduce Steps to reproduce the behavior:

    1. Get the latest version of android studio
    2. Open project
    3. Load gradle

    Expected behavior Project should load but it throws an error:

    This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2021.1.1 or newer.
    
    * Try:
    > Run with --info or --debug option to get more log output.
    > Run with --scan to get full insights.
    
    * Exception is:
    com.intellij.openapi.externalSystem.model.ExternalSystemException: This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2021.1.1 or newer.
    	at org.jetbrains.plugins.gradle.model.ProjectImportAction.addBuildModels(ProjectImportAction.java:258)
    	at org.jetbrains.plugins.gradle.model.ProjectImportAction.execute(ProjectImportAction.java:116)
    

    Screenshots image

    Desktop (please complete the following information):

    • OS: MacOS Monterey
    • Version 12.0.1

    Additional context

    Android Studio info:

    Android Studio Arctic Fox | 2020.3.1 Patch 3
    Build #AI-203.7717.56.2031.7784292, built on October 1, 2021
    Runtime version: 11.0.10+0-b96-7281165 x86_64
    VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
    macOS 12.0.1
    GC: G1 Young Generation, G1 Old Generation
    Memory: 2048M
    Cores: 8
    Registry: external.system.auto.import.disabled=true
    Non-Bundled Plugins: org.jetbrains.kotlin, com.jetbrains.space, com.squareup.sqldelight, org.intellij.plugins.markdown
    
    opened by mihai1voicescu 3
  • Youtube demo ui layout may be broken

    Youtube demo ui layout may be broken

    Describe the bug The YoutubeLIstItem may be not looks as it supposed to be. Im not sure if it is intended or not, but it looks different from the readme gif. The vertical chain is stacked on top of image instead of constrained below it. (Look attached screenshot)

    To Reproduce Steps to reproduce the behavior: Go to youtube demo ui screen

    Screenshots If applicable, add screenshots to help explain your problem. Screenshot_1626523675

    opened by wiryadev 3
  • build failed

    build failed

    common-compose-module-configs-script-plugin.gradle.kts文件报错 AGP : 7.1.0-alpha12 Gradle : 7.2 gradle plugin : 1.5.21 下面的代码报错: android { compileSdk = ProjectConfigs.compileSdkVersion

    defaultConfig {
        minSdk = ProjectConfigs.minSdkVersion
        targetSdk = ProjectConfigs.targetSdkVersion
    }
    
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
        freeCompilerArgs = freeCompilerArgs + "-Xopt-in=kotlin.RequiresOptIn"
    }
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = ProjectConfigs.kotlinCompilerExtensionVersion
    }
    

    } 类似于#112

    opened by 2314372037 3
  • cannot build the source file

    cannot build the source file

    When I download, open this project and run, I got this error. AGP : 7.0.0 Gradle : 7.0 gradle plugin : 1.5.21

    I think this is a problem of dsl, but don't know what to do.

    e: /Users/user/Desktop/ComposeCookBook-master/buildSrc/src/main/kotlin/common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Expression 'android' cannot be invoked as a function. The function 'invoke()' is not found e: /Users/user/Desktop/ComposeCookBook-master/buildSrc/src/main/kotlin/common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Unresolved reference. None of the following candidates is applicable because of receiver type mismatch: internal val ComPluginGroup.android: ComAndroidPluginGroup defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt internal val OrgJetbrainsKotlinPlatformPluginGroup.android: PluginDependencySpec defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt internal val OrgJetbrainsKotlinPluginGroup.android: PluginDependencySpec defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt internal val PluginDependenciesSpec.android: PluginDependencySpec defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt

    opened by changgyu-brandi 9
Releases(1.0.2)
Owner
Gurupreet Singh
Android developer
Gurupreet Singh
a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

Bernat Borrás Paronella 178 Jan 4, 2023
This library will make it easier to pass arguments between screens in Jetpack Compose.

Compose Navigation This library will make it easier to pass arguments between screens in Jetpack Compose Setup allprojects { repositories { ...

Nguyen Van Tan 1 Oct 30, 2021
Explode compose elements on click! Just add explodeOnClick() modifier!

compose-explode Explode compose elements on click! Just add explodeOnClick() modifier! Inspired from ExplosionField Getting started Go to library/expl

Nikhil Chaudhari 33 Jan 8, 2023
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Smart Tool Factory 20 Dec 13, 2022
A Weather Mobile or Android Native App, in Kotlin built to see the current weather of suggested countries of Europe and in my current position. In this case, Maputo/Mozambique #WitChallenge #Asked #Option1

Witweather_android This is a challenge assigned by Wit, which aimed to build an Android App to visualize the temperature in my current location, in th

Kelton M. Cumbe 1 Nov 22, 2021
Luis David Orellana 11 Jan 1, 2023
🚀🏞💪 Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area

Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area, before/after image to with handle to show partial of both images and more is cooking up

Smart Tool Factory 207 Dec 26, 2022
🎺 Orchestra is a collection of Android custom view compatible libraries for Jetpack Compose.

Orchestra ?? Jetpack Compose compatible libraries using Balloon, ColorPickerView, PowerSpinner. Balloon Add below codes to your root build.gradle file

Jaewoong Eum 408 Jan 4, 2023
A Collection of major Jetpack compose UI components which are commonly used.🎉🔝👌

SSComposeCookBook A Collection of major Jetpack compose UI components which are commonly used. Introduction Jetpack Compose is a modern toolkit for bu

Simform Solutions 370 Dec 28, 2022
ComposeAnimations - Collection of nice animations created with Jetpack Compose

CertificateStack.kt CardStackDemo.mp4 SwipeButton.kt SwipeButton.mp4

Anton Shilov 276 Dec 24, 2022
Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.

Pokedex Compose Pokedex Compose is an independent re-write of a similar project by the name of Pokedex. I am recreating the UI but I am doing it using

Jose Patino 4 May 1, 2022
🎞 A demo movie app using Jetpack Compose and Hilt based on modern Android tech stacks.

MovieCompose is a small demo application based on modern Android tech-stacks especially focus on Jetpack Compose UI using The Movie DB API.

Jaewoong Eum 399 Jan 3, 2023
Simple Jetpack Compose demo app which is developed with CoinGecko API and modern android technologies.

CoinBox CoinBox is a multi module small currency tracker app which is developed with Jetpack Compose. This demo app used coingecko.com API to fetch da

Enes Zor 13 Apr 8, 2022
A demo app using Jetpack Compose and Hilt based on modern Android tech stacks

Rick & Morty APP RickAndMorty is a small demo application based on modern Androi

null 2 Dec 24, 2021
A Slack demo app for desktop using Jetpack Compose UI toolkit

ComposeSlackDesktop A Slack demo app for desktop using Jetpack Compose UI toolkit Demo Jetpack Compose Jetpack Compose is Android’s modern toolkit (no

Vipul Asri 252 Dec 31, 2022
Spotify Demo Desktop app using Jetpack compose

Compose Spotify Desktop Declarative UI A Spotify demo app for desktop using Jetpack Compose UI toolkit Demo Home Search & Detail Jetpack Compose Jetpa

Gurupreet Singh 619 Dec 31, 2022