Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DevFest Uyo—Jetpack compose: Game changer for b...
Search
Love
November 13, 2021
Programming
0
150
DevFest Uyo—Jetpack compose: Game changer for building Modern Android UI
Love
November 13, 2021
Tweet
Share
More Decks by Love
See All by Love
Introduction to Kotlin Multiplatform: Write Once, Run Everywhere
lamouresparus
0
240
Override Kotlin Property Getters and Setters
lamouresparus
0
65
Get started with the Gemini API in Android apps (client SDK)
lamouresparus
1
240
Code Surgery: Refactoring for a Healthy App
lamouresparus
0
23
Information gathering
lamouresparus
0
45
Code Surgery: Refactoring for a Healthy App
lamouresparus
0
64
Managing Technical Writing Projects
lamouresparus
0
90
DEVFEST BANJUL 2023: "Relay: The Future of Design to Code Workflows"
lamouresparus
0
140
WTM Aba Breakfast: Tech Career: Reaching Goals and Gaining Experiences
lamouresparus
0
57
Other Decks in Programming
See All in Programming
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
270
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.3k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
130
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Tale of Four Properties
chriscoyier
160
23k
Automating Front-end Workflow
addyosmani
1370
200k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Language of Interfaces
destraynor
158
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Transcript
Jetpack Compose: Game changer for building Modern Android UI Love
Sparus O’tudor Android Engineer, FrontendLabs Uyo
What is Jetpack Compose? Holla Jetty Packy😊
Jetpack Compose is a modern declarative UI Toolkit to simplify
and accelerate native Android UI development.
What ever happened to our famous XML?🤔
Different Languages 30+ thousands lines of code Cognitive Overhead Multiple
Files Deprecated Code Boilerplate Codes Multiple layers of inheritance Problems with the Traditional View System
UI logic and definition are completely Separate Uses XML Satic
Layout Definition Kotlin/Java Dynamic Logic & Behaviour Completely Separate Generates a lot of boilerplate codes
A Quick Look at Jetpack Compose
Jetpack Compose favours Composition over Inheritance is a Human has
a Composition Inheritance
Declarative UI Focus on the “WHAT” and not the “HOW”
Jetpack Compose is a function of State Anytime the “state“
changes the “compose UI” changes also.
@Preview @Composable setContent{} Compose Preview Material Theme
Composable Functions • Annotated with @Composable • @Composable informs the
compiler that the function is intended to convert data into UI. • Can accept parameters • Returns nothing
Composable Functions
“Composable functions can only be called in the context of
another compose function...”
setContent{} • The setContent block defines the activity's layout where
we call composable functions. • The content becomes the root view of the activity. • More like setContentView() in XML.
setContent{}
Material Theme • An implementation of Material Design. • Define
the applications theme with its respective colors, shapes, font, etc. • Can be customized. • Mostly the root element of the screen.
Material Theme
Modifier • An ordered, immutable collection of modifier elements that
decorate or add behavior to Compose UI elements. • Modifiers can be chained. • Their chaining order is important.
Modifier
Layouts Column Row Box Constraint Layout
Column
Row
Box
Say Goodbye to RecyclerView Welcome LazyRow and LazyColumn 🤩
Managing Lists In Compose • Compose makes it easy to
create lists. • These composables render only the elements that are visible on screen.
LazyRow A LazyRow is a horizontally scrolling list that only
composes and lays out the currently visible items.
LazyColumn A LazyColumn is a vertically scrolling list.
LazyVerticalGrid • A LazyColumn is a vertically scrolling grid. •
It accepts the number of grid items in one row or the minimum width of one item. • Unstable API.
LazyVerticalGrid
More Components • Button • Image • Icons, etc.
Ready to take a deep dive?
Additional Resources • Jetpack Compose Tutorial on developer.android • Jetpack
Compose basics Codelab • Under the hood of Jetpack Compose • Get started with Jetpack Compose • Jetpack Compose basics | Workshop
Questions?
Thank You!