<commit_before>---
layout: post
title: 'Coloring Buttons w/ ThemeOverlays & Background Tints'
date: 2016-08-07
permalink: /2016/08/coloring-buttons-with-themeoverlays-background-tints.html
related: ['/2013/08/fragment-transaction-commit-state-loss.html',
    '/2013/04/retaining-objects-across-config-changes.html',
    '/2016/08/contextcompat-getcolor-getdrawable.html']
---

<!--morestart-->

Let's say you want to change the background color of a regular old `Button`.
How should this be done? 

This blog post covers two different approaches. In the first approach,
we'll override the `R.attr.colorButtonNormal` attribute directly using a custom theme,
and in the second, we'll make use of AppCompat's built-in background tinting support
to achieve an identical effect.

<!--more-->

### Approach #1: Modifying `R.attr.colorButtonNormal` using a custom theme

Before we get too far ahead of ourselves, we should first understand how the
background color of a button is actually
determined. The [material design spec](https://material.google.com/components/buttons.html)
has very specific requirements about what a button should look like in light
themes vs. dark themes. How are these requirements met under-the-hood?

#### Understanding `R.attr.colorButtonNormal`

You probably know that AppCompat injects its own widgets in place of many framework<commit_msg>update blog post<commit_after>---
layout: post
title: 'Coloring Buttons w/ ThemeOverlays & Background Tints'
date: 2016-08-07
permalink: /2016/08/coloring-buttons-with-themeoverlays-background-tints.html
related: ['/2013/08/fragment-transaction-commit-state-loss.html',
    '/2013/04/retaining-objects-across-config-changes.html',
    '/2016/08/contextcompat-getcolor-getdrawable.html']
---

<!--morestart-->

Let's say you want to change the background color of a regular old `Button`.
How should this be done? 

This blog post covers two different approaches. In the first approach,
we'll override the `R.attr.colorButtonNormal` attribute directly using a custom theme,
and in the second, we'll make use of AppCompat's built-in background tinting support
to achieve an identical effect.

<!--more-->

### Approach #1: Modifying `R.attr.colorButtonNormal` using a custom theme

Before we get too far ahead of ourselves, we should first understand how the
background color of a button is actually
determined. The [material design spec](https://material.google.com/components/buttons.html)
has very specific requirements about what a button should look like in light
and dark themes. How are these requirements met under-the-hood?

#### Understanding `R.attr.colorButtonNormal`

You probably know that AppCompat injects its own widgets in place of many framework
{'fraction_non_alphanumeric': 0.09427732942039618, 'fraction_numerical': 0.02421129860601614, 'mean_word_length': 4.645962732919255, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1794461', 'n_tokens_mistral': 802, 'n_tokens_neox': 732, 'n_words': 302}