Jetpack Compose is like Android XML

Related tags

Jetpack Compose jetpack-compose-is-like-android-view
Overview

Jetpack Compose is like Android XML

Github Page: https://check24-profis.github.io/jetpack-compose-is-like-android-view/

Inspired by swift-is-like-kotlin

Compose Documentation: https://developer.android.com/jetpack/compose

Quick Equivalents: https://www.jetpackcompose.app/What-is-the-equivalent-of-FrameLayout-in-Jetpack-Compose

How to build

yarn
yarn build

HTML is generated from index.cirru. Read that file, and you would know what's happening.

How to apply Google Maps

For the following steps the files should already be entered to gitignore. But it doesn't hurt to double check.

  1. Put your Api key to demo/src/release/res/values/secrets.xml as a string resource.
  2. Add your keystore (add to gitignore).
  3. Add following to secrets.gradle (project scope):
ext {
   STORE_FILE = "Your keystore path"
   STORE_PASSWORD = "Your password"
   KEY_ALIAS = "Your key alias"
   KEY_PASSWORD = "Your password"
}
  1. Add google-services.json to demo.
  2. You should select the release build variant.

Articles and Documentation

Text in Compose     https://developer.android.com/jetpack/compose/text
Keyboard Handling   https://dev.to/tkuenneth/keyboard-handling-in-jetpack-compose-2593
Constraint Layout   https://howtodoandroid.com/jetpack-compose-constraintlayout/
                    https://engineering.zalando.com/posts/2021/03/flexbox-layout-behavior-in-jetpack-compose.html
                    https://www.answertopia.com/jetpack-compose/jetpack-compose-constraintlayout-examples/
App Bars            https://www.jetpackcompose.net/scaffold
Modifiers           https://developer.android.com/jetpack/compose/modifiers
Lists               https://developer.android.com/jetpack/compose/lists
StaggeredGrid       https://medium.com/mobile-app-development-publication/staggeredverticalgrid-of-android-jetpack-compose-fa565e5363e1
Nice Tutorial App   https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials
FAB                 https://compose.academy/blog/building_a_multi-action_floating_action_button_in_jetpack_compose
                    https://developer.android.com/jetpack/compose/layouts/material#fab
Radio Group         https://medium.com/nerd-for-tech/jetpack-compose-ep-8-radio-button-app-c3188d2fed5a
                    https://rrtutors.com/tutorials/How-to-create-radio-buttons-with-jetpack-compose
BottomAppBar        https://medium.com/@mumedian6/bottom-navigation-with-docked-fab-in-jetpack-compose-f1ba3cb3771b
                    https://www.android--code.com/2021/03/jetpack-compose-how-to-use-bottomappbar.html
Navigation          https://developer.android.com/jetpack/compose/navigation
                    https://proandroiddev.com/implement-bottom-bar-navigation-in-jetpack-compose-b530b1cd9ee2
Spinner             https://intensecoder.com/spinner-in-jetpack-compose-dropdown/
Card                https://www.jetpackcompose.net/jetpack-compose-card
Card Alignment      https://www.android--code.com/2021/09/jetpack-compose-card-alignment.html
Card Shapes         https://medium.com/@livinlawrence/android-material-design-cardview-shapes-3183363216b9
Chip                https://betterprogramming.pub/custom-jetpack-compose-chips-5609e742c54b
Chip Group          https://medium.com/@Rieger_san/create-a-chipgroup-with-jetpack-compose-f4744b94fa34
Toolbar             https://www.androiddevelopersolutions.com/2021/09/android-jetpack-compose-toolbar.html
Tabs                https://levelup.gitconnected.com/implement-android-tablayout-in-jetpack-compose-e61c113add79
States              https://developer.android.com/jetpack/compose/state
                    https://medium.com/@takahirom/jetpack-compose-state-guideline-494d467b6e76
StateHolder         https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects#5
Animation Spec      https://medium.com/mobile-app-development-publication/android-jetpack-compose-animation-spec-made-easy-6e7990aef203
GraphicsLayer       https://medium.com/mobile-app-development-publication/have-fun-with-jetpack-compose-graphicslayer-modifier-e39c12a4791f
Alert Dialog        https://foso.github.io/Jetpack-Compose-Playground/material/alertdialog/
Side-Effects        https://developer.android.com/jetpack/compose/side-effects

Cheat Sheet         https://victorbrandalise.com/roadmap-for-jetpack-compose/

License

Copyright 2022 CHECK24 Profis

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
You might also like...
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

BHAVNA THACKER 3 Dec 31, 2022
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

omar 1 Aug 11, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
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
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022
Cdalf - Compose Desktop Android-like Framework

Compose Desktop Android-like Framework Simple framework/library designed to make

Kamil Bąk 0 Feb 1, 2022
ComposeChips - A gmail like chip edit text for compose ui

ComposeChips A gmail like chip edit text for compose ui Installation implementat

null 2 Feb 5, 2022
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

Odhiambo Brandy 10 Nov 23, 2022
Comments
  • made spinner more reusable.

    made spinner more reusable.

    I know that stateful composables are not preferred. Nevertheless I think when using the spinner, it's more convenient, if you don't have to care about the expanding and remembering of the selected word. I just don't see a sensible reason why one would want to manage the state in the parent in this case. It just brings in 90% of the cases boilerplate code to the parent. Nevertheless, I am happy to be convinced otherwise.

    opened by Justus-Saringer 0
Owner
CHECK24 Profis
CHECK24 Profis
GitHub https://check24-profis.github.io/jetpack-compose-is-like-android-view/
A library that enables reuse of Material themes defined in XML for theming in Jetpack Compose.

MDC-Android Compose Theme Adapter A library that enables reuse of Material Components for Android XML themes for theming in Jetpack Compose. The basis

Material Components 409 Dec 24, 2022
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
Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle events. ViewModel, UI and Screenshot tests included :)

AndroidMVIExample Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle e

Patryk Kosieradzki 55 Nov 18, 2022
FullMangement - an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries, and MVVM design pattern.

Full Management is an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries and MVVM design pattern.

Amr algnyat 4 Nov 1, 2022
🔥 Yet another Tinder like swipeable cards, built for Jetpack Compose

twyper Yet another Tinder like swipeable card library, built for Jetpack Compose ✨ Demo Screen.Recording.2022-02-20.at.10.46.59.PM.mov ⌨️ Usage 1. Add

theapache64 88 Dec 24, 2022
A Coordinator Layout-like component in Jetpack Compose.

CollapsingToolbarInCompose Branches master: Initial code. column_version: Resulting code using a Column. ?? lazycolumn_version: Resulting code using a

Glenn 38 Dec 9, 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
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.

MindOrks 382 Jan 5, 2023
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
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