Changing EditText bottom line color with appcompat v7

Enhancing the app theme for EditText

Understanding app theme attributes and their role

Boost the appeal of all your EditText components by overriding colorControlActivated, colorControlHighlight, and colorControlNormal in your application theme. These attributes help in customizing the bottom line color during different states (active, highlight, normal).

Injecting the enhanced theme to the Activity

To wield the powers of your enhanced theme with an Activity:

<activity android:name=".FocusedActivityName" android:theme="@style/EnhancedAppTheme"></activity>


This gives you the benefit of deploying your theme across all EditTexts.

Crafting a custom AppCompat theme

Craft your own theme using the best of AppCompat:

<style name="EnhancedAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlActivated">@color/normal_blue</item> <!-- When focused on a EditText, the matrix sees it as blue -->
    <item name="colorControlHighlight">@color/highlighting_purple</item> <!-- No more neon lights, now's the era of purple -->
    <item name="colorControlNormal">@color/game_of_greys_item</item> <!-- When the EditText doesn't want to stand out in the crowd. -->
</style>


Version compatibility

For API level 21 and higher, you got android:backgroundTint by your side to maintain consistency. For those catering to lesser API levels, use app:backgroundTint to get the job done. Be sure to appropriately use setBackground or setBackgroundDrawable, considering the API version.

Advanced customization tips and tricks

The one-man show: Single EditText customization

You don't need to overhaul the global theme for this – just some mutate() and setColorFilter() magic:

Drawable drawable = yourEditText.getBackground();
// One does not simply change colors. We mutate first. 
drawable.mutate().setColorFilter(ContextCompat.getColor(context, R.color.the_chosen_one), PorterDuff.Mode.SRC_ATOP);
yourEditText.setBackground(drawable);


XML styling for various API levels

Use XML to cleanly differentiate the color attributes for different API levels. This promotes both compatibility and clarity in resource management:

<color name="editTextUnderlineColor">#FF5722</color>


How to use Drawable mutations

Invoke mutate() to restrict your styling, preventing accidental global changes. It's like making your EditText immune to the theme epidemic.

Theming single views

Leverage the new view-specific theme capabilities in appcompat-v7, and avoid affecting global styles.

Maintaining color consistency

To maintain consistent coloring across your app:

<EditText
    android:backgroundTint="@color/consistent_color_resource" />
