How to create a Styleguide in Android Studio and Kotlin

Oscar de la Hera Gomez
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.

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

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

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.

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.

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.

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

Looking to implement light mode or dark mode?

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

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.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details