From e8540788057ce0e56f4557b42d968eb2befecc4c Mon Sep 17 00:00:00 2001 From: Krunal Patel Date: Wed, 26 Jun 2024 18:29:30 +0530 Subject: [PATCH] Add/Fix links to code files and write description in corresponding .md file --- README.md | 215 +++++-------------------- pages/Animation.md | 88 +++++++++++ pages/Canvas.md | 152 ++++++++++++++++++ pages/Components.md | 324 ++++++++++++++++++++++++++++++++++++++ pages/ConstraintLayout.md | 14 ++ pages/GoogleMaps.md | 39 +++++ pages/InstagramCloneUI.md | 7 + pages/List.md | 34 ++++ pages/PullToRrefresh.md | 14 ++ pages/SwipeToDelete.md | 10 ++ pages/ViewPager.md | 34 ++++ 11 files changed, 758 insertions(+), 173 deletions(-) create mode 100644 pages/Animation.md create mode 100644 pages/Canvas.md create mode 100644 pages/Components.md create mode 100644 pages/ConstraintLayout.md create mode 100644 pages/GoogleMaps.md create mode 100644 pages/InstagramCloneUI.md create mode 100644 pages/List.md create mode 100644 pages/PullToRrefresh.md create mode 100644 pages/SwipeToDelete.md create mode 100644 pages/ViewPager.md diff --git a/README.md b/README.md index 3e277f8..402223e 100644 --- a/README.md +++ b/README.md @@ -15,174 +15,50 @@ A Collection of major Jetpack compose UI components which are commonly used. In this repository, there are number of UI components demonstrated which can be useful in regular development through Jetpack Compose. -## Prerequisites -- Experience with Kotlin syntax, including lambdas +## Content -## What you'll need -- [Latest Stable Android Studio](https://developer.android.com/studio) -- [Google Maps Key](https://developers.google.com/maps/documentation/android-sdk/get-api-key) - -## Setup (For Google Map Implementation) -To run the google map samples, you'll have to: - -1. Get a Maps API key -2. Add an entry in `local.properties` or `local.defaults.properties` that looks like `MAPS_API_KEY=YOUR_MAPS_KEY` -3. Build and run - -## Components - -| App Bar | Bottom Navigation | Button | -| -- | -- | -- | -| | | - -| Checkbox | Dialog | Dropdown | -| -- | -- | -- | -| | | - -| FAB | Modal Drawer | Bottom Drawer | -| -- | -- | -- | -| | | - -| Radio Button | Slider | Text | -| -- | -- | -- | -| | | - -| Textfield | Theme | ZoomView | -| -- | -- | -- | -| | | - -| Textfield | Theme | MagnifierView | -| -- | -- | -- | -| | | - -| TabBar | DatePicker | TimePicker | -| -- | -- | -- | -| | | - -| ImagePicker | ParallaxEffect | Compose views in Xml | -| -- | -- | -- | -| | | | - -| XML views in Compose | -| -- | -| | - -## List - -| LazyRow/Column | LazyVerticalGrid | Advance List | -| -- | -- | -- | -| | | - -## Pull To Refresh -| Simple Pull To Refresh | Custom Background Pull To Refresh | Custom View Pull To Refresh | -| -- | -- | -- | -| | | - -## Swipe To Delete -| Swipe Left | Swipe Right | Swipe Left + Right | -| -- | -- | -- | -| | | - -## Constraint Layout - -| Barrier | Guideline | Chain | -| -- | -- | -- | -| | | +- [UI Components] - Contains App Bar, Bottom Navigation, Button, Checkbox, Dialog, Dropdown, FAB, Modal Drawer, Bottom Drawer, Radio Button, Slider, Text, TextField, Theme, ZoomView, MagnifierView, TabBar, DatePicker, TimePicker, ImagePicker, ParallaxEffect, Compose viewXml and XML views in Compose examples. +- [List] - Contains LazyRow/Column, LazyVerticalGrid and Advance List examples. -## Animation +- [Pull To refresh] - Contains Simple Pull To Refresh, Custom Background Pull To Refresh and Custom View Pull To Refresh examples. -| Basic | Content | Gesture | -| -- | -- | -- | -| | | +- [Swipe To Delete] - Contains Swipe from Left, Swipe from Right and Swipe from Both examples. -| Infinite | Shimmer | TabBar | -| -- | -- | -- | -| | | +- [Constraint Layout] - Contains Barrier, Chain and Guideline examples. -## Sample UI +- [Animation] - Contains Basic Animation, Content Animation, Gesture Animation, Infinite Animation, Shimmer Animation and TabBar Animation examples. -| Instagram | -| -- | -| | +- [Sample Instagram UI] - Contains a sample UI for Instagram Clone App created using Jetpack Compose. -## Canvas +- [Canvas] - Contains Shapes, Text and Image, Paths, Path Operations, Draw Scope Helpers, Canvas + Touch and Blend Modes examples. -| Overview | Shapes | Text and Image | -| -- | -- | -- | -| | | | +- [Google Maps] - Contains Basic Map, Markers, Polyline, Polygon, Circle, Ground Overlay, Compose Map In XML etc. examples. -| Path | Path Operations | DrawScope Helpers | -| -- | -- | -- | -| | | | +- [ViewPager] - Contains Horizontal Pager, Horizontal Pager with Tabs, Horizontal Pager with Indicator, Vertical Pager with Indicator, Pager with Zoom-in Transformation, Pager with Fling Behavior and Add/Remove Pager examples. -| Canvas + Touch | Blend Modes | Basic Example | -| -- | -- | -- | -| | | | - -| Android 11 Easter Egg | -| -- | -| | - -## Google Maps - -| Basic | Marker | Polyline | -| -- | -- | -- | -| | | - -| Polygon | Circle | Ground Overlay | -| -- | -- | -- | -| | | - -| Tile Overlay | Indoor Level | Lite Map | -| -- | -- | -- | -| | | - -| Place Picker | Navigation Viewer | Projection | -| -- | -- | -- | -| | | - -| Cluster | Heat Map | KML | -| -- | -- | -- | -| | | - -| GeoJSON | ScaleBar | Snapshot | -| -- | -- | -- | -| | | - -| Map in scrollable view | Compose Map In XML | -| -- | -- | -| | | - -## ViewPager - -| Horizontal Pager | Horizontal Pager with Tabs | Horizontal Pager with indicator | -| -- | -- | -- | -| | | | - -| Vertical Pager with indicator | Pager with Zoom-in
transformation | Pager with Fling Behavior | -| -- | -- | -- | -| | | | - -| Add/Remove pager | -| -- | -| | +## What you'll need -## Coming Up -- Navigation -- Theme enhancement +- [Latest Stable Android Studio](https://developer.android.com/studio) +- [Google Maps Key](https://developers.google.com/maps/documentation/android-sdk/get-api-key) - Learn how to create and use API key for Maps SDK integration. +- [Setup Google Maps API Key](pages/GoogleMaps.md) ## Our Libraries in JetPackCompose + - [SSJetPackComposeProgressButton](https://github.com/SimformSolutionsPvtLtd/SSJetPackComposeProgressButton) : SSJetPackComposeProgressButton is an elegant button with a different loading animations which makes your app attractive. - [SSJetpackComposeSwipeableView](https://github.com/SimformSolutionsPvtLtd/SSJetpackComposeSwipeableView) : SSJetpackComposeSwipeableView is a small library which provides support for the swipeable views. You can use this in your lazyColumns or can add a simple view which contains swipe to edit/delete functionality. - [SSComposeOTPPinView](https://github.com/SimformSolutionsPvtLtd/SSComposeOTPPinView) : A custom OTP view to enter a code usually used in authentication. It includes different types of OTPViews which is easy to use and configure your own view and character of OTP using all the attributes. +- [SSCompose-CustomInfoBar](https://github.com/SimformSolutionsPvtLtd/SSCompose-CustomInfoBar) : This Jetpack Compose library offers a powerful and customizable way to display informative messages within your app. +- [SSCompose-FurniCraftAR](https://github.com/SimformSolutionsPvtLtd/SSCompose-FurniCraftAR) : This demo is created using Jetpack compose and Google Filament and ARCore for seamless 3D model rendering in AR view. In which users can browse a list of furniture products, select a product to view in AR, customize the color of the model, capture the AR scene with the placed furniture model, and share it with others. ## Official Documentations + - [Jetpack Compose](https://developer.android.com/jetpack/compose) - [Jetpack Compose Pathways](https://developer.android.com/courses/pathways/compose) - [Jetpack Compose Samples](https://github.com/android/compose-samples) ## Find this samples useful? ❤️ + Support it by joining __[stargazers]__ for this repository.⭐ ## How to Contribute🤝 @@ -191,9 +67,11 @@ Whether you're helping us fix bugs, improve the docs, or a feature request, we'd Check out our __[Contributing Guide]__ for ideas on contributing. ## Bugs and Feedback + For bugs, feature requests, and discussion please use __[GitHub Issues]__. ## Awesome Mobile Libraries + - Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries) ## Main Contributors @@ -217,32 +95,23 @@ For bugs, feature requests, and discussion please use __[GitHub Issues]__.
## License -``` -MIT License - -Copyright (c) 2022 Simform Solutions - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. -``` - -[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax) - [git-repo-url]: - [stargazers]: - [Contributing Guide]: - [GitHub Issues]: +Distributed under the MIT License. See [LICENSE] for details. + + +[git-repo-url]: https://github.com/SimformSolutionsPvtLtd/SSComposeCookBook.git +[stargazers]: https://github.com/SimformSolutionsPvtLtd/SSComposeCookBook/stargazers +[Contributing Guide]: https://github.com/SimformSolutionsPvtLtd/SSComposeCookBook/blob/main/CONTRIBUTING.md +[GitHub Issues]: https://github.com/SimformSolutionsPvtLtd/SSComposeCookBook/issues + + +[LICENSE]: /LICENSE +[UI Components]: ./pages/Components.md +[List]: pages/List.md +[Pull To refresh]: pages/PullToRrefresh.md +[Swipe To Delete]: pages/SwipeToDelete.md +[Constraint Layout]: pages/ConstraintLayout.md +[Animation]: pages/Animation.md +[Sample Instagram UI]: pages/InstagramCloneUI.md +[Canvas]: pages/Canvas.md +[Google Maps]: pages/GoogleMaps.md +[ViewPager]: pages/ViewPager.md \ No newline at end of file diff --git a/pages/Animation.md b/pages/Animation.md new file mode 100644 index 0000000..1d6a891 --- /dev/null +++ b/pages/Animation.md @@ -0,0 +1,88 @@ +# Animation + +The Animations section of the Jetpack Compose Cookbook is designed to enhance your app's user experience with dynamic and engaging animations. Jetpack Compose provides a flexible and intuitive API to create a range of animations, making your UI elements not only interactive but also visually appealing. + +| Basic | Content | Gesture | +| -- | -- | -- | +| | | | + +## Basic Animation + +Learn how to create fundamental animations for the actions like: + +- [Change in color][AnimateAsStateChangeColor] +- [Change in *color* with *size*][AnimateAsStateChangeColorWithSize] +- [Show or hide composable view][AnimatedVisibilityDemo] +- [Rotation of the view][RotatingSquareComponent] + +## Conent Animation + +A sudden change in content without animation can be jarring and disrupt the user experience. Discover how to smooth out these transitions with animations: + +- [Animate the change in size and content of a composable][ContentWithIconAnimation] +- [Create animations that expand short text into longer content and vice versa][ContentAnimation] +- [FAB Button Expansion and Collapse Animation][TabFloatingActionButton] + +These techniques will make content updates feel more seamless and engaging. + +## Gesture Animation + +Gesture animations bring a touch of fluidity and responsiveness to user interactions. By incorporating animations that react to gestures, you can create a more intuitive and engaging user experience. + +- [Implement swipe to delete with animation][SwipeToDelete] + +| Infinite | Shimmer | TabBar | +| -- | -- | -- | +| | | | + +## Infinite Animation + +Infinite animations provide continuous and seamless effects, ideal for capturing user attention. Let's implement some indefinite animation + +- [Change color with animation indefinitely][InfiniteAnimation] + +## Shimmer Animation + +Shimmer animations add a polished touch to loading states, creating an engaging visual effect while content is being loaded. + +- [Learn how to impelement shinmmer effect][ShimmerAnimation] + +## TabBar Animation + +- [Animate tab bar changes][TabBar] + +## Other References + +- **[Choose an animation API]** - Decide which animation API fits your needs based on your use case. + +- **[Material Design Motion]** - Principles of motion design according to Material Design guidelines, useful for creating consistent and engaging animations. + + + +[AnimateAsStateChangeColor]: /app/src/main/java/com/jetpack/compose/learning/animation/basic/ChangeColorAnimationWithState.kt#L27 + +[AnimateAsStateChangeColorWithSize]: /app/src/main/java/com/jetpack/compose/learning/animation/basic/ChangeColorAnimationWithState.kt#L50 + +[AnimatedVisibilityDemo]: /app/src/main/java/com/jetpack/compose/learning/animation/basic/VisibilityAnimation.kt#L34 + +[RotatingSquareComponent]: /app/src/main/java/com/jetpack/compose/learning/animation/basic/RotateViewAnimation.kt#L23 + +[ContentWithIconAnimation]: /app/src/main/java/com/jetpack/compose/learning/animation/contentAnimation/ContentIconAnimationActivity.kt#L88 + +[ContentAnimation]: /app/src/main/java/com/jetpack/compose/learning/animation/contentAnimation/ContentAnimation.kt#L40 + +[TabFloatingActionButton]: /app/src/main/java/com/jetpack/compose/learning/animation/contentAnimation/FabButtonWithContent.kt#L21 + +[SwipeToDelete]: /app/src/main/java/com/jetpack/compose/learning/animation/SwipeToDelete.kt#L53 + +[InfiniteAnimation]: /app/src/main/java/com/jetpack/compose/learning/animation/InfiniteTransitionActivity.kt#L59 + +[ShimmerAnimation]: /app/src/main/java/com/jetpack/compose/learning/animation/ShimmerAnimationActivity.kt + +[TabBar]: /app/src/main/java/com/jetpack/compose/learning/animation/Tabbar.kt + + + +[Choose an animation API]: https://developer.android.com/develop/ui/compose/animation/choose-api + +[Material Design Motion]: https://m3.material.io/styles/motion/overview diff --git a/pages/Canvas.md b/pages/Canvas.md new file mode 100644 index 0000000..5e36954 --- /dev/null +++ b/pages/Canvas.md @@ -0,0 +1,152 @@ +# Canvas + +The Canvas API in Jetpack Compose allows for custom drawing within your app. It provides a powerful and flexible way to create complex graphics, animations, and visual effects. + +| Overview | Shapes | Text and Image | +| -- | -- | -- | +| | | | + +## Shapes + +Learn how to draw basic shapes such as circles, rectangles, and lines. The Canvas API provides a variety of functions to create and customize these shapes. + +- [Line Shape] +- [Circle Shape] +- [Arc Shape] +- [Rectangle Shape] +- [Outline Shape] + +## Text And Image + +Explore how to render text and images on the Canvas. This includes positioning, styling, and scaling to fit your design needs. + +- [Text] +- [Image 1] +- [Image 2] + +| Path | Path Operations | DrawScope Helpers | +| -- | -- | -- | +| | | | + +## Paths + +Paths allow you to create complex shapes by defining a series of points and lines. Learn how to create and manipulate paths to draw intricate designs. + +- [Basic Path] +- [With Shapes] +- [Any Polygon] +- [Any Polygon With Progress] + +## Path Operations + +Explore various Canvas path operations. This section covers all operations related to paths with different shapes, demonstrating how to combine, intersect, and subtract paths to create complex graphical effects. + +- [Path Operations] + +## Draw Scope Helper + +Discover examples of various Canvas draw scope operations. This section includes examples related to insets, translate, rotate, scale, clip path, and clip rect, demonstrating how to enhance your drawing capabilities. + +- [Insets] +- [Translate] +- [Rotate] +- [Clip Path] +- [Clip Rect] + +| Canvas + Touch | Blend Modes | Basic Example | +| -- | -- | -- | +| | | | + +## Canvas + Touch + +Implement touch interactions with the Canvas to create a free draw board. Users can draw anything with different stroke properties, making the drawings dynamic and interactive. + +- [With Drag] +- [With Pointer Loop] +- [On Image] + +## Blend Modes + +Discover how to use blend modes on the Canvas with shapes and images. This section provides examples of combining colors and shapes in different ways to create various visual effects. + +- [With Shapes] +- [With Shape and Image] +- [With Shape and Image 2] +- [With Images] + +## Basic Example + +- [Basic Example] +- [Progress Indicator] +- [Gauge Meter] + +| Android 11 Easter Egg | +| -- | +| | + +## Android 11 Easter Egg + +Draw ester egg animation. + +- [Easter Egg] + + + +[Line Shape]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasShapesActivity.kt#L99 + +[Circle Shape]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasShapesActivity.kt#L219 + +[Arc Shape]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasShapesActivity.kt#L319 + +[Rectangle Shape]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasShapesActivity.kt#L438 + +[Outline Shape]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasShapesActivity.kt#L544 + +[Text]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasTextImageActivity.kt# + +[Image 1]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasTextImageActivity.kt#L207 + +[Image 2]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasTextImageActivity.kt#L291 + +[Basic Path]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasPathsActivity.kt#L95 + +[With Shapes]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasPathsActivity.kt#L202 + +[Any Polygon]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasPathsActivity.kt#L315 + +[Any Polygon With Progress]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasPathsActivity.kt#L432 + +[Path Operations]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasPathOperationActivity.kt#L90 + +[Insets]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasDrawScopeOperationActivity.kt#L117 + +[Translate]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasDrawScopeOperationActivity.kt#L158 + +[Rotate]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasDrawScopeOperationActivity.kt#L188 + + +[Clip Path]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasDrawScopeOperationActivity.kt#L225 + +[Clip Rect]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasDrawScopeOperationActivity.kt#L298 + +[With Drag]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasTouchOperationActivity.kt#L130 + +[With Pointer Loop]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasTouchOperationActivity.kt#L222 + +[On Image]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasTouchOperationActivity.kt#:312 + +[With Shapes]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasBlendModesActivity.kt#L126 + +[With Shape and Image]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasBlendModesActivity.kt#L160 + +[With Shape and Image 2]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasBlendModesActivity.kt#L209 + +[With Images]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasBlendModesActivity.kt#L286 + +[Basic Example]: /app/src/main/java/com/jetpack/compose/learning/canvas/BasicCanvasExampleActivity.kt#L131 + +[Progress Indicator]: /app/src/main/java/com/jetpack/compose/learning/canvas/BasicCanvasExampleActivity.kt#L178 + +[Gauge Meter]: /app/src/main/java/com/jetpack/compose/learning/canvas/BasicCanvasExampleActivity.kt#L231 + +[Easter Egg]: /app/src/main/java/com/jetpack/compose/learning/canvas/CanvasAndroidEasterEggActivity.kt#L95 diff --git a/pages/Components.md b/pages/Components.md new file mode 100644 index 0000000..ace328a --- /dev/null +++ b/pages/Components.md @@ -0,0 +1,324 @@ +# Components + +Explore the various UI components available in Jetpack Compose and how to use them in your applications. + +| App Bar | Bottom Navigation | Button | +| -- | -- | -- | +| | | | + +## App Bar + +App bar provides a consistent layout for the top of the screen, typically used for branding, navigation, and actions. Find examples of how app bar can be implemented with different styles. + +- [Simple App Bar with no actions] +- [App Bar with Left icon action] +- [App Bar with Right icon action] +- [App Bar with Right amd Left icon action] +- [App Bar with multiple Right icon action] +- [Custom App Bar with Left icon action and Title text in Center] + +## Bottom Navigation + +A navigation component placed at the bottom of the screen, allowing users to quickly switch between primary destinations in an app. + +- [Bottom navigation bar] + +## Button + +- [Various button styles] + +| Checkbox | Dialog | Dropdown | +| -- | -- | -- | +| | | | + +## Checkbox + +A component that allows users to make a binary choice, typically used in forms and lists. + +- [Check box with different styles] + +## Dialog + +This example demonstrates implementing two types of dialogs in Jetpack Compose: a standard AlertDialog and a customizable dialog. The DialogActivity manages dialog states, such as whether the dialog can be dismissed with a back press or outside click. The UI provides options to open these dialogs and showcases how to customize them, including setting titles, content, and buttons. + +- [Check dialog activity] + +## Dropdown + +This code demonstrates various dropdown menu implementations in Jetpack Compose. It includes simple dropdowns, dropdowns with custom background colors, dropdowns with icons, and disabled dropdowns. The DropDownMenuActivity manages the state of these dropdowns and displays them with different configurations, offering examples of how to customize their appearance and behavior. + +- [Simple dropdown] + +- [Custom background color dropdown] + +- [Custom dropdown with icons in dropdown item]: + +- [Disable selection dropdown]: + +| FAB | Modal Drawer | Bottom Drawer | +| -- | -- | -- | +| | | | + +## FAB + +The code showcases different styles of Floating Action Buttons (FABs) in Jetpack Compose, including simple, custom-colored, square-shaped, and extended FABs with or without icons. It uses a `Scaffold` layout in `FloatingActionButtonActivity` to manage these FABs and demonstrates customization and user interaction handling in the `FabButtons` composable. + +- [Simple FAB] +- [FAB custom color] +- [Square FAB] +- [Simple FAB with custom content (similar of Exntended FAB)] +- [Extentded FAB] +- [Extentded FAB wihout icon] +- [Extentded FAB wihout square shape] + +## Modal Drawer + +A drawer that slides in from the side and overlays the content, typically used for navigation. + +- [Model drawer example] + +## Bottom Drawer + +A drawer that slides up from the bottom of the screen, providing additional content or actions. + +- [Bottom drawer example] + +| Radio Button | Slider | Text | +| -- | -- | -- | +| | | | + +## Radio Button + +- [Simple Radio Button with Label] +- [Disabled Radio Button] +- [Disabled selected Radio Button] +- [Custom selected color Radio Button] +- [Custom unselected color Radio Button] + +## Slider + +The SliderActivity demonstrates various types of sliders in Jetpack Compose, including continuous, discrete, and range sliders with custom styling. It uses remember and mutableStateOf to manage slider states within a themed UI. + +- [Continuous Slider] +- [Discrete Slider with custom color] +- [Range Continuous Slider] +- [Range Discrete Slider] + +## Text + +The Text Styles showcases different text styles in Jetpack Compose, featuring various font sizes, weights, and colors. Dive into expressive typography with headers, captions, and body text, all styled dynamically to enhance readability and visual appeal. + +- [Different text styles] + +| Textfield | Theme | ZoomView | +| -- | -- | -- | +| | | | + +## Textfield + +A text field that enables users to input and edit text, offering a versatile component for various forms and data entry tasks. + +- [Basic Textfield which does not contain placeholder or any decorations] +- [Simple textfield With label and placeholder] +- [Textfield with different coloured text input] +- [Simple Outlined textfield without placeholder] +- [Phone number textfield with max length as 10] +- [Outlined Password textfield Without label] + +## Theme + +ThemeActivity allows users to select a color theme for the screen. It features a grid of color options that update the app's theme on selection, providing a visual preview with a checkmark to indicate the current selection. + +- [Theme Activity] + +## ZoomView + +ZoomViewActivity provides an interactive zoomable image view. Users can pinch to zoom and drag to pan across the image, with changes in scale and position reflected in real-time. + +- [Zoom View Activity] + +| MagnifierView | TabBar | DatePicker | +| -- | -- | -- | +| | | | + +## MagnifierView + +The MagnifierViewActivity demonstrates an image with a magnifier effect that adjusts based on user touch. It uses pointerInteropFilter to update the magnifier's size and position, with a zoom factor of 2x. The magnifier follows the user's touch, enlarging the image in the touched area and disappearing when the touch is lifted. + +- [Magnifier View] + +## TabBar + +This code demonstrates various implementations of tab bars using Jetpack Compose, including simple text tabs, icon tabs with indicators, and more complex layouts with text, icons, indicators, and dividers. It includes both fixed and scrollable tab bars with customizable appearance and behavior. + +- [Simple text tabBar] + +- [Simple Icon tabBar with indicator] + +- [TabBar with text,icon,indicator and divider] + +- [Scrollable icon tabBar] + +- [Scrollable tabBar with text,icon and divider] + +## DatePicker + +A component that lets users select a date from a calendar view. + +- [Date Picker View] + +| TimePicker | ImagePicker | ParallaxEffect | +| -- | -- | -- | +| | | | + +## TimePicker + +A component that allows users to select a specific time. + +- [Time Picker View] + +## ImagePicker + +A component for selecting images from the device's gallery or camera. + +- [Image Picker View] + +## ParallaxEffect + +A visual effect where background content moves at a different speed than foreground content, creating a sense of depth. + +- [ParallaxEffect View] + +| Compose views in Xml | XML views in Compose | +| -- | -- | +| | | + +## Compose views in Xml + +We might need to migrate from XML to Jetpack Compose, but doing so all at once may not be feasible. We can achieve this gradually by embedding Compose components within XML layouts and XML views within Compose, allowing for a seamless transition. + +- [Compose In Xml] + +## XML views in Compose + +Similar to Compose in XML we can use XML views in Compose. + +- [Xml in Compose] + +## Other References + +Checkout some other cool stuff for components of Jetpack Compose. + +- [Building an Exploding FAB Transition With Jetpack Compose] + + + +[Simple App Bar with no actions]: /app/src/main/java/com/jetpack/compose/learning/appbar/TopAppBarActivity.kt#L56 + +[App Bar with Left icon action]: /app/src/main/java/com/jetpack/compose/learning/appbar/TopAppBarActivity.kt#L63 + +[App Bar with Right icon action]: /app/src/main/java/com/jetpack/compose/learning/appbar/TopAppBarActivity.kt#L81 + +[App Bar with Right amd Left icon action]: /app/src/main/java/com/jetpack/compose/learning/appbar/TopAppBarActivity.kt#L99 + +[App Bar with multiple Right icon action]: /app/src/main/java/com/jetpack/compose/learning/appbar/TopAppBarActivity.kt#L128 + +[Custom App Bar with Left icon action and Title text in Center]: /app/src/main/java/com/jetpack/compose/learning/appbar/TopAppBarActivity.kt#L158 + +[Bottom navigation bar]: /app/src/main/java/com/jetpack/compose/learning/bottomnav/BottomNavigationActivity.kt#L69 + +[Various button styles]: /app/src/main/java/com/jetpack/compose/learning/button/ButtonActivity.kt#L43 + +[Check box with different styles]: /app/src/main/java/com/jetpack/compose/learning/checkbox/CheckBoxActivity.kt#L50 + +[Check dialog activity]: /app/src/main/java/com/jetpack/compose/learning/dialog/DialogActivity.kt#L51 + +[Simple dropdown]: /app/src/main/java/com/jetpack/compose/learning/dropdownmenu/DropDownMenuActivity.kt#L119C16-L119C31 + +[Custom background color dropdown]: /app/src/main/java/com/jetpack/compose/learning/dropdownmenu/DropDownMenuActivity.kt#L152C16-L152C48 + +[Custom dropdown with icons in dropdown item]: /app/src/main/java/com/jetpack/compose/learning/dropdownmenu/DropDownMenuActivity.kt#L187 + +[Disable selection dropdown]: /app/src/main/java/com/jetpack/compose/learning/dropdownmenu/DropDownMenuActivity.kt#L187 + +[Simple FAB]: /app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt#L86C15-L86C25 + +[FAB custom color]: /app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt#L93C15-L93C31 + +[Square FAB]: /app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt#L104 + +[Simple FAB with custom content (similar of Exntended FAB)]: /app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt#L114C15-L114C72 + +[Extentded FAB]: /app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt#L131 + +[Extentded FAB wihout icon]: /app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt#L140 + +[Extentded FAB wihout square shape]: /app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt#L140 + +[Model drawer example]: /app/src/main/java/com/jetpack/compose/learning/navigationdrawer/ModalDrawerActivity.kt#L69 + +[Bottom drawer example]: /app/src/main/java/com/jetpack/compose/learning/navigationdrawer/BottomDrawerActivity.kt#L50 + +[Simple Radio Button with Label]: /app/src/main/java/com/jetpack/compose/learning/radiobutton/RadioButtonActivity.kt#L91C20-L91C50 + +[Disabled Radio Button]: /app/src/main/java/com/jetpack/compose/learning/radiobutton/RadioButtonActivity.kt#L107C20-L107C41 + +[Disabled selected Radio Button]: /app/src/main/java/com/jetpack/compose/learning/radiobutton/RadioButtonActivity.kt#L121C20-L121C50 + +[Custom selected color Radio Button]: /app/src/main/java/com/jetpack/compose/learning/radiobutton/RadioButtonActivity.kt#L131 + +[Custom unselected color Radio Button]: /app/src/main/java/com/jetpack/compose/learning/radiobutton/RadioButtonActivity.kt#L149 + +[Continuous Slider]: /app/src/main/java/com/jetpack/compose/learning/slider/SliderActivity.kt#L62 + +[Discrete Slider with custom color]: /app/src/main/java/com/jetpack/compose/learning/slider/SliderActivity.kt#L84 + +[Range Continuous Slider]: /app/src/main/java/com/jetpack/compose/learning/slider/SliderActivity.kt#L104 + +[Range Discrete Slider]: /app/src/main/java/com/jetpack/compose/learning/slider/SliderActivity.kt#L122 + +[Different text styles]: /app/src/main/java/com/jetpack/compose/learning/textstyle/SimpleTextActivity.kt#L79x + +[Basic Textfield which does not contain placeholder or any decorations]: /app/src/main/java/com/jetpack/compose/learning/textfield/TextFieldActivity.kt#L103 + +[Simple textfield With label and placeholder]: /app/src/main/java/com/jetpack/compose/learning/textfield/TextFieldActivity.kt#L124 + +[Textfield with different coloured text input]: /app/src/main/java/com/jetpack/compose/learning/textfield/TextFieldActivity.kt#L139 + +[Simple Outlined textfield without placeholder]: /app/src/main/java/com/jetpack/compose/learning/textfield/TextFieldActivity.kt#L158 + +[Phone number textfield with max length as 10]: /app/src/main/java/com/jetpack/compose/learning/textfield/TextFieldActivity.kt#L173 + +[Outlined Password textfield Without label]: /app/src/main/java/com/jetpack/compose/learning/textfield/TextFieldActivity.kt#L192 + +[Theme Activity]: /app/src/main/java/com/jetpack/compose/learning/theme/ThemeActivity.kt#L58 + +[Zoom View Activity]: /app/src/main/java/com/jetpack/compose/learning/zoomview/ZoomViewActivity.kt#L70 + +[Magnifier View]: /app/src/main/java/com/jetpack/compose/learning/magnifierview/MagnifierViewActivity.kt#L90 + +[Simple text tabBar]: /app/src/main/java/com/jetpack/compose/learning/tabarlayout/TabBarLayoutActivity.kt#L84 + +[Simple Icon tabBar with indicator]: /app/src/main/java/com/jetpack/compose/learning/tabarlayout/TabBarLayoutActivity.kt#L06 + +[TabBar with text,icon,indicator and divider]: /app/src/main/java/com/jetpack/compose/learning/tabarlayout/TabBarLayoutActivity.kt#L136 + +[Scrollable icon tabBar]: /app/src/main/java/com/jetpack/compose/learning/tabarlayout/TabBarLayoutActivity.kt#L173 + +[Scrollable tabBar with text,icon and divider]: /app/src/main/java/com/jetpack/compose/learning/tabarlayout/TabBarLayoutActivity.kt#L199 + +[Date Picker View]: /app/src/main/java/com/jetpack/compose/learning/datepicker/DatePickerActivity.kt#L63 + +[Time Picker View]: /app/src/main/java/com/jetpack/compose/learning/timepicker/TimePickerActivity.kt#L66 + +[Image Picker View]: /app/src/main/java/com/jetpack/compose/learning/imagepicker/ImagePickerActivity.kt#L77 + +[ParallaxEffect View]: /app/src/main/java/com/jetpack/compose/learning/parallaxeffect/ParallaxEffectActivity.kt#L83 + +[Compose In Xml]: /app/src/main/java/com/jetpack/compose/learning/xmls/ComposeInXmlViews.kt + +[Xml in Compose]: /app/src/main/java/com/jetpack/compose/learning/androidviews/AndroidViews.kt + + + +[Building an Exploding FAB Transition With Jetpack Compose]: https://joebirch.co/android/building-an-exploding-fab-transition-in-jetpack-compose/ diff --git a/pages/ConstraintLayout.md b/pages/ConstraintLayout.md new file mode 100644 index 0000000..3d5d4d1 --- /dev/null +++ b/pages/ConstraintLayout.md @@ -0,0 +1,14 @@ +# Constraint Layout + +| Barrier | Guideline | Chain | +| -- | -- | -- | +| | | | + +## Guideline +A Guideline is an invisible, positionable line that can be used to position and align views within a ConstraintLayout. Guidelines can be oriented either horizontally or vertically, and their position can be specified as a percentage of the parent layout's width or height, or as a fixed distance from the start, end, top, or bottom. + +## Barrier +A Barrier is a dynamic line that automatically positions itself based on the size of one or more views. Unlike a Guideline, a Barrier's position can change based on the size and content of the views it references. + +## Chain +In ConstraintLayout, a chain is a group of views that are linked together to create flexible and dynamic layouts. By creating a chain, you can control the distribution of space and alignment of multiple views along a single axis (horizontal or vertical). Chains can be configured to distribute space equally, spread out, or to align views based on their size, helping to create responsive layouts that adapt to different screen sizes and orientations. \ No newline at end of file diff --git a/pages/GoogleMaps.md b/pages/GoogleMaps.md new file mode 100644 index 0000000..f9aa0a9 --- /dev/null +++ b/pages/GoogleMaps.md @@ -0,0 +1,39 @@ +# Google Maps +Integrating Google Maps in Jetpack Compose involves using the GoogleMap composable to embed and interact with Google Maps within your app, allowing for features like map display, markers, and custom map controls. + +## Setup (For Google Map Implementation) +To run the google map samples, you'll have to: + +1. Get a Maps API key +2. Add an entry in `local.properties` or `local.defaults.properties` that looks like `MAPS_API_KEY=YOUR_MAPS_KEY` +3. Build and run + +## Examples + +| Basic | Marker | Polyline | +| -- | -- | -- | +| | | | + +| Polygon | Circle | Ground Overlay | +| -- | -- | -- | +| | | | + +| Tile Overlay | Indoor Level | Lite Map | +| -- | -- | -- | +| | | | + +| Place Picker | Navigation Viewer | Projection | +| -- | -- | -- | +| | | | + +| Cluster | Heat Map | KML | +| -- | -- | -- | +| | | | + +| GeoJSON | ScaleBar | Snapshot | +| -- | -- | -- | +| | | | + +| Map in scrollable view | Compose Map In XML | +| -- | -- | +| | | diff --git a/pages/InstagramCloneUI.md b/pages/InstagramCloneUI.md new file mode 100644 index 0000000..455bf9f --- /dev/null +++ b/pages/InstagramCloneUI.md @@ -0,0 +1,7 @@ +# Instagram Clone UI + +The UI of the Instagram clone features a login screen with fields for username and password, and a home screen displaying a feed of posts with images and captions. The design focuses on the layout and visual style. + +| Instagram | +| -- | +| | diff --git a/pages/List.md b/pages/List.md new file mode 100644 index 0000000..adde0ca --- /dev/null +++ b/pages/List.md @@ -0,0 +1,34 @@ +# List + +Explore the various ways to show a list of items in Jetpack Compose and how to use them in your application. +| LazyRow/Column | LazyVerticalGrid | Advance List | +| -- | -- | -- | +| | | | + +## LayRow/Column +As the name suggests, the difference between LazyColumn and LazyRow is the orientation in which they lay out their items and scroll. LazyColumn produces a vertically scrolling list, and LazyRow produces a horizontally scrolling list. +Find example of the currently shown screen here + +- [Lazy Row] + +- [Lazy Column] + +## Lazy Vertical Grid +The LazyVerticalGrid composable provides support for displaying items in a grid. A Lazy vertical grid will display its items in a vertically scrollable container, spanned across multiple columns. + +- [Lazy Vertical Grid] + +## Advance List +For implementing an advanced list, data can be efficiently retrieved from remote APIs, processed using Kotlin Flows for reactive data handling, and then displayed using the Paging library to ensure smooth and performant data loading. This approach allows for dynamic content updates, seamless pagination, and an overall optimized user experience. + +- [Advance List] + + + +[Lazy Row]: /app/src/main/java/com/jetpack/compose/learning/list/LazyColumnRowActivity.kt#L111 + +[Lazy Column]: /app/src/main/java/com/jetpack/compose/learning/list/LazyColumnRowActivity.kt#L82 + +[Lazy Vertical Grid]: /app/src/main/java/com/jetpack/compose/learning/list/LazyGridActivity.kt#L109 + +[Advance List]: /app/src/main/java/com/jetpack/compose/learning/list/advancelist/MovieList.kt \ No newline at end of file diff --git a/pages/PullToRrefresh.md b/pages/PullToRrefresh.md new file mode 100644 index 0000000..e2d5b4c --- /dev/null +++ b/pages/PullToRrefresh.md @@ -0,0 +1,14 @@ +# Pull To Refresh + +| Simple Pull To Refresh | Custom Background Pull To Refresh | Custom View Pull To Refresh | +| -- | -- | -- | +| | | | + +## Simple pull to refresh +A Simple Pull to Refresh is a common UI pattern that allows users to refresh content in a scrollable view by pulling it downward. In Jetpack Compose, this can be easily implemented using the SwipeRefresh composable from the accompanist library. The SwipeRefresh component wraps your scrollable content and triggers a refresh action when the user pulls down on the screen. This approach provides a straightforward way to integrate pull-to-refresh functionality with minimal customization. + +## Pull to refresh with custom background +When implementing a Custom Background for Pull to Refresh in Jetpack Compose, the SwipeRefreshIndicator is typically used to create a tailored visual experience during the refresh interaction. The SwipeRefreshIndicator allows developers to customize not only the appearance of the refresh indicator but also the background that appears as the user pulls down to refresh the content. + +## Custom View pull to refresh +Creating a Custom View for Pull to Refresh involves building a completely custom composable from scratch to handle the pull-to-refresh interaction. This approach allows for the highest level of customization, where you can design a unique interaction pattern and visual effect for the pull-to-refresh gesture. For instance, you might want to implement a rotating logo, a progress bar that fills up as the user pulls down, or any other creative interaction. This requires handling touch gestures, managing the state of the pull distance, and triggering the refresh action when a certain threshold is reached. Although this method is more complex, it provides the most control over the user experience. \ No newline at end of file diff --git a/pages/SwipeToDelete.md b/pages/SwipeToDelete.md new file mode 100644 index 0000000..ffd800f --- /dev/null +++ b/pages/SwipeToDelete.md @@ -0,0 +1,10 @@ +# Swipe To Delete +| Swipe Left | Swipe Right | Swipe Left + Right | +| -- | -- | -- | +| | | | + +In Jetpack Compose, swipe gestures from the left, right, or both sides can be implemented using the **swipeable** modifier. + +- **Swipe from Left:** Triggers an action or transition when the user swipes from the left edge of the component.. +- **Swipe from Right:** Activates a response when swiping from the right edge of the component. +- **Swipe from Both:** Sides: Allows for gestures from either side, enabling different actions depending on the swipe direction. \ No newline at end of file diff --git a/pages/ViewPager.md b/pages/ViewPager.md new file mode 100644 index 0000000..baa01a1 --- /dev/null +++ b/pages/ViewPager.md @@ -0,0 +1,34 @@ +# ViewPager + +| Horizontal Pager | Horizontal Pager with Tabs | Horizontal Pager with indicator | +| -- | -- | -- | +| | | | + +## Horizontal Pager + A component that allows users to swipe horizontally between pages of content. It displays a sequence of pages where each page is shown one at a time, providing a straightforward navigation experience. Also we can configure its behaviour to enable reverse pager behaviour or whether to disable swipe gestures for it. + +## Horizontal Pager with Tabs + Combines horizontal paging with a tab layout at the top or bottom, enabling users to quickly switch between pages using tabs. Each tab corresponds to a page, providing an easy way to navigate through different sections. This way we can manually navigate between pages instead of swiping. + +## Horizontal Pager with Indicator + Includes visual indicators, such as dots or bars, to represent the number of pages and the current page. These indicators give users a visual cue about their position within the pager and allow for smooth navigation between pages. + +| Vertical Pager with indicator | Pager with Zoom-in
transformation | Pager with Fling Behavior | +| -- | -- | -- | +| | | | + +## Vertical Pager with indicator +Similar to a horizontal pager with indicators, but allows users to swipe vertically between pages. The indicators, such as dots or bars, represent the total number of pages and the current page position, but are aligned vertically rather than horizontally. + +## Pager with Zoom-in transformation +Features a zoom-in effect on the current page, creating a dynamic visual experience where the active page is enlarged while adjacent pages are scaled down. + +## Pager with Fling Behavior +Supports fling gestures to swipe between pages with momentum, simulating a natural scrolling experience. You can adjust the fling sensitivity to control how responsive the page transitions are to user interactions. + +| Add/Remove pager | +| -- | +| | + +## Add/Remove Pager +A demo showcasing dynamic page management in a pager allows users to add or remove pages in real-time. This functionality enables the pager to update its content dynamically, reflecting changes immediately without requiring a restart. Users can interact with controls to add new pages or remove existing ones, demonstrating the pager's flexibility and responsiveness to content updates. \ No newline at end of file