[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7363":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},7363,"Learn-Jetpack-Compose-By-Example","vinaygaba\u002FLearn-Jetpack-Compose-By-Example","vinaygaba","🚀 This project contains various examples that show how you would do things the \"Jetpack Compose\" way","https:\u002F\u002Fjetpackcompose.app\u002F",null,"Kotlin",3451,375,61,11,0,5,29.73,"Apache License 2.0",false,"master",true,[24,25,26,27,28,29,30,31,32,33],"android","android-ui","compose","declarative-ui","jetpack","jetpack-compose","kotlin","kotlin-android","sample-app","ui-toolkit","2026-06-12 02:01:38","# Learn Jetpack Compose By Example \n![Android CI](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fworkflows\u002FAndroid%20CI\u002Fbadge.svg) ![Compose Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCompose-1.0.1-brightgreen) ![Android Weekly](https:\u002F\u002Fandroidweekly.net\u002Fissues\u002Fissue-414\u002Fbadge)\n\n![Feature Image](screenshots\u002Fjetpack_compose_poster.png)\n\nOver the course of the last few years Android development has gone\nthrough significant changes in how we structure our apps, the language\nwe use for development, the tooling & libraries that help us speed up\nour development and the improvements in testing our apps. What had not\nchanged in all these years is the Android UI toolkit. This changes with\nJetpack Compose that aims to re-imagine what Android UI development\nwould look like using declarative programming principles. It is heavily\ninfluenced by existing web and mobile frameworks such as React, Litho,\nVue & Flutter and would be a paradigm shift in Android UI development as\nwe know it.\n\nThis repository aims to show the Jetpack Compose way of building common\nAndroid UI that we are accustomed to building.\n\nSupporters\n-----\n\nSpecial thanks to the following companies for supporting my work 🙏🏻\n\n\u003Cp align = \"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.runway.team\u002F?utm_source=jetpack&utm_medium=newsletter&utm_campaign=may-2-25\" target=\"__blank\">\n    \u003Cb>Runway\u003C\u002Fb>\n  \u003C\u002Fa> \u003Cbr\u002F>\u003Cbr\u002F>\n  \u003Ca href=\"https:\u002F\u002Fwww.runway.team\u002F?utm_source=jetpack&utm_medium=newsletter&utm_campaign=may-2-25\" target=\"__blank\">\n    \u003Cimg src=\"screenshots\u002Frunway_latest_logo.png\" width=350 \u002F>\n  \u003C\u002Fa>\n  \u003Cp align=\"center\">\u003Cb>Chaos-free mobile release management.\u003C\u002Fb>\u003C\u002Fp>\n\u003C\u002Fp>\n\n\u003Chr\u002F>\n\n\u003Cp align = \"center\">\n  \u003Ca href=\"https:\u002F\u002Fscreenshotbot.io\u002F?utm_source=jetpack&utm_medium=newsletter&utm_campaign=may-2-25\" target=\"__blank\">\n    \u003Cb>Screenshotbot\u003C\u002Fb>\n  \u003C\u002Fa> \u003Cbr\u002F>\u003Cbr\u002F>\n  \u003Ca href=\"https:\u002F\u002Fscreenshotbot.io\u002F?utm_source=jetpack&utm_medium=newsletter&utm_campaign=may-2-25\" target=\"__blank\">\n    \u003Cimg src=\"screenshots\u002Fscreenshotbot_banner.png\" width=450 \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Chr\u002F>\n\n\u003Cp align = \"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.emergetools.com\u002F?utm_source=jetpack&utm_medium=sponsor&utm_campaign=emerge\" target=\"__blank\">\n    \u003Cb>Emerge Tools\u003C\u002Fb>\n  \u003C\u002Fa> \u003Cbr\u002F>\u003Cbr\u002F>\n  \u003Ca href=\"https:\u002F\u002Fwww.emergetools.com\u002F?utm_source=jetpack&utm_medium=sponsor&utm_campaign=emerge\" target=\"__blank\">\n    \u003Cimg src=\"screenshots\u002Femerge_supporter_banner.png\" width=400 \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Chr\u002F>\n\n\u003Cp align = \"center\">\n  \u003Ca href=\"https:\u002F\u002Fauth.sofy.ai\u002Fsofyprod.onmicrosoft.com\u002Foauth2\u002Fv2.0\u002Fauthorize?p=B2C_1A_SOFY_SIGNUP&client_id=0f3b4e4f-0e94-4658-b5af-7e0c78f0dda2&nonce=defaultNonce&redirect_uri=https%3A%2F%2Fportal.sofy.ai%2Fauth&scope=openid&response_type=id_token&prompt=login&utm_source=jetpackcompose&utm_medium=cpc&utm_campaign=JPC-campaign\" target=\"__blank\">\n    \u003Cb>Sofy.ai\u003C\u002Fb>\n  \u003C\u002Fa> \u003Cbr\u002F>\u003Cbr\u002F>\n  \u003Ca href=\"https:\u002F\u002Fauth.sofy.ai\u002Fsofyprod.onmicrosoft.com\u002Foauth2\u002Fv2.0\u002Fauthorize?p=B2C_1A_SOFY_SIGNUP&client_id=0f3b4e4f-0e94-4658-b5af-7e0c78f0dda2&nonce=defaultNonce&redirect_uri=https%3A%2F%2Fportal.sofy.ai%2Fauth&scope=openid&response_type=id_token&prompt=login&utm_source=jetpackcompose&utm_medium=cpc&utm_campaign=JPC-campaign\" target=\"__blank\">\n    \u003Cimg src=\"screenshots\u002FSofy_ai.png\" width=400 \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\nTalks\n-----\nI've also used the examples listed in this repo and given talks at conferences. If video is your preferred medium of learning, you can head to the links below:\n\n**360|AnDev 2020: Learning Jetpack Compose By Example**\n[Video](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=2rEOpqDKOUA)| [Slides](https:\u002F\u002Fspeakerdeck.com\u002Fvinaygaba\u002F360-andev-2020-learning-jetpack-compose-by-example)\n\n**Android Summit 2020: Learn Jetpack Compose By Example v2**\n[Slides](https:\u002F\u002Fspeakerdeck.com\u002Fvinaygaba\u002Fandroid-summit-2020-learn-jetpack-compose-by-example)\n\nSetup\n-----\nTo try out this sample app, you need to at least use the latest version\nof Android Studio. This project has been tested against Android Studio Artic Fox.\n[You can download it here](https:\u002F\u002Fdeveloper.android.com\u002Fstudio\u002Fpreview).\nIn general, Jetpack Compose requires you to use the Canary version of\nAndroid Studio.\n\nExamples\n-----------------\n\nEach example is meant to be self contained and tries to explain all the\nconcepts that its using with comments. Compose also comes with this\nnifty feature that lets you preview each component in the IntelliJ IDE\nitself. To do so, go to any of the examples and then click on\nthe preview button in the top right corner. This is possible if your\n`@Composable` component has a corresponding `@Preview` method associated\nwith it. Look at the examples below for all this to make a bit more\nsense.\n\n![Jetpack Compose Preview Functionality](screenshots\u002Fcompose_preview.gif)\n\n### General\n\n|Example|Preview|\n|-------|-------|\n|[How do I display text on the screen using Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FSimpleTextActivity.kt)|\u003Cimg src =\"screenshots\u002Fsimple_text.png\" width=214 height=400> |\n|[How do I make a view clickable and do actions when clicked?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FAlertDialogActivity.kt#L51)| \u003Cimg src =\"screenshots\u002Falert_dialog.gif\" width=214 height=400> |\n|[How do I add padding around a view?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FLayoutModifierActivity.kt#L51) \u003Cbr\u002F>  [How do I add an offset to a layout?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FLayoutModifierActivity.kt#L90) \u003Cbr\u002F> [How do I enforce a layout to have a fixed aspect ratio?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FLayoutModifierActivity.kt#L112)|\u003Cimg src =\"screenshots\u002Flayout_modifiers.png\" width=214 height=400>|\n|How do I add a background color to any section of the screen? \u003Cbr\u002F> [Example 1](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FCustomTextActivity.kt#L187) \u003Cbr\u002F> [Example 2](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FDrawerAppActivity.kt#L123)|\u003Cimg src =\"screenshots\u002Fbackground_surface1.png\" width=214> \u003Cbr\u002F> \u003Cimg src =\"screenshots\u002Fbackground_surface2.png\" width=214> |\n|[How do I get FrameLayout like functionality to stack views on top of one another?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fstack\u002FStackActivity.kt)| |\n|How do I do animation in Jetpack Compose? \u003Cbr\u002F>[Example: Rotation Animation](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fanimation\u002FAnimation1Activity.kt) \u003Cbr\u002F> [Example: Color Change Animation](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fanimation\u002FAnimation2Activity.kt) |\u003Cimg src =\"screenshots\u002Fanimation_rotation.gif\" width=214 height=400> \u003Cbr\u002F> \u003Cbr\u002F> \u003Cimg src =\"screenshots\u002Fcolor_animation.gif\" width=214 height=400>|\n|[How do styles & themes work in Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftheme\u002FDarkModeActivity.kt) \u003Cbr\u002F> [How do I add dark mode capability to my app?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftheme\u002FDarkModeActivity.kt)|\u003Cimg src =\"screenshots\u002Fdark_mode.gif\" width=214 height=400> |\n\n\n### State Management\n|Example|Preview|\n|-------|-------|\n|[How do I store state information in Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fstate\u002FStateActivity.kt)|\u003Cimg src =\"screenshots\u002Fstate_example.gif\" width=214 height=400> |\n|[How do I retain state across process death & activity recreation(like orientation changes)?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fstate\u002FProcessDeathActivity.kt) | \u003Cimg src =\"screenshots\u002Fprocess_death.gif\" width=214 height=400> |\n|[How do I use LiveData\u002FViewModels with Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fstate\u002Flivedata\u002FLiveDataActivity.kt) | \u003Cimg src =\"screenshots\u002Flive_data.gif\" width=214 height=400> |\n|[How do I use Coroutine Flow to update my components\u002Fviews with Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fstate\u002Fcoroutine\u002FCoroutineFlowActivity.kt)|\u003Cimg src =\"screenshots\u002Fcoroutine_flow.gif\" width=214 height=400> |\n|[How do you launch a Coroutine inside a Composable? \u003Cbr\u002F> How do you do side-effects in Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fstate\u002Flivedata\u002FLiveDataActivity.kt#L170) |\u003Cimg src =\"screenshots\u002Flive_data.gif\" width=214 height=400> |\n|[How do you handle back press in Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fstate\u002Fbackpress\u002FBackPressActivity.kt) | \u003Cimg src =\"screenshots\u002Fback_press.gif\" width=214 height=400>|\n\n\n### Material Design\n\n|Example|Preview|\n|-------|-------|\n|[How do I add a Material Design Card?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L114) \u003Cbr> [How do I display a linear progress bar?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L272) \u003Cbr> [What about a circular progress bar?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L325) \u003Cbr> [How do I add a Snackbar?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L367) \u003Cbr> [How to add a Material Design Slider?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L393) \u003Cbr> [How to configure a two\u002Fthree state checkbox?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L196) \u003Cbr> [How do I add a radio button group?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L239)|\u003Cimg src =\"screenshots\u002Fmaterial_design_components.gif\" width=214 height=400> |\n|[How do I add a Floating Action Button to my screen?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FFixedActionButtonActivity.kt) |\u003Cimg src =\"screenshots\u002Ffab_bottom_nav.gif\" width=214 height=400> |\n|[How do I create a Bottom App Bar?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FBottomNavigationActivity.kt)|\u003Cimg src =\"screenshots\u002Fbottom_navigation_components.gif\" width=214 height=400> |\n|[How do I add a drawer to my screen?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FDrawerAppActivity.kt)|\u003Cimg src =\"screenshots\u002Fdrawer_layout.gif\" width=214 height=400>|\n|[How do I add Ripple effect to a view?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FMaterialActivity.kt#L495) | \u003Cimg src =\"screenshots\u002Fripple.gif\" width=214> |\n|[How do I add a Button to my screen?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FButtonActivity.kt)|\u003Cimg src =\"screenshots\u002Fbuttons.png\" width=214 height=400>|\n|[How do I display an alert dialog\u002Fpopup modal?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FAlertDialogActivity.kt)|\u003Cimg src =\"screenshots\u002Falert_dialog.gif\" width=214 height=400>|\n|[How do I make Material Filter Chips that overflow to multiple rows?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FFlowRowActivity.kt) |\u003Cimg src =\"screenshots\u002Ffilter_chips.gif\" width=214 height=400>|\n|[How do I add a shadow around my view?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fmaterial\u002FShadowActivity.kt) | \u003Cimg src =\"screenshots\u002Fshadow.png\" width=214 height=400>|\n\n### Text\n\n|Example|Preview|\n|-------|-------|\n|[How do I style & customize my text?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FCustomTextActivity.kt)| \u003Cimg src =\"screenshots\u002Ftext_styles.gif\" width=214 height=400> |\n|[How do you take text input from a user in Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FTextFieldActivity.kt#L78) \u003Cbr\u002F> [How can I use a custom text style for a text input?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FTextFieldActivity.kt#L112) \u003Cbr\u002F> [How can I change the keyboard type to accept numbers?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FTextFieldActivity.kt#L156) \u003Cbr\u002F> [How can I create a Search bar?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FTextFieldActivity.kt#L193) \u003Cbr\u002F> [How can I apply a visual transformation to an input text?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FTextFieldActivity.kt#L246) \u003Cbr\u002F> [How can I provide a hint for the text input field?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FTextFieldActivity.kt#L293)\u003Cbr\u002F> [Is there filled text field as per Material Design specification?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FTextFieldActivity.kt#L293)|\u003Cimg src =\"screenshots\u002Ftext_input.gif\" width=214 height=400> |\n|[How do I animate parts of my text? \u003Cbr\u002F> How do I describe parts of my text to be replaced by alternate views?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fanimation\u002FTextAnimationActivity.kt)|\u003Cimg src =\"screenshots\u002Ftext_animation.gif\" width=214 height=400>|\n\n### Images\n\n|Example|Preview|\n|-------|-------|\n|[How do I display an image in Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fimage\u002FImageActivity.kt) \u003Cbr\u002F> [How to load an image from the resource folder?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fimage\u002FImageActivity.kt#L87) \u003Cbr\u002F> [How to make an image view with rounded corners?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fimage\u002FImageActivity.kt#L130) \u003Cbr\u002F> [How to load an image over the network using Picasso?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fimage\u002FImageActivity.kt#L161) \u003Cbr\u002F> [How to load an image over the network using Glide?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fimage\u002FImageActivity.kt#L223)|\u003Cimg src =\"screenshots\u002Fload_images.gif\" width=214 height=400>|\n\n### Lists\n\n|Example|Preview|\n|-------|-------|\n|[How do I display a list in my app?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fscrollers\u002FVerticalScrollableActivity.kt)\u003Cbr\u002F> [Is there a RecyclerView equivalent?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fscrollers\u002FVerticalScrollableActivity.kt#L48)|\u003Cimg src =\"screenshots\u002Fvertical_list.gif\" width=214 height=400>|\n|[How can I have a grid layout?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fscrollers\u002FGridLayoutActivity.kt)|\u003Cimg src =\"screenshots\u002Fgrid_layout.gif\" width=214 height=400> |\n|[How can I build a horizontally scrollable carousel?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fscrollers\u002FHorizontalScrollableActivity.kt)| \u003Cimg src =\"screenshots\u002Fhorizontal_list.gif\" width=214 height=400>|\n|[How can I add animations for insertion\u002Fdeletion of a list item?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fanimation\u002FListAnimationActivity.kt)| \u003Cimg src =\"screenshots\u002Flist_animation.gif\" width=214 height=400>|\n\n\n### Flexible Layouts\n|Example|Preview|\n|-------|-------|\n|[How do I align the baseline of two views?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FViewLayoutConfigurationsActivity.kt#L286) \u003Cbr\u002F>\u003Cbr\u002F> **What's the layout weight equivalent in Jetpack Compose?**\u003Cbr>[Example with equal weights](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FViewLayoutConfigurationsActivity.kt#L78) \u003Cbr>[Example with unequal weights](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FViewLayoutConfigurationsActivity.kt#L110)\u003Cbr\u002F>\u003Cbr\u002F> **How do I auto arrange my views similar to FlexBox?**\u003Cbr>[Add space between views](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FViewLayoutConfigurationsActivity.kt#L143)\u003Cbr>[Evenly distribute space](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FViewLayoutConfigurationsActivity.kt#L172)\u003Cbr>[Add space around the views](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FViewLayoutConfigurationsActivity.kt#L201)\u003Cbr>[Tightly packed centering of views](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FViewLayoutConfigurationsActivity.kt#L230)|\u003Cimg src =\"screenshots\u002Fview_layout_arrangements.gif\" width=214 height=400> |\n|[How do I use constraint layouts?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FConstraintLayoutActivity.kt) \u003Cbr\u002F> [How do I use guidelines with constraint layouts?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FConstraintLayoutActivity.kt#L159) \u003Cbr\u002F> [How do I add barriers when using constraint layouts?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FConstraintLayoutActivity.kt#L230) \u003Cbr\u002F> [How do I add bias when using constraint layouts?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Flayout\u002FConstraintLayoutActivity.kt#L315)|\u003Cimg src =\"screenshots\u002Fconstraints.png\" width=214 height=400>|\n\n### Custom Views\n\n|Example|Preview|\n|-------|-------|\n|[How do I draw using a canvas?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fcustomview\u002FCustomViewActivity.kt)|\u003Cimg src =\"screenshots\u002Fcustom_view.png\" width=214 height=400>|\n|[Example of a measuring scale component](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fcustomview\u002FMeasuringScaleActivity.kt) | \u003Cimg src =\"screenshots\u002Fmeasuring_scale.gif\" width=214 height=400>|\n|[How do I make a view zoomable?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fcustomview\u002FZoomableActivity.kt) | \u003Cimg src =\"screenshots\u002Fzoomable.gif\" width=214 height=400>|\n|[How do I detect touch events in a custom view?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fcustomview\u002FCustomViewPaintActivity.kt)| |\n\n### Interoperability\n|Example|Preview|\n|-------|-------|\n|[How can I use Jetpack Compose components inside existing screens?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Finterop\u002FComposeInClassicAndroidActivity.kt) | \u003Cimg src =\"screenshots\u002Finterop.png\" width=214 height=400>|\n\n### Navigation\n|Example|Preview|\n|-------|-------|\n|[How can I navigate to different screen in Jetpack Compose?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002Fmain\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Fnavigation\u002FComposeNavigationActivity.kt) | \u003Cimg src =\"screenshots\u002Fcompose_navigation_example.gif\" width=214 height=400>|\n\n### Testing\n|Example|Preview|\n|-------|-------|\n|[How do I write a simple UI Test in Jetpack Compose? \u003Cbr\u002F> How do I test \"Composables\"?](https:\u002F\u002Fgithub.com\u002Fvinaygaba\u002FLearn-Jetpack-Compose-By-Example\u002Fblob\u002Fmaster\u002Fapp\u002Fsrc\u002FandroidTest\u002Fjava\u002Fcom\u002Fexample\u002Fjetpackcompose\u002Ftext\u002FSimpleTextComposableTest.kt) | |\n\nCredits\n-----------------\nAuthor: Vinay Gaba (vinaygaba@gmail.com)\n\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fvinaygaba\">\n  \u003Cimg alt=\"Follow me on Twitter\"\n       src=\"https:\u002F\u002Fgithub.com\u002Fgabrielemariotti\u002Fcardslib\u002Fraw\u002Fmaster\u002Fdemo\u002Fimages\u002Ftwitter64.png\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fvinaygaba\">\n  \u003Cimg alt=\"Follow me on LinkedIn\"\n       src=\"https:\u002F\u002Fgithub.com\u002Fgabrielemariotti\u002Fcardslib\u002Fraw\u002Fmaster\u002Fdemo\u002Fimages\u002Flinkedin.png\" \u002F>\n\u003C\u002Fa>\n\n\nLicense\n-----------------\n\n    Copyright 2022 Vinay Gaba\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","Learn-Jetpack-Compose-By-Example 是一个展示如何使用 Jetpack Compose 进行 Android UI 开发的示例项目。该项目通过丰富的代码实例，展示了如何以声明式编程的方式构建常见的 Android 用户界面，涵盖了从基础组件到复杂布局的各种应用场景。它利用 Kotlin 语言和 Jetpack Compose 框架，旨在帮助开发者快速理解和掌握这一新的 UI 工具包。适合于正在学习或计划采用 Jetpack Compose 的 Android 开发者以及希望提高其应用界面开发效率的团队。",2,"2026-06-11 03:11:57","top_language"]