How to create a Styleguide in Android Studio and Kotlin

A step by step guide on creating a Styleguide with colors and custom text styles using Android Studio and Kotlin. Github repository included.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 06/12/2023 at 12:56
Last Updated on 06/12/2023 at 18:24
Two flowers that represent Kotlin and Android Studio side by side. Beneath them sits the text "Styleguide."

A step by step guide on creating a Styleguide with colors and custom text styles using Android Studio and Kotlin. Github repository included.

SubscribeDownload Open Source Kotlin Starter Project

The following tutorial walks you through how to create the Styleguide that can be found in our Open Source E-Commerce Figma project.

Check out our Open Source E-commerce Figma projectDiscover how we created our E-commerce Figma template

If by any chance you are curious on what a Styleguide is or how to create one, please read the article linked below.

Styleguide: What it is & How to create one

Step One: Create the Styleguide Package

A screenshot of Android Studio showing you how to create a new package. We have highlighted the ui.theme folder.

Create a new Package in the ui folder.

When creating the folder, make sure that it falls within the ui folder and not the theme folder.

A screenshot of Android Studio showing the pop up that appears when you try to create a new package. We have highlighted the path that we have given to the Styleguide - "com.delasign.samplestarterproject.ui.styleguide."

Step Two: Move the Theme into the Styleguide Folder

A screenshot of Android Studio, showing the Theme inside the Styleguide.

Drag and drop the theme folder into the Styleguide folder.

Step Three: Create the Colors

A screenshot of Android Studio showing the addition of Custom Colors from our e-commerce Figma Template.

Using the tutorial linked below, add all the relevant colors to the Android Studio project.

How to add and use custom colors in an Android project

Step Four: Add the Custom Fonts

A screenshot of Android Studio showing the addition of the custom fonts from our Figma E-commerce guide.

Follow the tutorial linked below to learn how to add custom fonts to the Android Studio project.

How to add a custom font to an Android Studio project

Step Five: Create the Text Styles

A screenshot of Android Studio showing one of the files from the ones that we added to recreate the Custom TextStyles from our e-commerce Figma Template.

Under the Styleguide package, create a new file for each TextStyle of your Styleguide using a format similar to the code below.

If you wish to compare or consult the styles that we created as part of this tutorial, please refer to our E-commerce Figma template linked below.

Consult Figma E-Commerce Template

For more information on Text Styles and how to use them, please consult our tutorial linked below.

How to implement custom Text Styles using Kotlin and Jetpack Compose

Looking to implement light mode or dark mode?

To learn how to use dark mode or light mode, consult the tutorial below.

How to use light mode and dark mode in Android Studio and Kotlin

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe