Explode compose elements on click! Just add explodeOnClick() modifier!

Overview

compose-explode

Explode compose elements on click! Just add explodeOnClick() modifier!

click-me-converted

Inspired from ExplosionField

Getting started

  1. Go to library/explodeOnClick.kt
  2. Copy paste the explodeOnClick.kt file in your compose project.
  3. That's it

p.s. I'm too lazy to release this on maven. Please bear with me I'll do it soon.

Usage

Just add explodeOnClick() modifier on your composable element.

  Text(
    text = "Click me to explode!",
    // Just add this modifier 
    modifier = Modifier.explodeOnClick()
   )

onClick lambda

Lambda will be called when user clicks the element. You can pass onClick if you want to perform any action on click.

Modifier.explodeOnClick(color = backColor,
          onClick = {
              Toast
                  .makeText(context, "Toast message", Toast.LENGTH_LONG)
                  .show()
          })

durationMillis

Set the duration of animation, default is 1 sec.

modifier = Modifier.explodeOnClick(durationMillis=1500)

easing

Set easing for the animation, default is LinearEasing.

modifier = Modifier.explodeOnClick(easing=LinearEasing)

Color

Set the color of the animation/particles, default is Color.Black.

modifier = Modifier.explodeOnClick(color = Color.GREEN)

repeatable

Set if you want to make the animation repeatable again after click.

modifier = Modifier.explodeOnClick(repeatable = true)

Which looks like this ..

kaboom-converted

Contribution

Please contribute if you feel there's something missing or anything you feel right. Just raise a PR, I would be happy to accept.

License

Licensed under Apache License, Version 2.0 here

You might also like...
Jetpack Compose Boids | Flocking Insect ๐Ÿœ. bird or Fish simulation using Jetpack Compose Desktop ๐Ÿš€, using Canvas API ๐ŸŽจ
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

A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!
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!

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Androidโ€™s modern toolkit for building native UI.
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Androidโ€™s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Androidโ€™s modern toolkit for building native UI.

A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

K5-compose is a sketchy port of p5.js for Jetpack Compose
K5-compose is a sketchy port of p5.js for Jetpack Compose

k5-compose k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop. This library provides you a playground to play with your sketches so you

Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.
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

This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

Owner
Nikhil Chaudhari
programming and percussions !!
Nikhil Chaudhari
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
A Jetpack Compose Modifier that enables Tinder-like card gestures.

Compose Tinder Card A Jetpack Compose Modifier that enables Tinder-like card gestures. Demo Click the play button to see the Modifier.swipeableCard()

Alex Styl 93 Dec 28, 2022
A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential

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

Gurupreet Singh 4.9k Dec 31, 2022
๐Ÿ”ฆ Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements

Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements. With minimal configuration it generates a UI browser that helps you easily find your components, colors & typography. It also renders your components in common situations like dark mode, right-to-left layouts, and scaled fonts which help in finding issues early.

Airbnb 1.7k Jan 2, 2023
Just few experiments with Jetpack Compose

Jetpack_Compose_Demo Just few fun experiments with Jetpack Compose. Note : This is not a serious app. ?? Tutorial (By Philipp Lackner ) : https://yout

Vibhu 0 Feb 12, 2022
Fast android task that finished in only 3 hours, it gets the information from national number without database. I just wanna refine my skills in android basics so I try to make this simple project.

RaqmQawmy it is a fast android task that finished in only 3 hours, it gets the information from national number without database. I just wanna refine

Mahmoud Abdelazim 3 May 15, 2022
Add Cloud Firestore to your Android apps built with Jetpack Compose

JetFirestore Add Cloud Firestore to your Android apps built with Jetpack Compose Now with Jetpack Compose you can easily add Cloud Firestore to your e

Pankaj Rai 13 Oct 26, 2022
Add chips to your apps built with Jetpack Compose!

Chip Add chips to your apps built with Jetpack Compose! To get started with Chip just add the maven url and the Chip dependency build.gradle (Project

Pankaj Rai 6 Sep 27, 2022
JetCam - Add camera capability to app built with Jetpack Compose

JetCam Add camera capability to your app with just a single method - JetCam To g

Pankaj Rai 6 Jul 8, 2022
Add IndustrialTNT like from old IC2 mod which keeps items after explosion and helps to mine resources

IndustrialTNT Add IndustrialTNT like from old IC2 mod which keeps items after ex

null 0 Jan 9, 2022