Styling Preference Widget for PreferenceFragmentCompat

Here is the easiest but dirty way how to do it.

This method actually override layout what androidx library provide. So we need to access the library itself.

1. Open project directory view.

2. Access External Libraries -> androidx.preference:preference -> res -> layout.

3. Copy the layout you wanted to override. For example, we try to change color of PreferenceCategory text. So, we need to copy preference_category_material.xml and then paste it to res/layout of my project.

4. Take a look at picture above. The title color of PreferenceCategory text still using teal color. Let’s say we wanted to change it to purple. So we need change textColor attribute in TextView tag with title id.

5. Here is what it looks like.

6. For the next example, we try to change switch color theme. We need to copy preference_widget_switch_compat.xml file from androidx preference library. Then paste it to our project at res/layout. We pick preference_widget_switch_compat.xml file because we use SwitchPreferenceCompat tag at root_preference.xml file.

7. Here is some snippet to make switchcolor purple when activated

<style name="Theme.SettingsActivityExample.Switch" parent="Theme.AppCompat.Light">
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">@color/purple_500</item>

    <!-- inactive thumb color -->
    <item name="colorSwitchThumbNormal">#f1f1f1</item>

    <!-- inactive track color (30% transparency) -->
    <item name="android:colorForeground">#42221f1f</item>
</style>

8. Copy the snippet and paste it to themes.xml file.

9. Use the snippet as theme of switch at preference_widget_switch_compat.xml file.

10. It works!