DEV Community

Umeh Michael
Umeh Michael

Posted on • Updated on

Android Theme in Android Studio

Personalizing your app's theme is another way to greatly improve your app and improve user experience.

Applications usually have a unique color combination or font that makes it different and who says yours can't?

Making an app theme can be done in a few easy steps which starts with you picking a color combination and font to use in your app. You can get creative and pick these or consult someone experienced if you want something professional.

The theme of your app is controlled from your app's manifest. The theme is chosen on both application and activity level. Each activity uses its specific theme as defined in the manifest. Activities without themes use the app-level theme. I'll be guiding you through the process of customizing your app theme in the easiest way possible.

Android Studio previously had its own "Theme Editor" which allowed you preview themes and changes made to it (Cool right?...but it was scrapped in v3.3

In manifest, you'll notice that the default app theme should be something like this: "AppTheme". This theme is contained in res/values/styles. You can also create a new theme but its preferable to simply edit the default one.

Looking at AppTheme you'll notice three distinct items:

  • colorPrimary: This is the main color of the app and is used in more visible views like the toolbar, status bar, etc. Basically this should be the primary color your app will be associated. Go ahead to change the color to your preferred color which could be hard coded (RGB value) or point to a color resource. It is advisable to use color resources for good practice. Below is an example of the colorPrimary item:

(points to a color resource)

item name="colorPrimary">@color/colorPrimary</item>
Enter fullscreen mode Exit fullscreen mode

(hard coded)

item name="colorPrimary">#3913B8</item>
Enter fullscreen mode Exit fullscreen mode
  • colorPrimaryDark: This is a dark variant of the Primary color. In most cases it could literally be a slightly darker color variant of the primary while others like to make it something different from the primary but it easily associated and blends in with the primary color.

(points to a color resource)

item name="colorPrimaryDark">@color/colorPrimaryDark</item>
Enter fullscreen mode Exit fullscreen mode

(hard coded)

item name="colorPrimaryDark">#2600A5</item>
Enter fullscreen mode Exit fullscreen mode
  • colorAccent: This is intended to be a bright compliment to the primary and dark colors. Usually something shiny and attractive. This color, by default, appears in buttons and texts like the floating action button.

(points to a color resource)

item name="colorAccent">@color/colorAccent</item>
Enter fullscreen mode Exit fullscreen mode

(hard coded)

item name="colorAccent">#E64513</item>
Enter fullscreen mode Exit fullscreen mode

A combination of these three colors can be enough to make your app look perfect but feel free to add as many colors as you need.

You could set styles of basically anything ranging from EditTexts to line spacing of texts under the theme and can customize themes specific to activities. You can assign themes to activities in the manifest by adding the android:theme="@style/yourThemeHere" /> tag under the activity. Activities without specific themes use the app level theme.

Below is an example of and EditText item in the app theme that gives all EditTexts in the app a dark text color and a light blue hint color by calling "TextEditStyle" as its style.

<item name="editTextStyle">@style/TextEditStyle</item>
Enter fullscreen mode Exit fullscreen mode

Property of the "TextEditStyle"

<style name="TextEditStyle" parent="Widget.AppCompat.EditText">
        <item name="android:textColor">@android:color/holo_green_dark</item>
        <item name="android:textColorHint">@android:color/holo_blue_bright</item>
    </style>
Enter fullscreen mode Exit fullscreen mode

Feel free to explore all theme items to know what will be useful to make your app more attractive than it already is. I hope this helped! Please leave a like and have a good day!

Top comments (0)