As professional Android developers, we constantly seek tools that streamline our workflow and elevate our productivity. Enter Kelp, a powerful Android Studio plugin designed to seamlessly integrate custom design systems into Android Studio, providing a rich set of features that make UI development faster and easier.

Why Kelp? 🤔

Kelp addresses the common pain points of using custom design systems by offering intuitive and automated support directly within Android Studio. Whether you’re dealing with icons, colors, or component functions, Kelp enhances visibility and accessibility, allowing you to focus on what you do best — building great apps.

Key Features

🔧 Customizable Icons for Component Functions

Kelp allows you to set a custom icon for your design system component functions. These icons appear in the code completion dropdown, similar to how R.drawable resources are displayed. This visual aid makes it easier to identify and use components consistently across your project.

🎨 Design System Icons

With Kelp, your design system icons are rendered in the code completion dropdown and gutter, just like native Android drawable resources. This feature ensures that you can quickly find and use the right icons without switching contexts.

Kelp brings your design system’s color palette to life by showing color previews in the code completion dropdown and gutter. This functionality mirrors the native R.color resources, providing an immediate visual reference that simplifies the process of applying the correct colors.

📱 Demo App Integration

Installing and navigating to the demo app showcasing your design system components is now a breeze. Kelp facilitates APK installation and provides an Intention Action to open specific component pages directly from your code, enhancing the development process.

🖼️ KDoc Image Rendering

One of the standout features of Kelp is its ability to render images in KDoc, despite the current limitations of Android Studio. This functionality enhances documentation by allowing inline visual references to components, aiding in better understanding and usage.

⌨️ Live Templates

Speed up your coding with customizable live templates. These templates can be tailored to include frequent snippets of your design system code, automatically triggering the code completion popup to further accelerate development.

🧩 Customization

Kelp’s true power lies in its configurability. By modifying the config.json file, you can tailor the plugin to meet the unique needs of your project. This JSON-based configuration supports detailed customization, from function prefixes for component highlighting to the specifics of color and icon rendering.

Furthermore, since this is a file, it can be stored in Git and shared across your team, ensuring consistency and eliminating the need for each user to manually configure the plugin through Android Studio’s settings UI.

Here’s the full configuration file with comments:

{
// If you want to disable some of these features, just don't include 
// their sections to your json file.
// Replacing the default icon of design system components
// in the code completion with a customizable icon
// Custom icon MUST be 
// 1. an svg 
// 2. with size — 40x40
// 3. placed here: /.idea/kelp/dsComponentFunIcon.svg
// 4. optionally, a dark version can be added: 
// /.idea/kelp/dsComponentFunIcon_dark.svg
"componentFunHighlighting": {
// custom icon will be added to all functions in this package
"functionFqnPrefix": "com.your.designsystem.package.components.",
"functionSimpleNamePrefix": "Ds" // optional
},
// Rendering design system colors in the code completion and 
// gutter (where breakpoints are). 
// Like with regular Android resources.
"colorPreview": {
"codeCompletionEnabled": true,
"gutterEnabled": true,
// optional, color tokens from enum class
"enumColorTokensEnabled": true,
},
// Rendering design system icons in the code completion and 
// gutter (where breakpoints are). 
// Like with regular Android resources.
"iconsRendering": {
"codeCompletionEnabled": true,
"gutterEnabled": true,
// class with a lot of properties that return icons and are 
// named as icons
"containerClassName": "com.your.designsystem.package.DsIcons",
// optional: filters out properties that do not represent an icon
"propertyNameFilter": {
// optional: only properties with this prefix will be considered 
// as an icon
"startsWith": ["ic_"],
// optional: all properties with this prefix will be skipped
"doesNotStartWith": ["allIconsAsList", "otherProperty"]
},
// maps property names to drawable resource names
"propertyToResourceMapper": {
"addPrefix": "ic_", // optional
"convertToSnakeCase": true // optional; e.g. "AddAccount" -> "add_account"
}
},
// Opening the component page in the demo app via an Intention Action
"demoApp": {
// optional: custom name of the intention action
"intentionName": "🚀 Open in MY CUSTOM design system demo app",
"functionFqnPrefix": "com.your.designsystem.package.components.",
"functionSimpleNamePrefix": "Ds", // optional
// package name of the demo app
"appPackageName": "com.your.designsystem.package.demo",
// deeplink that will be used to open a component page in the demo app.
// DS_COMPONENT_FQN_DEEPLINK_PLACEHOLDER will be replaced with
// the fully qualified name of the 
// composable function, e.g. com.your.designsystem.package.components.Badge
"componentDeeplink": "yourscheme://component/DS_COMPONENT_FQN_DEEPLINK_PLACEHOLDER",
// optional
// Installing (if not installed) the apk file
// of the demo app (showcase app) on an Android device.
// Demo app apk must be placed here with 
// this name: /.idea/kelp/demoApp-VERSION_NAME.apk
// For example: /.idea/kelp/demoApp-0.12.0.apk
// The plugin will acquire the latest version 
// from the apk file name (for example, 0.12.0).
// If the app is not installed OR installed, but has a lower
// version, the plugin will install the apk on the device.
"apkInstallation": true
},
// Installs live templates into the IDE.
// Useful for writing frequent code, like "MaterialTheme.colors." in 
// just 3 keystrokes.
// After completion, opens code completion 
// in place of $CODE_COMPLETION$, saving even more effort.
"liveTemplates": [
{
"abbreviation": "dt",
"text": "com.your.designsystem.DsTheme.$CODE_COMPLETION$",
"description": "Writes \"DsTheme.\""
},
{
"abbreviation": "dtc",
"text": "com.your.designsystem.DsTheme.colors.$CODE_COMPLETION$",
"description": "Writes \"DsTheme.colors\""
},
{
"abbreviation": "dtt",
"text": "com.your.designsystem.DsTheme.typography.$CODE_COMPLETION$",
"description": "Writes \"DsTheme.typography\""
},
{
"abbreviation": "dtt",
"text": "com.your.designsystem.DsTheme.icons.$CODE_COMPLETION$",
"description": "Writes \"DsTheme.icons\""
}
]
}

🛠️ Installation

To get started with Kelp:

1. Ensure you are using Android Studio Koala | 2024.1.1 Canary 3 or later.
2. Download the latest release from the Kelp GitHub repository and install it manually via Settings/Preferences > Plugins > ⚙️ > Install plugin from disk....
3. Optionally, inform your team by creating an externalDependencies.xml file to ensure everyone is using the plugin.
4. Configure Kelp for your project by creating and customizing the config.json file as described above.

🚀 Boost Your Development Efficiency

Kelp transforms the way you interact with your design system within Android Studio. By bringing visual cues and streamlined access to design resources directly into your IDE, it eliminates guesswork and reduces the time spent searching for the right components.

With Kelp, you can ensure consistency, improve code readability, and ultimately deliver better products faster. Integrate Kelp into your development workflow today and experience the difference it makes.

For more detailed guidance and examples, visit the official Kelp repository.

If you’re excited about Kelp’s potential, I’d appreciate your ⭐️ stars on GitHub!

Happy coding! 👋

https://github.com/ozontech/kelp?source=post_page—–4374127939aa——————————–

This article is previously published on proandroiddev.com