This repo is to demonstrate the jetpack compose 's canvas api's usage and creating an icon pack using the basic functions.

Overview

Jetpack Compose Canvas API Demo App

We all know that Jetpack Compose has now reached the 1.0.0 release milestone. This is a huge change we can say for the future of Android applications. Jetpack compose is reactive way of developing UI's and more easy to develop a full fledge application or prototype something. I was following the updates to Compose UI from some time and this time decided to do something with the Canvas. I can say I was never this much close to the Native Canvas Api's of the Android which i feel today after doing some experiments with it. I feel happy what i have achieved till now with it and excited to show you all. There is lot more to explore but this is what i have for now to share with you all.

πŸ“± Screenshots

Black White

πŸ–₯️ Tech

πŸ‘©β€πŸ’» How to install and Requirements

  • Download the Project
  • Open in Android Studio Arctic Fox 2020.3.1 or above for working with jetpack compose 1.0.0 version.
  • Run in Android emulator or Device from Android Studio

βœ”οΈ Code Sample Section

This much code creates an Instagram Icon, it's cool right πŸ˜ƒ

@Composable
fun instagramIcon() {
    val instaColors = listOf(Color.Yellow, Color.Red, Color.Magenta)
    Canvas(
        modifier = Modifier
            .size(100.dp)
            .padding(16.dp)
    ) {
        drawRoundRect(
            brush = Brush.linearGradient(colors = instaColors),
            cornerRadius = CornerRadius(60f, 60f),
            style = Stroke(width = 15f, cap = StrokeCap.Round)
        )
        drawCircle(
            brush = Brush.linearGradient(colors = instaColors),
            radius = 45f,
            style = Stroke(width = 15f, cap = StrokeCap.Round)
        )
        drawCircle(
            brush = Brush.linearGradient(colors = instaColors),
            radius = 13f,
            center = Offset(this.size.width * .80f, this.size.height * 0.20f),
        )
    }
}

This code creates a youtube icon πŸ”₯ .

@Composable
fun getYoutubeIcon() {
    Canvas(
        modifier = Modifier
            .size(100.dp)
            .padding(16.dp)
    ) {

        val path = Path().apply {
            moveTo(size.width * .43f, size.height * .38f)
            lineTo(size.width * .72f, size.height * .55f)
            lineTo(size.width * .43f, size.height * .73f)
            close()
        }
        drawRoundRect(
            color = Color.Red,
            cornerRadius = CornerRadius(40f, 40f),
            size = Size(size.width, size.height * .70f),
            topLeft = Offset(size.width.times(.0f), size.height.times(.20f))
        )
        drawPath(color = Color.White, path = path)
    }
}    

There are much more in the code, all are simple enough to follow and create. This shows how easy the new Jetpack compose Canvas api's are to follow and play around.

πŸ’ Feel Free to Reach for :

  • Suggestions
  • Code Improvements
  • Issues

🀝 Let's get Social

πŸ™ Credits

You might also like...
Mocking with Jetpack Compose - stubbing and verification of Composable functions

Mockposable A companion to mocking libraries that enables stubbing and verification of functions annotated with @androidx.compose.runtime.Composable.

Sample of usage VisualFSM for Android application - Kotlin Coroutines, Jetpack Compose
Sample of usage VisualFSM for Android application - Kotlin Coroutines, Jetpack Compose

Sample of usage VisualFSM for Android application - Kotlin Coroutines, Jetpack Compose ENG | RUS VisualFSM is a Kotlin library that implements an MVI

This repo contains components built with Jetpack Compose for the Microsoft Surface Duo.

Surface Duo Jetpack Compose SDK This repo contains components built with Jetpack Compose for the Microsoft Surface Duo and other large screen and fold

Sample repo that demonstrates various options for testing Jetpack Compose applications.

Composing With Confidence This is the sample repository for the Composing With Confidence presentation from Droidcon NYC in 2022. If you run the sampl

ToDo-Task-App - An Android App built to demonstrate the use of Jetpack Compose, Material You, Room Database, and MVVM

ToDo Task App ToDo Task App is a sample Android app built with Jetpack Compose.

A sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Retrofit, Moshi, Leak Canary and Repository pattern

Jetpack-Compose-Boilerplate This repository contains a sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Re

πŸ”– A Quotes Application built to Demonstrate the Jetpack Compose UI
πŸ”– A Quotes Application built to Demonstrate the Jetpack Compose UI

πŸ”– A Quotes Application built to Demonstrate the Jetpack Compose UI

A simple path finding visualizer mobile app to demonstrate the use of Jetpack Compose UI toolkit in Android.
A simple path finding visualizer mobile app to demonstrate the use of Jetpack Compose UI toolkit in Android.

Path Finding Visualizer App using Jetpack Compose A simple path finding visualizer mobile app to demonstrate the use of Jetpack Compose UI toolkit in

Simple superhero lexicon app to demonstrate Jetpack Compose.
Simple superhero lexicon app to demonstrate Jetpack Compose.

Superhero Lexicon πŸ¦Ήβ€β™‚οΈ Simple and Pretty Superhero App developed using Jetpack Compose UI Technologies Used πŸ›  Kotlin - First class and official prog

Owner
vikas kumar
Android Developer | Blogger | Design enthusiast
vikas kumar
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop πŸš€, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Shivaraj M Patil 1 Apr 13, 2022
Welcome Fruit Ninja πŸ₯ on Jetpack Compose Desktop πŸš€, using Canvas API 🎨

Compose-Fruit-Ninja ?? Welcome Fruit Ninja on Jetpack Compose Desktop ?? , using Canvas API ?? Featured on jetc-dev How to Run From gradle tab from ri

Chetan Gupta 54 Nov 2, 2022
Alien invasion πŸ‘Ύ gane is back! this time specially on Jetpack Compose Desktop πŸš€, using Canvas API 🎨

Compose Space-Invaders ?? Alien invasion ?? is back! this time specially on Jetpack Compose Desktop ?? , using Canvas API ?? Featured on Compose Diges

Chetan Gupta 58 Aug 6, 2022
Exercising Compose for Desktop and Compose for Web (Canvas)

Compose Counting Grid A simple application to check Compose for Desktop and Compose for Web (Canvas) drawing speeds when drawing grids (or tables) wit

null 6 Nov 11, 2022
Scrobble is a wip music tracking and browsing app. It uses the Lastf.fm and spotify APIs to deliver data. The whole UI is created using Jetpack compose.

Scrobble (WIP, name not final) Scrobble is a wip music tracking and browsing app. It uses the Lastf.fm API to realize music tracking and browsing and

Niklas Schnettler 55 Oct 31, 2022
πŸš€πŸžπŸ’ͺ 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
PapriCoin demonstrates Jetpack Compose usage to build modern app based on Clean Architecture and newest Tech-Stack

PapriCoin demonstrates Jetpack Compose usage to build modern app based on Clean Architecture and newest Tech-Stack. Repository also has loca

Malik Mukhametzyanov 15 Nov 9, 2022
Holi is a lightweight Jetpack Compose library of colors, gradients and cool utility functions for all your palette needs!

Holi A library of colors, gradients and utils built using Jetpack Compose for Android Features A wide collection of colors from different palettes for

Siddhesh Patil 167 Dec 5, 2022
Holi is a lightweight Jetpack Compose library of colors, gradients and cool utility functions for all your palette needs!

Holi is a lightweight Jetpack Compose library of colors, gradients and cool utility functions for all your palette needs!

Sid Patil 167 Dec 5, 2022