android-compose-animation.txt

Skip to main content Essentials - Build AI experiences - Build AI-powered Android apps with Gemini APIs and more. - Get started - Get started - Create your first app. Use Compose for UI and adaptive app development to support multiple device form factors. - Hello, world! - Developer Verification - Adaptive apps - Compose for UI - AI-powered IDE - Training - Monetization with Play ↗️ - Optimize by form factor - Build apps that optimize the user experience on phones, tablets, foldables, cars, XR, and more. - Phones, tablets, foldables - Android for Cars - Android TV - Android XR - Googlebook - ChromeOS - Wear OS - Build by category - Learn to build for your use case by following Google's prescriptive and opinionated guidance. - Games - Camera & media - Social & messaging - Health & fitness - Productivity - Enterprise apps - Get the latest - Stay in touch with the latest releases throughout the year, join our preview programs, and give us your feedback. - Latest updates - Experimental updates - Android Studio preview - Jetpack & Compose libraries - Wear OS releases - Privacy Sandbox ↗️ Design & Plan - Excellent Experiences - Build the best experiences for your best users. - Learn more - UI Design - Design a beautiful user interface using Android best practices. - Design for Android - Mobile - Desktop experiences - XR Headsets & XR Glasses - AI Glasses - Widgets - Wear OS - Android TV - Android for Cars - Architecture - Design robust, testable, and maintainable app logic and services. - Introduction - Libraries - Navigation - Modularization - Testing - Kotlin Multiplatform - Quality - Plan for app quality and align with Play store guidelines. - Overview - Core value - User experience - Accessibility - Technical quality - Excellent Experiences - Security - Safeguard users against threats and ensure a secure Android experience. - Overview - Privacy - Permissions - Identity - Fraud prevention Develop - Gemini in Android Studio - Your AI development companion for Android development. - Learn more - Get Android Studio - Core areas - Get the samples and docs for the features you need. - Samples - Multidevice support - User interfaces - Background work - Data and files - Connectivity - All core areas ⤵️ - Tools and workflow - Use the IDE to write and build your app, or create your own pipeline. - Write and debug code - Build projects - Test your app - Performance - Command-line tools - Gradle plugin API - Android Bench - Device tech - Write code for form factors. Connect devices and share data. - Phones, tablets, foldables - ChromeOS - Android for Cars - Android TV - Android XR - Wear OS - Android Health - Better Together - All devices ⤵️ - Libraries - Browse API reference documentation with all the details. - Android platform - Jetpack libraries - Compose libraries - Google Play services ↗️ - Google Play SDK index ↗️ Google Play - Play Console - Publish your app or game and grow your business on Google Play. - Go to Play Console - Learn more ↗️ - Fundamentals - Learn how to engage users, monitize, and secure your app. - Play Monetization - Play Integrity - Play Policies - Play Programs ↗️ - Games Dev Center - Develop and deliver games. Get tools, downloads, and samples. - Overview - Play Asset Delivery - Play Games Services - Play Games on PC - Level Up guidelines - All Play guides ⤵️ - Libraries - Browse API reference documentation with all the details. - Play Feature Delivery - Play In-app Updates - Play In-app Reviews - Play Install Referrer - Google Play services ↗️ - Google Play SDK index ↗️ - All Play libraries ⤵️ - Tools & resources - Tools for publishing, promoting, and managing your app. - Android App Bundles - Brand & marketing - Play Console APIs ↗️ Blog - the Android Developer's Blog - Read the latest - Explore the authors → - Explore categories - Product News Stay in the loop with the latest updates, feature releases, and behind-the-scenes looks at how we’re evolving. - Community Discover stories from our users, spotlight features, and the collaborative projects that bring us all together. - How-tos From quick tips to deep-dive tutorials, these step-by-step guides are designed to help you work smarter and faster. - Case Studies Real-world results from real-world users. Explore how different teams use our tools to achieve their goals. - Events & Programs Get the details on upcoming webinars, workshops, meetups, and special initiatives designed to help you grow. - Documentation Access detailed manuals, API references, and technical specifications to help you build and integrate with confidence. / - English - Deutsch - Español – América Latina - Français - Indonesia - Italiano - Polski - Português – Brasil - Tiếng Việt - Türkçe - العربيّة - 中文 – 简体 - 中文 – 繁體 - 日本語 - 한국어 Android Studio Sign in - Develop - Core areas - UI Overview Tutorial Samples Docs Quick Guides - Essentials - More - Design & Plan - More - Develop - More - Overview - Tutorial - Samples - Docs - Quick Guides - Google Play - More - Blog - More - Android Studio - Introduction - Documentation - Compose-first development - Quick start - Setup Compose Dependencies and Compiler - Thinking in Compose - Build adaptive apps - Bill of Materials - Using the Bill of Materials - BOM to library version mapping - UI architecture - Lifecycle - Side-effects - Phases - Managing state - Overview - Where to hoist state - Save UI state - State lifespans - State callbacks - Architecture - Architectural layering - CompositionLocal - Navigation ⍈ - App layout - Layout fundamentals - Overview - Layout basics - Modifiers - Constraints and modifier order - Custom modifiers - List of modifiers - Layout containers - Lazy lists and lazy grids - Pager - Flow layouts - Grid - Overview - Get started - Set container properties - Set item properties - FlexBox - Overview - Get started - Set container behavior - Set item behavior - Adaptive layouts - Fundamentals - Get started with adaptive apps - App orientation, aspect ratio, and resizability - Support multi-window mode - Adaptive do’s and don’ts - Sizing strategies - Use window size classes - Support different display sizes - Query information for adaptive layouts - Layout patterns - Canonical layouts - Build a list-detail layout - Build a supporting pane layout - Build adaptive navigation - Device-specific support - Support connected displays - Support desktop windowing - Support camera on multiple form factors - Foldables - Learn about foldables - Make your app fold-aware - Support foldable display modes - Support trifolds and landscape foldables - Advanced and custom layouts - Custom layouts - Alignment lines - Intrinsic measurements - Visibility tracking - Components - Overview - App bars - Overview - Navigate from top app bar - Create a dynamic top app bar - Badges - Bottom sheets - Overview - Partial bottom sheet - Button - Overview - Floating action button - Icon button - Segmented button - Card - Carousel - Checkbox - Chip - Date pickers - Dialog - Divider - Menus - Navigation bar - Navigation drawer - Navigation rail - Progress indicators - Pull to refresh - Radio button - Resources - Scaffold - Search bar - Slider - Snackbar - Switch - Tabs - Time pickers - Overview - Time picker dialogs - Tooltip - Theming - Overview - Material Design 3 - Migrate from Material 2 to Material 3 - Material Design 2 - Custom theming - Anatomy of a theme - Migrating XML themes to Compose - Styles - Overview - Fundamentals of Styles - State and animations in Styles - Styles vs modifiers - Theming with Styles - Performance of Styles - Do's and don'ts - Examples using Styles - Limitations of Styles - Text and typography - Overview - Display and style text - Display text from resource - Style text - Style paragraph - Configure text layout - Handle user input - Configure text fields - Migrate to state-based text fields - Enable user interactions - Work with fonts - Display emoji - Enable Autofill - Images and graphics - Overview - Images - Overview - Loading images - ImageBitmap vs ImageVector - Material icons - Customize an image - Custom painter - Optimizing bitmaps - Graphics - Overview - Graphics Modifiers - Brush and gradients - Mesh gradients - Shapes - Shadows - Animation - Overview - Choose an animation API - Quick guide - Animation modifiers and composables - Value-based animations - Animated vector images - Advanced animation example - Customize animations - Shared elements - Overview - Customize - Common use cases - With navigation - Additional samples - Test animations - Tools - Additional resources - Accessibility - Overview - API defaults - Semantics - Modify traversal order - Support user-scalable content - Merging and clearing - Inspect and debug - Testing - Touch and input - Overview - Pointer input - Overview - Understand gestures - Tap and press - Drag, swipe, and fling - Multi-touch gestures - Scroll - Understand scroll phases - Scroll modifiers - Nested scroll modifiers - Two-dimensional scrolling - Keyboard input - Handle keyboard actions - Keyboard Shortcuts Helper - Focus - Overview - Change focus traversal order - Change focus behavior - React to focus - User interactions - Handling interactions - Migrate to Indication and Ripple APIs - Drag and drop - Swipe to dismiss or update - Stylus input - Overview - Stylus input in text fields - Advanced stylus features - Note-taking apps - Ink API - About the Ink API - Add dependencies - Pick your module - Define your brushes - Draw a stroke - Create interactive tools with the Geometry APIs - Manage state and storage - Choose your epsilon and coordinate system - Copy and paste - Input compatibility on large screens - Performance - Overview - Hero benchmarks - Phases - Baseline profiles - Stability - Overview - Diagnose stability issues - Fix stability issues - Strong skipping - Tools - Best practices - Style guidelines - Compose API guidelines - Kotlin for Compose - UI testing - Overview - Cheatsheet - Semantics - Testing APIs - Migrate to v2 testing APIs - Synchronize tests - Interoperability - Common patterns - Debug tests - Migrate to Compose - Migrate XML Views to Jetpack Compose - Migration strategy - Interoperability APIs - Overview - Using Compose in Views - Using Views in Compose - Wrap a WebView in Compose - Common migration scenarios - Migrate RecyclerView to Compose - Migrate CoordinatorLayout to Compose - Migrate Jetpack Navigation to Navigation Compose - Other considerations - Adopt Compose for teams - Compose and other libraries - Compare Compose and View metrics - Tools - Overview - Design - Preview your UI - Preview and debug animations - Develop - Develop code iteratively - Editor actions - Lint - Debug - Overview - Trace app performance - Stack traces - System capabilities - Notifications - About notifications - Create a notification - Notification permission - Notification channels - Expandable notifications - Bubbles - Progress-centric notifications - Call-style notifications - Live updates - Window insets - Set up edge-to-edge - About WindowInsetsRulers - About window insets - Set up window insets - Use keyboard IME animations - Use Material 3 insets - Use insets in Views and Compose - About system bar protection - Cutouts - About cutouts - Test how your content renders with cutouts - Picture-in-picture - About PiP - Set up your app for PiP - Enter PiP at correct times - Add PiP through a button - Add remote actions to PiP - Use the Jetpack PiP library - Predictive back - About predictive back - Set up predictive back - Access progress manually - Test predictive back - App shortcuts - About shortcuts - Create shortcuts - Add capabilities to shortcuts - Manage shortcuts - Implement best practices for shortcuts - Adaptive icons - Bubbles - Create widgets - Overview - Glance setup - Create an app widget with Glance - Enhance your widget - Enable widget configuration - Add generated previews to your widget picker - Pin Glance widgets in-app - Handle errors with Glance - Unit testing with Glance - Handle user interaction with Glance - Track metrics for your widget - Manage and update GlanceAppWidget - Build UI with Glance - Implement a Glance theme - Glance interoperability - Additional resources - Build AI experiences - Get started - Get started - Hello, world! - Developer Verification - Adaptive apps - Compose for UI - AI-powered IDE - Training - Monetization with Play ↗️ - Optimize by form factor - Phones, tablets, foldables - Android for Cars - Android TV - Android XR - Googlebook - ChromeOS - Wear OS - Build by category - Games - Camera & media - Social & messaging - Health & fitness - Productivity - Enterprise apps - Get the latest - Latest updates - Experimental updates - Android Studio preview - Jetpack & Compose libraries - Wear OS releases - Privacy Sandbox ↗️ - Excellent Experiences - Learn more - UI Design - Design for Android - Mobile - Desktop experiences - XR Headsets & XR Glasses - AI Glasses - Widgets - Wear OS - Android TV - Android for Cars - Architecture - Introduction - Libraries - Navigation - Modularization - Testing - Kotlin Multiplatform - Quality - Overview - Core value - User experience - Accessibility - Technical quality - Excellent Experiences - Security - Overview - Privacy - Permissions - Identity - Fraud prevention - Gemini in Android Studio - Learn more - Get Android Studio - Core areas - Samples - Multidevice support - User interfaces - Background work - Data and files - Connectivity - All core areas ⤵️ - Tools and workflow - Write and debug code - Build projects - Test your app - Performance - Command-line tools - Gradle plugin API - Android Bench - Device tech - Phones, tablets, foldables - ChromeOS - Android for Cars - Android TV - Android XR - Wear OS - Android Health - Better Together - All devices ⤵️ - Libraries - Android platform - Jetpack libraries - Compose libraries - Google Play services ↗️ - Google Play SDK index ↗️ - Play Console - Go to Play Console - Learn more ↗️ - Fundamentals - Play Monetization - Play Integrity - Play Policies - Play Programs ↗️ - Games Dev Center - Overview - Play Asset Delivery - Play Games Services - Play Games on PC - Level Up guidelines - All Play guides ⤵️ - Libraries - Play Feature Delivery - Play In-app Updates - Play In-app Reviews - Play Install Referrer - Google Play services ↗️ - Google Play SDK index ↗️ - All Play libraries ⤵️ - Tools & resources - Android App Bundles - Brand & marketing - Play Console APIs ↗️ - the Android Developer's Blog - Read the latest - Explore the authors → - Explore categories - Product News - Community - How-tos - Case Studies - Events & Programs - Documentation - Android Developers - Develop - Core areas - UI - Docs Stay organized with collections Save and categorize content based on your preferences. Animations in Compose Animations are essential in a modern mobile app in order to realize a smooth and understandable user experience. Quick guide Animation modifiers and composables Animate appearance and disappearance The AnimatedVisibility composable allows you to hide or show content easily. Learn more Animate content size changes Use animateContentSize() to achieve automatic size change animations. Learn more Animate between different composables Use AnimatedContent to animate between composables that have different content. Learn more Value-based animations Animate a single value Use animate*AsState functions to animate an individual property, such as opacity. Learn more Animate multiple values together Use Transition to animate multiple values at once. Learn more Animate properties indefinitely Use InfiniteTransition to animate properties continuously. Learn more Customize your animations Learn how to customize your animations duration, easing curve and spring configuration. Customize Test animations Learn how to write tests for your animations. Testing Android Studio Tooling Learn all about how to preview your animations in Android Studio. Tooling Next Choose an animation API arrow_forward Content and code samples on this page are subject to the licenses described in the Content License . Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates. Last updated 2024-07-01 UTC. [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-01 UTC."],[],[]] - X Follow @AndroidDev on X - YouTube Check out Android Developers on YouTube - LinkedIn Connect with the Android Developers community on LinkedIn - More Android - Android - Android for Enterprise - Security - Source - News - Blog - Podcasts - Discover - Gaming - Machine Learning - Health & Fitness - Camera & Media - Privacy - 5G - Android Devices - Large screens - Wear OS - ChromeOS devices - Android for cars - Android TV - Releases - Android 17 - Android 16 - Android 15 - Android 14 - Android 13 - Android 12 - Android 11 - Documentation and Downloads - Android Studio guide - Developers guides - API reference - Download Studio - Android NDK - Support - Report platform bug - Report documentation bug - Google Play support - Join research studies - Android - Chrome - Firebase - Google Cloud Platform - All products - Privacy - License - Brand guidelines - Manage cookies - Get news and tips by email Subscribe - English - Deutsch - Español – América Latina - Français - Indonesia - Italiano - Polski - Português – Brasil - Tiếng Việt - Türkçe - العربيّة - 中文 – 简体 - 中文 – 繁體 - 日本語 - 한국어