A hackathon project for a UI sketch designer made in Compose

Overview

compose-drag-n-design

A hackathon project for a UI sketch designer made in Compose.

This is a project to get more familiarized with Jetpack Compose.

It explores how to:

  • implement a reusable drag-n-drop.
  • create a UI based on a dynamic specification.

Drag and drop

The drag and drop feature was tested first in the DragAndDropScreen.kt. You can switch MainActivity to call that instead of the BuildScreen.kt.

UI builder

  • Still some changes are needed to separate better the model+events from the UI.
  • Several approaches were tried.
  • One particularity of the approach I finally use (a change in an element changes all its parents) forces the whole UI to recompose which is a desired effect as containers depend on their children for layout.
  • Said in other way: performance is not an issue/concern in this very particular case.
  • Also: don't take this code as gold-standard. I'm not (yet!) a Compose expert and some good practices might been missing.
You might also like...
android multi-fab that made with jetpack-compose
android multi-fab that made with jetpack-compose

ComposeMultiFab android multi-fab that made with jetpack-compose Download implementation "io.github.jisungbin:multifab:${version}" Usage @Composable f

New style for app design and Movies App with Movies API JetMaxMovies made in Jetpack Compose.πŸ˜‰πŸ˜Ž
New style for app design and Movies App with Movies API JetMaxMovies made in Jetpack Compose.πŸ˜‰πŸ˜Ž

JetMaxMovie New style for app design and Movies App with Movies API JetMaxMovies made in Jetpack Compose. πŸ˜‰ 😎 (Navigation Compose,Dagger-Hilt, Mater

πŸ’» A cross-platform desktop application to identify libraries used inside an android application. Made possible by Compose Desktop ⚑
πŸ’» A cross-platform desktop application to identify libraries used inside an android application. Made possible by Compose Desktop ⚑

πŸš€ stackzy A desktop app to analyse APK. Built using Compose desktop ✨ Demo Watch demo πŸ“½οΈ Usage Show usage πŸ’» Install Platform Download Status Linux

Simple implementation of a login made with jetpack compose and verifying its authentication through a REST API using retrofit
Simple implementation of a login made with jetpack compose and verifying its authentication through a REST API using retrofit

Simple Login/Auth + Jetpack Compose + Retrofit Demo πŸ“± Json Object Request πŸ“‘ Re

JetStrap - Ready-Made Jetpack Compose Components

JetStrap Ready-Made Jetpack Compose Components Installation implementation "com.

🏞 Wallpaper app made with Jetpack Compose
🏞 Wallpaper app made with Jetpack Compose

WallUp β›° Wallpaper finder and downloader app Demonstrate the Jetpack Compose UI using Unsplash API Made with ❀️ by Enes UI Design 🎨 Thanks to Rian Ha

Faradle - Wordle made in Jetpack Compose
Faradle - Wordle made in Jetpack Compose

Faradle The famous Wordle game created with Jetpack Compose The logic is fully u

WordleSolver - Wordle solving application made with Compose
WordleSolver - Wordle solving application made with Compose

WordleSolver Wordle solving application made with Compose for Desktop. Screensho

Android App made by Jetpack Compose Components with Kotlin, MVVM Pattern, Multi Module, Navigation, Hilt, Coroutines, Retrofit and cached data by Room
Android App made by Jetpack Compose Components with Kotlin, MVVM Pattern, Multi Module, Navigation, Hilt, Coroutines, Retrofit and cached data by Room

Android App made by Jetpack Compose Components with Kotlin, MVVM Pattern, Multi Module, Navigation, Hilt, Coroutines, Retrofit and cached data by Room

Owner
Helios
Helios
Compose Curved-Scroll is an Android Jetpack Compose library made with ❀️

Compose-Curved-Scroll-library Compose Curved-Scroll is an Android Jetpack Compos

mohamed tamer 23 Aug 24, 2022
A diary app made by Jetpack Compose

Chinese ?? ComposeDiary A simple diary app build by Jetpack Compose, use navigation library for single activity implementation Tech Stack & Features P

RERERE 4 Jun 7, 2022
Lull is an Android mobile application made with Jetpack Compose, where you can download wallpapers.

Lull Lull is an Android mobile application made with Jetpack Compose, where you can download wallpapers. Table of Contents Features Screenshots Light

Simge Şengün 12 Oct 10, 2022
Resume of Louis CAD, made with Jetpack Compose. Supports the Web, Desktop, and Android.

ResumeComposition What This project is the source code of the resume/CV of Louis CAD. The latest PDF export is available here, it is ready to print. H

Louis CAD 22 Aug 14, 2022
Online Furniture Shop App UI made in Jetpack Compose.

JetComposeFurnitureShopUI-Android Online Furniture Shop App UI made in Jetpack Compose with clean architecture... ?? ?? (Navigation Components, Dagger

Arvind Meshram 30 Dec 19, 2022
An app showing all details for various Lenovo Thinkpad models. Made to try out Jepack Compose for Android.

ThinkRchive An app showing all details for various Lenovo Thinkpad models. Made to try out Jepack Compose for Android. WORK IN PROGRESS GOALS: Use Ret

Racka98 81 Dec 16, 2022
New style for app design Online Flora Go Go App UI made in Jetpack Compose. πŸ˜‰ 😎

JetComposeLoginUI New style for app design Online Flora Go Go App UI made in Jetpack Compose. ?? ?? (Navigation Components, Dagger-Hilt, Material Comp

Arvind Meshram 95 Dec 22, 2022
Simple application made using Compose Multiplatform, SQLDelight, Decompose.

Notes Simple application made using Compose Multiplatform, SQLDelight and Decompose. Screenshots: Video: TODO There is plans for adding next stuff: Te

Vadim Yaroschuk 20 Dec 23, 2022
android Sticky-TimeLineView that made with jetpack-compose

ComposeTimeLineView android Sticky-TimeLineView that made with jetpack-compose. Download implementation "io.github.jisungbin:timelineview:${version}"

Ji Sungbin 23 Dec 3, 2022
New style for app design E-commerce Shop App UI made in Jetpack Compose.πŸ˜‰πŸ˜Ž

E-commerceShopAppUI-Android New style for app design E-commerce Shop App UI made in Jetpack Compose. ?? ?? (Navigation Components, Dagger-Hilt, Materi

Arvind Meshram 30 Jan 8, 2023