{"id":13607174,"url":"https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials","last_synced_at":"2025-04-12T11:31:44.864Z","repository":{"id":37430078,"uuid":"326400374","full_name":"SmartToolFactory/Jetpack-Compose-Tutorials","owner":"SmartToolFactory","description":"šŸš€šŸ§ØšŸ“ Series of Tutorials to learn about Jetpack Compose with subjects Material Widgets, Layout, SubcomposeLayout, custom layouts, State, custom rememberable, recomposition, LaunchedEffect, side-effects, Gesture, Animation, Navigation, Canvas, UIs like whatsapp and others.","archived":false,"fork":false,"pushed_at":"2024-10-29T13:05:37.000Z","size":89491,"stargazers_count":3018,"open_issues_count":4,"forks_count":312,"subscribers_count":62,"default_branch":"master","last_synced_at":"2024-10-29T13:26:41.948Z","etag":null,"topics":["android","android-ui","canvas","compose-animation","compose-canvas","compose-ui-test","custom-layout","jetpack-compose","jetpack-compose-animation","jetpack-compose-canvas","jetpack-compose-navigation","jetpack-compose-tutorial","material-components","material-design","sideeffects","unit-testing"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmartToolFactory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-03T12:20:16.000Z","updated_at":"2024-10-29T13:05:42.000Z","dependencies_parsed_at":"2023-02-12T16:16:11.197Z","dependency_job_id":"3604654b-6972-48a9-97d9-d087112dfc40","html_url":"https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FJetpack-Compose-Tutorials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FJetpack-Compose-Tutorials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FJetpack-Compose-Tutorials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FJetpack-Compose-Tutorials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmartToolFactory","download_url":"https://codeload.github.com/SmartToolFactory/Jetpack-Compose-Tutorials/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223513972,"owners_count":17158103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-ui","canvas","compose-animation","compose-canvas","compose-ui-test","custom-layout","jetpack-compose","jetpack-compose-animation","jetpack-compose-canvas","jetpack-compose-navigation","jetpack-compose-tutorial","material-components","material-design","sideeffects","unit-testing"],"created_at":"2024-08-01T19:01:16.233Z","updated_at":"2025-04-12T11:31:44.855Z","avatar_url":"https://github.com/SmartToolFactory.png","language":"Kotlin","readme":"### Jetpack Compose Tutorials and Playground\n\n## šŸ¤“ Overview\n\nSeries of Tutorials to learn about Jetpack Compose, Material Widgets, State, Animation, and\nNavigation. Easy to search in code and in app. Each chapter module contains its own content in code.\nSearchBar can be used to search with a tag or description available for each tutorial.\n\nRecommended section is under constructions for now, when finished it will get recommended tags using\nprevious searches using a database, domain with ViewModel.\n\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"/./screenshots/intro.gif\" align=\"center\" width=\"32%\"/\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n| Tutorial | Preview |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------|\n| \u003ch3\u003e1-1 Column, Row, Box, Modifiers\u003c/h3\u003e\u003cbr/\u003eCreate Row that adds elements in horizontal order, and Column that adds elements in vertical order.\u003cbr\u003e\u003cbr\u003e ā€¢ Column\u003cbr\u003eā€¢ Row\u003cbr\u003eā€¢ Box\u003cbr\u003eā€¢ Modifier\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial1_1.jpg\" width=200\u003e |\n| | |\n| \u003ch3\u003e1-2 Surface, Shape, Clickable\u003c/h3\u003e\u003cbr/\u003eCreate and modify Surface to draw background for Composables, add click action to any composable. Set weight or offset modifiers.\u003cbr\u003e\u003cbr\u003e ā€¢ Surface\u003cbr\u003eā€¢ Shape\u003cbr\u003eā€¢ Clickable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial1_2.jpg\" width=200\u003e |\n| | |\n\n### Material Widgets\n\n| Tutorial | Preview |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|\n| \u003ch3\u003e2-1 Text\u003c/h3\u003e\u003cbr/\u003eCreate Text component with different properties such as color, background, font weight, family, style, spacing and others\u003cbr\u003e\u003cbr\u003e ā€¢ Text\u003cbr\u003eā€¢ Row\u003cbr\u003eā€¢ FontStyle\u003cbr\u003eā€¢ Annotated String Hyperlink\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_1.jpg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-2 Button, IconButton, FAB, Chip\u003c/h3\u003e\u003cbr/\u003eCreate button with text and/or with image, Floating Action Button or Chips. Modify properties of buttons including color, text, and click actions.\u003cbr\u003e\u003cbr\u003e ā€¢ Button\u003cbr\u003eā€¢ IconButton\u003cbr\u003eā€¢ FloatingActionButton\u003cbr\u003eā€¢ Chip\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_2.jpg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-3 TextField\u003c/h3\u003e\u003cbr/\u003eCreate TextField component with regular style or outlined. Set error, colors, state, icons, and IME actions.\u003cbr\u003e\u003cbr\u003e ā€¢ TextField\u003cbr\u003eā€¢ OutlinedTextField\u003cbr\u003eā€¢ IME\u003cbr\u003eā€¢ Phone format VisualTransformation\u003cbr\u003eā€¢ Regex\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_3.jpg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-4 Image\u003c/h3\u003e\u003cbr/\u003eCreate Image with image, vector resource or with Painter, set image and Content scales to fit, expand or shrink image. Change shape of Image or apply ColorFilter and PorterDuff modes.\u003cbr\u003e\u003cbr\u003e ā€¢ Image\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Drawable\u003cbr\u003eā€¢ Bitmap\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_4.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-5 LazyColumn/Row/VerticalGrid\u003c/h3\u003e\u003cbr/\u003eVertical, horizontal grid lists with LazyColumn, LazyRow and LazyVerticalGrid. Use contentPadding set paddings for lists, verticalArrangement or horizontalArrangement for padding between items, rememberLazyListState to manually scroll.\u003cbr\u003e\u003cbr\u003e ā€¢ LazyColumn(Vertical RecyclerView)\u003cbr\u003eā€¢ LazyRow(Horizontal RecyclerView\u003cbr\u003eā€¢ LazyVerticalGrid(GridLayout)\u003cbr\u003eā€¢ StickyHeaders\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_5.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-6 TopAppbar \u0026 Tab\u003c/h3\u003e\u003cbr/\u003eTopAppbar with actions, overflow menus. Tabs with text only, image only and image+text with different background, divider, and indicators.\u003cbr\u003e\u003cbr\u003e ā€¢ TopAppBar\u003cbr\u003eā€¢ Overflow menu\u003cbr\u003eā€¢ TabRow and Tab\u003cbr\u003eā€¢ Tab Indicator, Divider\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_6.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-7 BottomNavigation\u003c/h3\u003e\u003cbr/\u003eBottom navigation bars allow movement between primary destinations in an app. BottomNavigation should contain multiple BottomNavigationItems, each representing a singular destination.\u003cbr\u003e\u003cbr\u003e ā€¢ BottomNavigation\u003cbr\u003eā€¢ BottomNavigationItem\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_7.jpeg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-8 BottomAppBar\u003c/h3\u003e\u003cbr/\u003eA bottom app bar displays navigation and key actions at the bottom of screens.\u003cbr\u003e\u003cbr\u003e ā€¢ BottomAppBar\u003cbr\u003eā€¢ Scaffold\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_8.jpeg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-9-1 Side Navigation\u003c/h3\u003e\u003cbr/\u003eA backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.\u003cbr\u003e\u003cbr\u003e ā€¢ Scaffold\u003cbr\u003eā€¢ Side Navigation\u003cbr\u003eā€¢ DrawerState\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_9.jpeg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-9-2 ModalDrawer\u003c/h3\u003e\u003cbr/\u003eModal navigation drawers block interaction with the rest of an appā€™s content with a scrim. They are elevated above most of the appā€™s UI and donā€™t affect the screenā€™s layout grid.\u003cbr\u003e\u003cbr\u003e ā€¢ ModalDrawer\u003cbr\u003eā€¢ DrawerState\u003cbr\u003eā€¢ Scaffold\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_9_2.jpeg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-10-1 BottomSheet\u003c/h3\u003e\u003cbr/\u003eCreate bottom sheet using BottomSheetScaffold and rememberBottomSheetScaffoldState, create modal bottom sheets.\u003cbr\u003e\u003cbr\u003e ā€¢ BottomSheetScaffold\u003cbr\u003eā€¢ BottomSheetState\u003cbr\u003eā€¢ ModalBottomSheetLayout\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_10.jpeg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-10-4 BottomDrawer\u003c/h3\u003e\u003cbr/\u003eBottomDrawer with BottomAppBar.\u003cbr\u003e\u003cbr\u003e ā€¢ BottomDrawer\u003cbr\u003eā€¢ BottomAppBar\u003cbr\u003eā€¢ Scaffold\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_10_4.jpeg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-10-5 BackdropScaffold\u003c/h3\u003e\u003cbr/\u003eBackdropScaffold provides an API to put together several material components to construct your screen.\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_10_5.jpeg\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-11 Snackbar, Progress, Selection\u003c/h3\u003e\u003cbr/\u003eCreate Snackbars with various layouts and styling, Checkboxes with selectable text, tri state checkbox, grouped radio buttons and sliders.\u003cbr\u003e\u003cbr\u003e ā€¢ SnackBar\u003cbr\u003eā€¢ ProgressIndicator\u003cbr\u003eā€¢ Checkbox\u003cbr\u003eā€¢ TriStateCheckbox\u003cbr\u003eā€¢ Switch\u003cbr\u003eā€¢ RadioButton\u003cbr\u003eā€¢ Slider\u003cbr\u003eā€¢ RangeSlider\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_11.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e2-12 Dialog, AlertDialog\u003c/h3\u003e\u003cbr/\u003eCreate Dialog, and AlertDialog with standard and custom layouts. Implement on dismiss logic and get result when dialog is closed.\u003cbr\u003e\u003cbr\u003eā€¢ AlertDialog\u003cbr\u003eā€¢ Dialog\u003cbr\u003eā€¢ DialogProperties\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial2_12.gif\" width=200\u003e |\n| | |\n\n### Layout\n\n| Tutorial | Preview |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------|\n| \u003ch3\u003e3-1-1 Custom Modifier\u003c/h3\u003e\u003cbr/\u003eCreate custom layout using using layout, Measurable, Constraint, Placeable.\u003cbr\u003e\u003cbr\u003eā€¢ Custom Modifier\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Placeable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_1_1.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-1-2 onGloballyPositioned\u003c/h3\u003e\u003cbr/\u003eUse Modifier.onGloballyPositioned to get position of a Composable in parent, root or window.br\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ onGloballyPositioned\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_1_2.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-1-3 graphicsLayer\u003c/h3\u003e\u003cbr/\u003eUse Modifier.offset{} and Modifier.graphicsLayer{} to scale, translate or change other properties of a Composable.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ graphicsLayer\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_1_3.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-1-4 BoxWithConstraints\u003c/h3\u003e\u003cbr/\u003eBoxWithConstraints is a composable that defines its own content according to the available space, based on the incoming constraints or the current LayoutDirection.\u003cbr\u003e\u003cbr\u003eā€¢ BoxWithConstraints\u003cbr\u003eā€¢ Constraint\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_4.png\" width=200\u003e | | |\n| | |\n| \u003ch3\u003e3-1-6 Chaining Size Modifiers\u003c/h3\u003e\u003cbr/\u003eObserve how chaining Modifier.size.size, Modifier.sizeIn.size or Modifier.size.requiredSize or other combination of size modifiers effect final Constraints.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ size/sizeIn\u003cbr\u003eā€¢ requiredWidth/requiredHeight/requiredSize\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_1_6.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-1-7 Modifier.wrapContentSize\u003c/h3\u003e\u003cbr/\u003eUse Modifier.wrapContentSize/Width/Height to use content constraints instead of Constraints forced by parent.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003eā€¢ Measurable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_1_7.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-1-8 Modifier.layout\u003c/h3\u003e\u003cbr/\u003eUse Modifier.layout to create LayoutModifier to measure with Constraints and place Placeables based on which order Modifier.layout is assigned.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraints\u003cbr\u003eā€¢ Placeable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_1_8.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-2-1 Custom Layout\u003c/h3\u003e\u003cbr/\u003eCreate custom layout using using MeasurePolicy and use intrinsic dimensions.\u003cbr\u003e\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Placeable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_2_1.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-2-10 Constraints \u0026 Modifier.layout\u003c/h3\u003e\u003cbr/\u003eConstraints to measure measurables with Constraints.offset and Constraints.constrainWidth to limit maximum width or available space for Placeable.\u003cbr\u003e\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Placeable\u003cbr\u003eā€¢ Modifier.layout\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_2_10.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-3-1 Scope\u0026ParentDataModifier\u003c/h3\u003e\u003cbr/\u003eAdd custom modifiers to Composable inside a custom layout using its scope like align modifier only available in specific Composable like a custom Column.\u003cbr\u003e\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003eā€¢ Scope\u003cbr\u003eā€¢ ParentDataModifier\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Placeable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_3_1.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-5 SubcomposeLayout\u003c/h3\u003e\u003cbr/\u003eSubcompose layout which allows to subcompose the actual content during the measuring stage for example to use the values calculated during the measurement as params for the composition of the children.\u003cbr\u003e\u003cbr\u003eā€¢ SubcomposeLayout\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Placeable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_5.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-6-1 Custom Chat Layouts1\u003c/h3\u003e\u003cbr/\u003eCustom layout like whatsapp chat layout that moves time and message read status layout right or bottom based on message width.\u003cbr\u003e\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Placeable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_6_1.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-6-2 Custom Chat SubcomposeLayout\u003c/h3\u003e\u003cbr/\u003eCustom layout like whatsapp chat. Added quote and name tag resized to longest sibling using SubcomposeColumn from previous examples to have whole layout.\u003cbr\u003e\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003eā€¢ SubcomposeLayout\u003cbr\u003eā€¢ Measurable\u003cbr\u003eā€¢ Constraint\u003cbr\u003eā€¢ Placeable\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_6_2.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-9 Visibility Percentage\u003c/h3\u003e\u003cbr/\u003eDetect percentage of visibility of a Composable using Modifier.onPlaced inside Column with vertical scroll or LazyColumn.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ LazyColumn\u003cbr\u003eā€¢ LazyListState\u003cbr\u003eā€¢ onPlaced\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_9.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e3-10 Center Item on Scroll\u003c/h3\u003e\u003cbr/\u003eDetect position in parent and center an item while its parent is scrolled.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ LazyColumn\u003cbr\u003eā€¢ onPlaced\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial3_10.gif\" width=200\u003e |\n| | |\n\n### State\n\n| Tutorial | Preview |\n|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|\n| \u003ch3\u003e4-1-1 Remember\u0026MutableState\u003c/h3\u003e\u003cbr/\u003eRemember and mutableState effect recomposition and states.\u003cbr\u003e\u003cbr\u003eā€¢ remember\u003cbr\u003eā€¢ State\u003cbr\u003eā€¢ Recomposition\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial4_1_1.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e4-2-3 Scoped Recomposition\u003c/h3\u003e\u003cbr/\u003eHow hierarchy of Composables effects Smart Composition.\u003cbr\u003e\u003cbr\u003eā€¢ remember\u003cbr\u003eā€¢ Recomposition\u003cbr\u003eā€¢ State\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial4_2_3.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e4-4 Custom Remember\u003c/h3\u003e\u003cbr/\u003eCreate a custom remember and custom component to have badge that changes its shape based on properties set by custom rememberable.\u003cbr\u003e\u003cbr\u003eā€¢ remember\u003cbr\u003eā€¢ State\u003cbr\u003eā€¢ Recomposition\u003cbr\u003eā€¢ Custom Layout\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial4_4.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e4-5-1 SideEffect1\u003c/h3\u003e\u003cbr/\u003eUse remember functions like rememberCoroutineScope, and rememberUpdatedState and side-effect functions such as LaunchedEffect and DisposableEffect.\u003cbr\u003e\u003cbr\u003eā€¢ remember\u003cbr\u003eā€¢ rememberCoroutineScope\u003cbr\u003eā€¢ rememberUpdatedState\u003cbr\u003eā€¢ LaunchedEffect\u003cbr\u003eā€¢ DisposableEffect\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial4_5_1.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e4-5-2 SideEffect2\u003c/h3\u003e\u003cbr/\u003eUse SideEffect, derivedStateOf, produceState and snapshotFlow.\u003cbr\u003e\u003cbr\u003eā€¢ remember\u003cbr\u003eā€¢ SideEffect\u003cbr\u003eā€¢ derivedStateOf\u003cbr\u003eā€¢ produceStateOf\u003cbr\u003eā€¢ snapshotFlow\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial4_5_2.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e4-7-3 Compose Phases3\u003c/h3\u003e\u003cbr/\u003eHow deferring a state read changes which phases of frame(Composition, Layout, Draw) are called.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ Recomposition\u003cbr\u003eā€¢ Composition\u003cbr\u003eā€¢ Layout\u003cbr\u003eā€¢ Draw\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial4_7_3.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e4-12 LazyList Scroll Direction\u003c/h3\u003e\u003cbr/\u003eDetect scroll direction of a LazyColumn using LazyListStated.\u003cbr\u003e\u003cbr\u003eā€¢ Modifier\u003cbr\u003eā€¢ LazyColumn\u003cbr\u003eā€¢ LazyListState\u003cbr\u003eā€¢ derivedStateOf\u003cbr\u003eā€¢ snapshotFlow\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial4_12.gif\" width=200\u003e |\n| | |\n| |\n\n### Gesture\n\n| Tutorial | Preview |\n|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------|\n| \u003ch3\u003e5-1-1 Clickable\u003c/h3\u003e\u003cbr/\u003eUse clickable modifier, Indication. Indication to clip ripples, or create custom ripple effects.\u003cbr\u003e\u003cbr\u003eā€¢ clickable\u003cbr\u003eā€¢ Indication\u003cbr\u003eā€¢ rememberRipple\u003cbr\u003eā€¢ pointerInput\u003cbr\u003eā€¢ pointerInteropFilter\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_1_1.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-1-2 InteractionSource1\u003c/h3\u003e\u003cbr/\u003eUse Interaction source to collect interactions or change scale of Composables based on interaction state.\u003cbr\u003e\u003cbr\u003eā€¢ clickable\u003cbr\u003eā€¢ InteractionSource\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_2.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-1-3 InteractionSource2\u003c/h3\u003e\u003cbr/\u003eUse InteractionSource to update touch state of multiple Composable or another Composable based on current interaction.\u003cbr\u003e\u003cbr\u003eā€¢ clickable\u003cbr\u003eā€¢ InteractionSource\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_1_3.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-2 Tap\u0026Drag Gesture\u003c/h3\u003e\u003cbr/\u003eUse PointerInput to listen press, tap, long press, drag gestures. detectTapGestures is used for listening for tap, longPress, doubleTap, and press gestures.\u003cbr\u003e\u003cbr\u003eā€¢ pointerInput\u003cbr\u003eā€¢ pointerInteropFilter\u003cbr\u003eā€¢ detectTapGestures\u003cbr\u003eā€¢ detectDragGestures\u003cbr\u003eā€¢ onPress\u003cbr\u003eā€¢ onDoubleTap\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_2.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-3 Transform Gestures\u003c/h3\u003e\u003cbr/\u003eUse PointerInput to listen for detectTransformGesture to get centroid, pan, zoom and rotate params.\u003cbr\u003e\u003cbr\u003eā€¢ pointerInput\u003cbr\u003eā€¢ detectTransformGestures\u003cbr\u003eā€¢ centroid\u003cbr\u003eā€¢ pan\u003cbr\u003eā€¢ zoom\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_3.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-4-1 AwaitPointerEventScope1\u003c/h3\u003e\u003cbr/\u003eUse AwaitPointerEventScope to get awaitFirstDown for down events, waitForUpOrCancellation for up events, and awaitPointerEvent for move events with pointers.\u003cbr\u003e\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ PointerInputChange\u003cbr\u003eā€¢ awaitFirstDown\u003cbr\u003eā€¢ waitForUpOrCancellation\u003cbr\u003eā€¢ awaitPointerEvent\u003cbr\u003eā€¢ awaitTouchSlopOrCancellation\u003cbr\u003eā€¢ awaitDragOrCancellation\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_4_1.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-4-3 Centroid, Zoom, Pan, Rotation\u003c/h3\u003e\u003cbr/\u003eUse AwaitPointerEventScope to calculate centroid position and size, zoom, pan, and rotation.\u003cbr\u003e\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ centroid\u003cbr\u003eā€¢ pan\u003cbr\u003eā€¢ zoom\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_4_3.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-6-2 Gesture Propagation1\u003c/h3\u003e\u003cbr/\u003eConsume different type of touch events in Composable in an hierarchy to display gesture propagation between parent and children with MOVE gestures.\u003cbr\u003e\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ pointerInput\u003cbr\u003eā€¢ consume\u003cbr\u003eā€¢ consumePositionChange\u003cbr\u003eā€¢ anyChangeConsumed\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_6_2.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-6-4 Transform Propagation\u003c/h3\u003e\u003cbr/\u003eConsume events to rotate, zoom, move or apply drag or move events on Composables.\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ detectTransformGestures\u003cbr\u003eā€¢ consume\u003cbr\u003eā€¢ consumePositionChange\u003cbr\u003eā€¢ anyChangeConsumed\u003cbr\u003eā€¢ pan\u003cbr\u003eā€¢ zoom\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_6_4.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-9-6 Collapsing TopAppBar\u003c/h3\u003e\u003cbr/\u003eCreate a collapsing TopAppBar using Modifier.nestedScroll and NestedScrollConnection.\u003cbr\u003eā€¢ nestedScroll\u003cbr\u003eā€¢ NestedScrollConnection\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_9_6.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-9-7 Collapsing TopAppBar2\u003c/h3\u003e\u003cbr/\u003eCreate a collapsing TopAppBar using Modifier.nestedScroll and NestedScrollConnection.\u003cbr\u003eā€¢ nestedScroll\u003cbr\u003eā€¢ NestedScrollConnection\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_9_7.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-10-1 Image Touch Detection\u003c/h3\u003e\u003cbr/\u003eDetect touch position on image and get color at touch position.\u003cbr\u003eā€¢ Image\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_10_1.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e5-11 Zoomable LazyColumn\u003c/h3\u003e\u003cbr/\u003eZoom images inside a LazyColum.\u003cbr\u003eā€¢ Image\u003cbr\u003eā€¢ Zoom\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial5_11.gif\" width=200\u003e |\n| | |\n\n### Graphics\n\n| Tutorial | Preview |\n|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|\n| \u003ch3\u003e6-1-1 Canvas Basics 1\u003c/h3\u003e\u003cbr/\u003eUse canvas draw basic shapes like line, circle, rectangle, and points with different attributes such as style, stroke cap, brush.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Path Effect\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_1_1.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-1-2 Canvas Basics 2\u003c/h3\u003e\u003cbr/\u003eUse canvas to draw arc, with path effect, stroke cap, stroke join, miter and other attributes and draw images with src, dst attributes.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Path Effect\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_1_2.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-1-3 Canvas Paths\u003c/h3\u003e\u003cbr/\u003eUse canvas to draw path using absolute and relative positions, adding arc to path, drawing custom paths, progress, polygons, quads, and cubic.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Path Effect\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_1_3.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-1-4 Canvas Path Ops\u003c/h3\u003e\u003cbr/\u003eUse canvas to clip paths, or canvas using path, or rectangle with operations such as Difference, Intersect, Union, Xor, or ReverseDifference..\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ PathOperation\u003cbr\u003eā€¢ ClipOperation\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_1_4.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-1-5 Canvas Path Segments\u003c/h3\u003e\u003cbr/\u003eUse canvas to flatten Android Path to path segments and display PathSegment start and/or end points.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ PathSegment\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_1_5.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-1-6 Canvas PathEffect\u003c/h3\u003e\u003cbr/\u003eUse PathEffect such as dashedPathEffect, cornerPathEffect, chainPathEffect and stompedPathEffect to draw shapes add path effects around Composables\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Path Effect\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_1_6.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-2-1 Blend(Porter-Duff) Modes\u003c/h3\u003e\u003cbr/\u003eUse blend(Porter-Duff) modes to change drawing source/destination or clip based on blend mode ,and manipulate pixels.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Path Effect\u003cbr\u003eā€¢ BlendMode\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_2_1.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-2-3 Multi-Color VectorDrawable\u003c/h3\u003e\u003cbr/\u003eUse blend(Porter-Duff) to create multi colored VectorDrawables or VectorDrawables with fill/empty animations\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ VectorDrawable\u003cbr\u003eā€¢ BlendMode\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_2_3.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-4-2 Drawing App\u003c/h3\u003e\u003cbr/\u003eDraw to canvas using touch down, move and up events using array of paths to have erase, undo, redo actions and set properties for each path separately.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ PointerInputChange\u003cbr\u003eā€¢ BlendMode\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_4_2.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-5 Color Picker\u003c/h3\u003e\u003cbr/\u003eColor Picker that calculates angle from center and gets a color using hue and returns a color as in HSL or RGB color model.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ PointerInputChange\u003cbr\u003eā€¢ BlendMode\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_5.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-6 Scale/Translation Edit\u003c/h3\u003e\u003cbr/\u003eEditable Composable that changes position and scale when touched and dragged from handles or changes position when touched inside.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Scale\u003cbr\u003eā€¢ Translate\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ PointerInputChange\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_6.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-7 Gooey Effect\u003c/h3\u003e\u003cbr/\u003eCreate basic Gooey Effect with static circles and one with moves with touch.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ DrawScope\u003cbr\u003eā€¢ Gooey\u003cbr\u003eā€¢ Translate\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ PointerInputChange\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_7.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-8-1 Cutout Arc Shape\u003c/h3\u003e\u003cbr/\u003eUse Path.cubicTo, Path.arcTo to draw cutout shape.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Scale\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_8_1.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-9-1 Neon Glow Effect\u003c/h3\u003e\u003cbr/\u003eUse paint.asFrameworkPaint() to create blur effect to mimic neon glow \u003cbr/\u003eand infinite animation to dim and glow infinitely.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Neon\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ PointerInputChange\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_9_1.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-11 Canvas Erase Percentage\u003c/h3\u003e\u003cbr/\u003eUse blend(Porter-Duff) modes with androidx.compose.ui.graphics.Canvas to erase and compare pixels with erased Bitmap to find ou percentage of erased area.\u003cbr\u003e\u003cbr\u003eā€¢ ActualCanvas\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ AwaitPointerEventScope\u003cbr\u003eā€¢ PointerInputChange\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_11.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-12 Diagonal Price Tag\u003c/h3\u003e\u003cbr/\u003eUse Modifier.drawBehind and Modifier.composed to draw diagonal price tag with shimmer effect\u003cbr\u003e\u003cbr\u003eā€¢ TextMeasurer\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Composed\u003cbr\u003eā€¢ Brush\u003cbr\u003eā€¢ Image\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_12.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-13 Border Progress\u003c/h3\u003e\u003cbr/\u003eUse Path segments to create path with progress to display remaining time\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ PathSegment\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_13.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-14 Pie Chart\u003c/h3\u003e\u003cbr/\u003eDraw pie chart with dividers, and text between angles.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Animatable\u003cbr\u003eā€¢ TextMeasurer\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_14.png\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-15 Pie Chart with Touch Animation\u003c/h3\u003e\u003cbr/\u003eAnimate Pie Chart on touch and get data of touched section.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ Animatable\u003cbr\u003eā€¢ TextMeasurer\u003cbr\u003eā€¢ detectTapGestures\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_15.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-17 Animated Rainbow Border\u003c/h3\u003e\u003cbr/\u003eDraw animated rainbow color border using BlendMode.SrcIn and Modifier.drawWithCache\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Shape\u003cbr\u003eā€¢ BlendMode\u003cbr\u003eā€¢ Brush\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_17.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-20 PathParser and PathMeasure\u003c/h3\u003e\u003cbr/\u003eCreate Path from string and animate segments via PathMeasure.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ Path\u003cbr\u003eā€¢ PathParser\u003cbr\u003eā€¢ PathMeasure\u003cbr\u003eā€¢ PathSegment\u003cbr\u003eā€¢ animateFloatAsState\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_20.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-21 Constant Velocity Animation\u003c/h3\u003e\u003cbr/\u003eCreate constant time animation.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ animateOffsetAsState\u003cbr\u003eā€¢ animateValueAsState\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_21.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-23 Tab/Switch Animation\u003c/h3\u003e\u003cbr/\u003eCreate a Tab/Switch with fluent blending text and shadow.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ BlendMode\u003cbr\u003eā€¢ animateDpAsState\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_23.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-24 Projection change with Lerp\u003c/h3\u003e\u003cbr/\u003eAnimate projection of rotating circle between inner and outer projection with lerp function.\u003cbr\u003e\u003cbr\u003eā€¢ Canvas\u003cbr\u003eā€¢ rememberInfiniteTransition\u003cbr\u003eā€¢ animateFloatAsState\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_24.gif\" width=200\u003e |\n| | |\n| \u003ch3\u003e6-25 BeforeAfter Layout\u003c/h3\u003e\u003cbr/\u003eCreate animatable BeforeAfter layout with Generic or BlendMode.\u003cbr\u003e\u003cbr\u003eā€¢ Generic Shape\u003cbr\u003eā€¢ BlendMode\u003cbr\u003eā€¢ rememberInfiniteTransition\u003cbr\u003eā€¢ animateFloatAsState\u003cbr\u003e | \u003cimg src =\"/./screenshots/tutorial6_25.gif\" width=200\u003e |\n| | |\n\n### Stability, Skippable, Restartable\n\nAdd snippet below to app's gradle module\n\n```\nsubprojects {\n tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {\n kotlinOptions {\n if (project.findProperty(\"composeCompilerReports\") == \"true\") {\n freeCompilerArgs += [\n \"-P\",\n \"plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=\" +\n project.buildDir.absolutePath + \"/compose_compiler\"\n ]\n }\n if (project.findProperty(\"composeCompilerMetrics\") == \"true\") {\n freeCompilerArgs += [\n \"-P\",\n \"plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=\" +\n project.buildDir.absolutePath + \"/compose_compiler\"\n ]\n }\n }\n }\n}\n```\n\nAnd run task to check for compiler reports for stability inside **build/compiler_reports**\n\n```./gradlew assembleRelease -PcomposeCompilerReports=true```\n\n### Some of the answers i posted on Stackoverflow\n\n#### Composable Functions, Recomposition\n\n[Difference Between Composable and Normal Functions](https://stackoverflow.com/questions/73220189/what-are-differents-between-composable-function-and-normal-function-in-android/73261429#73261429)\u003cbr\u003e\n[What does Jetpack Compose remember actually do, how does it work under the hood?](https://stackoverflow.com/a/69961175/5457853)\u003cbr\u003e\n[Scoped/Smart Recomposition](https://stackoverflow.com/a/71016788/5457853)\u003cbr\u003e\n[Why does mutableStateOf without remember work sometimes?](https://stackoverflow.com/a/71047185/5457853)\u003cbr\u003e\n[Lambdas, Scopes, and Recomposition](https://stackoverflow.com/a/73681007/5457853)\u003cbr\u003e\n[MutableState vs MutableStateFlow](https://stackoverflow.com/a/70217911/5457853)\u003cbr\u003e\n[Destructuring MutableState](https://stackoverflow.com/a/71970915/5457853)\u003cbr\u003e\n[Does a 0dp sized composable even get composed](https://stackoverflow.com/questions/73179090/does-a-0dp-sized-composable-even-get-composed/73181512#73181512)\u003cbr\u003e\n[** Jetpack Compose - Recomposition ignoring function parameter](https://stackoverflow.com/a/73610519/5457853)\u003cbr\u003e\n[Unable to call @Composable function from remember block](https://stackoverflow.com/a/74363923/5457853)\u003cbr\u003e\n[Composable doesn't re-compose on button click](https://stackoverflow.com/a/74588794/5457853)\u003cbr\u003e\n[Jetpack Compose - avoid unnecessary recomposition](https://stackoverflow.com/a/74363723/5457853)\u003cbr\u003e\n[In compose, why modify the properties of the List element, LazyColumn does not refresh](https://stackoverflow.com/a/74506067/5457853)\u003cbr\u003e\n\n#### Composables\n\n[How to get exact size without recomposition?](https://stackoverflow.com/a/73357119/5457853)\u003cbr\u003e\n[When should I use Android Jetpack Compose Surface composable?](https://stackoverflow.com/a/73030914/5457853)\u003cbr\u003e\n[How can I select only 3 element in a grid/list (jetpack compose)?](https://stackoverflow.com/a/73501341/5457853)\u003cbr\u003e\n[Android Compose: Difference between LazyColumn and Column with verticalScroll](https://stackoverflow.com/a/73735069/5457853)\u003cbr\u003e\n[Remove default padding from CheckBox](https://stackoverflow.com/a/71609165/5457853)\u003cbr\u003e\n[How to give different color to textDecoration?](https://stackoverflow.com/a/73570822/5457853)\u003cbr\u003e\n[Jetpack compose custom snackbar material 3](https://stackoverflow.com/a/73369351/5457853)\u003cbr\u003e\n[How to place hanging icon in upper right corner of Card composable](https://stackoverflow.com/a/73182325/54578533)\u003cbr\u003e\n[Icon drawable inside IconButton is black despite it being white](https://stackoverflow.com/a/73180131/5457853)\u003cbr\u003e\n[What is clickable indication in jetpack compose?](https://stackoverflow.com/a/73175067/5457853)\u003cbr\u003e\n\n#### LaunchedEffect, SideEffect, DerivedStateOf, snapshotFlow\n\n[Using SnapshotFlow to observe MutableState changes](https://stackoverflow.com/a/69235908/5457853)\u003cbr\u003e\n[Callback function can be changed in Compose? rememberUpdatedState](https://stackoverflow.com/a/72873305/5457853)\u003cbr\u003e\n[How can I launch a function only onetime when I use Jetpack Compose?](https://stackoverflow.com/questions/72946503/how-can-i-launch-a-function-only-onetime-when-i-use-jetpack-compose/72946980#72946980)\u003cbr\u003e\n[Does lazyColumn listen for events when items enter or leave the screen](https://stackoverflow.com/a/73077507/5457853)\u003cbr\u003e\n[Why do I need use derivedStateOf in Compose?](https://stackoverflow.com/a/73132540/5457853)\u003cbr\u003e\n[Click a close button on a bottomsheet to hide it in compose](https://stackoverflow.com/a/73552425/5457853)\u003cbr\u003e\n[How to show a composable just for e few seconds?](https://stackoverflow.com/a/73333356/5457853)\u003cbr\u003e\n[What would be the most 'lightweight' way to observe current time for a an android composable?](https://stackoverflow.com/a/73333458/5457853)\u003cbr\u003e\n[Difference between remember and rememberUpdatedState in Jetpack Compose?](https://stackoverflow.com/a/70223293/5457853)\u003cbr\u003e\n[Use of LaunchedEffect vs SideEffect in jetpack compose](https://stackoverflow.com/a/73802448/5457853)\u003cbr\u003e\n[Jetpack Compose recomposition race condition](https://stackoverflow.com/a/74242627/5457853)\u003cbr\u003e\n[how can I do resend email timer LaunchedEffect](https://stackoverflow.com/a/74633185/5457853)\u003cbr\u003e\n[LaunchedEffect vs rememberCoroutineScope. This explanation makes me confused. Please make it clear to me](https://stackoverflow.com/a/72824656/5457853)\u003cbr\u003e\n[MutableState callback in non-Composable](https://stackoverflow.com/a/73347171/5457853)\u003cbr\u003e\n\n#### Modifiers\n\n[Jetpack Compose - Order of Modifiers](https://stackoverflow.com/a/74145347/5457853)\u003cbr\u003e\n[Create Custom Modifier](https://stackoverflow.com/a/70439902/5457853)\u003cbr\u003e\n[Composed Modifier](https://stackoverflow.com/a/70169164/5457853)\u003cbr\u003e\n[Why are the modifier sizes not overwritten?](https://stackoverflow.com/a/71678948/5457853)\u003cbr\u003e\n[How to achieve layout with where icon is position absolute on column layout Modifier.offset](https://stackoverflow.com/a/73091505/5457853)\u003cbr\u003e\n[Define Custom Boundaries for a Composable GraphicsLayer](https://stackoverflow.com/a/73470355/5457853)\u003cbr\u003e\n[Modifier- Is there a way to create and apply a style to multiple elements in Compose like we do with CSS](https://stackoverflow.com/a/73654523/5457853)\u003cbr\u003e\n[JetPack Compose - weight() in Row in Card doesn't work](https://stackoverflow.com/a/73643865/5457853)\u003cbr\u003e\n[How to calculate empty space in lazy column after last visible item](https://stackoverflow.com/a/74011277/5457853)\u003cbr\u003e\n[How To Get The Absolute Position Of My Composable Function/Children?](https://stackoverflow.com/a/74434621/5457853)\u003cbr\u003e\n[Use of LaunchedEffect vs SideEffect in jetpack compose](https://stackoverflow.com/a/73802448/5457853)\u003cbr\u003e\n\n#### Layout, Constraints\n\n[Creating a SearchView](https://stackoverflow.com/a/69605371/5457853)\u003cbr\u003e\n[Create custom badges with size and colorful shadows](https://stackoverflow.com/a/70143863/5457853)\u003cbr\u003e\n[How to align one item to bottom using weight or Layout](https://stackoverflow.com/a/70905004/5457853)\u003cbr\u003e\n[How to create chat bubbles](https://stackoverflow.com/a/70938029/5457853)\u003cbr\u003e\n[Custom Tabs](https://stackoverflow.com/a/71377299/5457853)\u003cbr\u003e\n[Take screenshot of a Composable](https://stackoverflow.com/a/71902319/5457853)\u003cbr\u003e\n[Make last Item of the Compose LazyColumn fill rest of the screen](https://stackoverflow.com/questions/72936954/make-last-item-of-the-compose-lazycolumn-fill-rest-of-the-screen/72937753#72937753)\u003cbr\u003e\n[Row IntrinsicSize.Min not working when the children are async loading images SubcomposeLayout](https://stackoverflow.com/a/73105010/5457853)\u003cbr\u003e\n[Observing position of item in Lazy Column in Jetpack Compose](https://stackoverflow.com/a/73148733/5457853)\u003cbr\u003e\n[Jetpack Compose width / height / size modifier vs requiredWidth / requiredHeight / requiredSize](https://stackoverflow.com/a/73316247/5457853)\u003cbr\u003e\n[Jetpack Compose - layouting reusable components](https://stackoverflow.com/a/74286507/5457853)\u003cbr\u003e\n[Can't represent a size of 357913941 in Constraints in Jetpack Compose](https://stackoverflow.com/a/74575756/5457853)\u003cbr\u003e\n[Android compose, Indicator size problem with coil](https://stackoverflow.com/a/74491759/5457853)\u003cbr\u003e\n\n#### SubcomposeLayout\n\n[How does SubcomposeLayout work?](https://stackoverflow.com/a/70383694/5457853)\u003cbr\u003e\n[How to create a Slider with SubcomposeLayout](https://stackoverflow.com/a/71792822/5457853)\u003cbr\u003e\n[Setting width of 2 buttons with SubcomposeLayout](https://stackoverflow.com/a/72940620/5457853)\u003cbr\u003e\n[How to adjust size of component to it's child and remain unchanged when it's child size will change?](https://stackoverflow.com/a/73706182/5457853)\u003cbr\u003e\n[Get information about size before is drawn in Compose](https://stackoverflow.com/a/73802696/5457853)\u003cbr\u003e\n\n#### Animation\n\n[Animating with single recomposition with Canvas](https://stackoverflow.com/a/73274631/5457853)\u003cbr\u003e\n[Android Compose create shake animation](https://stackoverflow.com/a/73631379/5457853)\u003cbr\u003e\n[Issue with jetpack compose animation performance](https://stackoverflow.com/a/74588077/5457853)\u003cbr\u003e\n[animation o a lazycolumn android](https://stackoverflow.com/a/73325826/5457853)\u003cbr\u003e\n[Rotate Animation Compose](https://stackoverflow.com/a/73291875/5457853)\u003cbr\u003e\n[How to animate Rect position with Animatable?](https://stackoverflow.com/q/73555446/5457853)\u003cbr\u003e\n\n#### Gestures\n\n[How gestures work in Jetpack Compose and onTouchEvent](https://stackoverflow.com/a/70847531/5457853)\u003cbr\u003e\n[Detect which section of image is touched](https://stackoverflow.com/a/71491531/5457853)\u003cbr\u003e\n[Detect when the user lifts their finger (off the screen)](https://stackoverflow.com/a/72210341/5457853)\u003cbr\u003e\n[How to detect the end of transform gesture in Jetpack Compose?](https://stackoverflow.com/a/72897829/5457853)\u003cbr\u003e\n[Combine detectTapGestures and detectDragGesturesAfterLongPress?](https://stackoverflow.com/a/72897829/5457853)\u003cbr\u003e\n[What is clickable indication in jetpack compose?](https://stackoverflow.com/a/73175067/5457853)\u003cbr\u003e\n[Prevent dragging box out of the screen with Jetpack Compose](https://stackoverflow.com/a/73307256/5457853)\u003cbr\u003e\n[JetPack Compose: Adding click duration](https://stackoverflow.com/a/73419818/5457853)\u003cbr\u003e\n[compose gestures, zoom in zoom out move and rotation](https://stackoverflow.com/a/73542156/5457853)\u003cbr\u003e\n[How to set Double back press Exit in Jetpack Compose?](https://stackoverflow.com/a/73754359/5457853)\u003cbr\u003e\n[Jetpack Compose detect drag gesture and detect Interaction source](https://stackoverflow.com/a/73488761/5457853)\u003cbr\u003e\n[How can one composible's clicks pass through to a composible underneath?](https://stackoverflow.com/a/73444016/5457853)\u003cbr\u003e\n\n#### Canvas, DrawScope\n\n[How to apply Porter-Duff mode to image?](https://stackoverflow.com/a/69790654/5457853)\u003cbr\u003e\n[How to create drawing app with Jetpack Compose?](https://stackoverflow.com/a/71090112/5457853)\u003cbr\u003e\n[How to create HSL saturation and lightness change gradient or brush editor with Jetpack Compose?](https://stackoverflow.com/a/71496228/5457853)\u003cbr\u003e\n[How to create Angular gradient in Jetpack compose?](https://stackoverflow.com/a/71705164/5457853)\u003cbr\u003e\n[Angled gradient background in Jetpack Compose](https://stackoverflow.com/a/71716708/5457853)\u003cbr\u003e\n[how to draw a square with stroke and neon glow with Jetpack Compose Canvas?](https://stackoverflow.com/a/72975726/5457853)\u003cbr\u003e\n[Jetpack compose Drawing over shapes in a path](https://stackoverflow.com/a/72969383/5457853)\u003cbr\u003e\n[Cubic with Canvas](https://stackoverflow.com/a/73469065/5457853)\u003cbr\u003e\n[What is the unit of Canvas's size when I use Compose?](https://stackoverflow.com/a/73233376/5457853)\u003cbr\u003e\n[How to draw a multicolored bar with Canvas in Jetpack Compose?](https://stackoverflow.com/a/73547525/5457853)\u003cbr\u003e\n[How to clip or cut a Composable with BlendModes?](https://stackoverflow.com/a/73590696/5457853)\u003cbr\u003e\n[How to center Text in Canvas in Jetpack compose?](https://stackoverflow.com/a/73352227/5457853)\u003cbr\u003e\n[How to divide the stroke of a circle at equal intervals in Jetpack compose canvas?](https://stackoverflow.com/a/73677601/5457853)\u003cbr\u003e\n[Jetpack compose custom shape with pie effect](https://stackoverflow.com/a/73950607/5457853)\u003cbr\u003e\n[How to apply PathEffect without using Stroke with Jetpack Compose?](https://stackoverflow.com/a/74327086/5457853)\u003cbr\u003e\n[Jetpack Compose - CardView with Arc Shape on border](https://stackoverflow.com/a/74285035/5457853)\u003cbr\u003e\n[Jetpack Compose: how to cut out card shape?](https://stackoverflow.com/a/74076087/5457853)\u003cbr\u003e\n[Jetpack Compose: How to create a rating bar?](https://stackoverflow.com/a/73996333/5457853)\u003cbr\u003e\n[Watermark or write on Bitmap with androidx.compose.ui.graphics.Canvas?](https://stackoverflow.com/a/74603521/5457853)\u003cbr\u003e\n[Image Cropper](https://stackoverflow.com/a/73819758/5457853)\u003cbr\u003e\n[Vertical scroll on Canvas (Jetpack Compose)](https://stackoverflow.com/a/73225175/5457853)\u003cbr\u003e\n[Why can I draw a line out of the canvas when I use Jetpack Compose?](https://stackoverflow.com/a/73303026/5457853)\u003cbr\u003e\n[implement a spinning activity indicator with Jetpack Compose](https://stackoverflow.com/a/74199392/5457853)\u003cbr\u003e\n\n### Resources and References\n\n[Codelab Jetpack Compose Basics](https://developer.android.com/codelabs/jetpack-compose-basics)\n\u003cbr\u003e\n[Codelab Jetpack Compose Layouts](https://developer.android.com/codelabs/jetpack-compose-layouts?hl=en#0)\n\u003cbr\u003e\n[Codelab Jetpack Compose States](https://developer.android.com/codelabs/jetpack-compose-state?hl=en#0)\n\u003cbr\u003e\n[Codelab Jetpack Compose Advanced State](https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects?hl=en#0)\n\u003cbr\u003e\n[Developer Android](https://developer.android.com/jetpack/compose/mental-model)\n\u003cbr\u003e\n[Developer Android Material](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#theming)\n\u003cbr\u003e\n[Jetpack Compose Samples](https://github.com/android/compose-samples)\n\u003cbr\u003e\n[Under the hood of Jetpack Compose ā€” part 2 of 2- Leland Richardson](https://medium.com/androiddevelopers/under-the-hood-of-jetpack-compose-part-2-of-2-37b2c20c6cdd)\n\u003cbr\u003e\n[What is ā€œdonut-hole skippingā€ in Jetpack Compose?-Vinay Gaba](https://www.jetpackcompose.app/articles/donut-hole-skipping-in-jetpack-compose)\n\u003cbr\u003e\n[Android Graphics](https://developer.android.com/jetpack/compose/graphics)\n\u003cbr\u003e\n[Playing with Paths-Nick Butcher](https://medium.com/androiddevelopers/playing-with-paths-3fbc679a6f77)\n\u003cbr\u003e\n[Custom Shape with Jetpack Compose-Julien Salvi](https://juliensalvi.medium.com/custom-shape-with-jetpack-compose-1cb48a991d42)\n\u003cbr\u003e\n[Porter Duff Mode](https://developer.android.com/reference/android/graphics/PorterDuff.Mode)\n\u003cbr\u003e\n[Porter/Duff Compositing and Blend Modes](http://ssp.impulsetrain.com/porterduff.html)\n\u003cbr\u003e\n[Practical Image PorterDuff Mode Usage in Android-Elye](https://medium.com/mobile-app-development-publication/practical-image-porterduff-mode-usage-in-android-3b4b5d2e8f5f)\n\u003cbr\u003e\n[Android Image Lighting Control and Color Filtering-Elye](https://medium.com/mobile-app-development-publication/android-image-lighting-control-and-color-filtering-89f51a139a79)\n\u003cbr\u003e\n[Android Image Color Change With ColorMatrix-Elye](https://medium.com/mobile-app-development-publication/android-image-color-change-with-colormatrix-e927d7fb6eb4)\n\u003cbr\u003e\n[Manipulating images and Drawables with Androidā€™s ColorFilter-Nick Rout](https://medium.com/over-engineering/manipulating-images-and-drawables-with-androids-colorfilter-25bf061843e7)\n\u003cbr\u003e\n[Curved (Cut out) Bottom Navigation With Animation in Android](https://medium.com/swlh/curved-cut-out-bottom-navigation-with-animation-in-android-c630c867958c)\n\u003cbr\u003e\n[Gooey Effect Using Canvas API In Android](https://laewoong.github.io/android-gooey-effect/)\n\u003cbr\u003e\n[movableContentOf and movableContentWithReceiverOf-Jorge Castillo](https://newsletter.jorgecastillo.dev/p/movablecontentof-and-movablecontentwithreceivero)\n\u003cbr\u003e\n[Jetpack Compose Stability Explained-Ben Trengrove](https://medium.com/androiddevelopers/jetpack-compose-stability-explained-79c10db270c8)\n\u003cbr\u003e\n[Composable metrics-Chris Banes](https://chrisbanes.me/posts/composable-metrics/)\n\u003cbr\u003e\n[Creating a particle explosion animation in Jetpack Compose-Omkar Tenkale](https://proandroiddev.com/creating-a-particle-explosion-animation-in-jetpack-compose-4ee42022bbfa)\n\u003cbr\u003e\n\n","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSmartToolFactory%2FJetpack-Compose-Tutorials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSmartToolFactory%2FJetpack-Compose-Tutorials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSmartToolFactory%2FJetpack-Compose-Tutorials/lists"}