Blog Infos
Author
Published
Topics
, , , ,
Published

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.

Customizable Icons for Component Functions in Code Completion

 

🎨 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.

Design System Icons in Code Completion and Gutter

 

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.

Color Previews

 

 

📱 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.

Demo App Integration
🖼️ 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.

KDoc Image Rendering

 

⌨️ 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.

Live Templates

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

, ,

Migrating to Jetpack Compose – an interop love story

Most of you are familiar with Jetpack Compose and its benefits. If you’re able to start anew and create a Compose-only app, you’re on the right track. But this talk might not be for you…
Watch Video

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer for Jetpack Compose
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engin ...
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer f ...
Google

Jobs

🧩 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

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
Using annotations in Kotlin has some nuances that are useful to know
READ MORE
blog
One of the latest trends in UI design is blurring the background content behind the foreground elements. This creates a sense of depth, transparency, and focus,…
READ MORE
blog
Now that Android Studio Iguana is out and stable, I wanted to write about…
READ MORE
blog
The suspension capability is the most essential feature upon which all other Kotlin Coroutines…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu