styles
Styles guides you through adopting Jetpack Compose's Styles API for custom UI components and themes. Follow step-by-step workflows to upgrade dependencies, establish ComponentStyles, and migrate components using Modifier.styleable to replace hard-coded styling parameters with unified style attributes.
Styles helps you migrate custom Jetpack Compose components to the Styles API for unified theming.
AI-generated summary based on this skill's SKILL.md
Install
android/skills/styles · repository language: Python
git clone https://github.com/android/skills
cp -r skills/jetpack-compose/theming/styles ~/.claude/skills/stylesFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to use Compose Styles in Android?
Styles helps you adopt Jetpack Compose's Styles API for custom UI components and themes. Start by upgrading your dependencies, then establish ComponentStyles to define reusable styling attributes. Use Modifier.styleable on your components to replace hard-coded parameters with unified style attributes, enabling consistent theming across your design system.
What is the main purpose of Styles in Jetpack Compose?
Styles provides a structured approach to managing component styling in Jetpack Compose. It guides you through migrating custom Android Compose components to use the Styles API, allowing you to replace hardcoded styling parameters with unified Style attributes. This ensures consistency and maintainability across your entire UI component library.
How do I migrate to Jetpack Compose Styles?
Styles offers step-by-step workflows for migration. First, set up and configure the Styles API in your existing project by updating dependencies. Then systematically migrate your custom components using Modifier.styleable, replacing hardcoded parameters with style definitions. Styles supports state-based styling for interaction states, enabling dynamic theming based on component state.
Can Styles integrate custom theme tokens with Compose?
Yes, Styles enables integration of custom theme tokens with Compose Styles for design system consistency. By establishing ComponentStyles and using Modifier.styleable, you can centralize theme token definitions and apply them uniformly across components, ensuring your design system remains cohesive throughout your application.
What does Modifier.styleable do in Styles?
Styles uses Modifier.styleable to connect your Compose components to the Styles API framework. This modifier allows components to accept style attributes instead of hardcoded parameters, enabling unified styling management. It's the core mechanism for replacing traditional parameter-based styling with declarative style definitions.
How does Styles handle state-based styling in Compose?
Styles supports implementing state-based styling and interaction states through its Styles API integration. You can define styles that respond to component states, allowing your UI to adapt styling based on user interactions and component conditions. This approach maintains clean separation between styling logic and component behavior.
SKILL.md
rendered from the published skill — quoted content, verbatim
Limitations
- Warn the user that this skill is EXPERIMENTAL and requires updating to alpha version of Compose and opting in to the Experimental APIs.
- This skill only supports custom UI components and custom themes.
- This skill does not support Material Design component Styles.
Prerequisites
1. Upgrade dependencies
- The project must use
compileSdkversion 37 or higher. - The project must use
androidx.compose.foundation:foundationversion1.12.0-alpha01or higher. - Alternatively, the project must use
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 6 files
jetpack-compose/theming/styles/SKILL.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/designsystems/custom.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/fundamentals.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/state-animations.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/styles-vs-modifiers.md
jetpack-compose/theming/styles/references/android/develop/ui/compose/styles/theming.md