Home » Android » themes – Can I setup app global custom styles for android-support-design widgets?

themes – Can I setup app global custom styles for android-support-design widgets?

Posted by: admin May 14, 2020 Leave a comment

Questions:

I would like to define custom styles for some widgets from Android Support Design (like AppBarLayout, TextInputLayout, FAB…) and set up these styles as default for my project, as I can do with EditText and other system widgets. For exemple:

<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="android:editTextStyle">@style/Theme.MyApp.EditText</item>
</style>

<style name="Theme.MyApp.EditText" parent="Widget.AppCompat.EditText">
    <item name="android:textColor">@color/my_awsome_edittext_color</item>
    <item name="android:layout_height">wrap_content</item>
</style>

My current issue is set to up a AppBarLayout elevation=”0dp” for a specific Activity, which has its own theme. Checking out the Android Support Design AppBarLayout source code, I found out it has a theme named Widget.Design.AppBarLayout, so I did:

<style name="Theme.MyApp.AppBarLayout" parent="Widget.Design.AppBarLayout">
    <item name="elevation">0dp</item>
</style>

But I didn’t find a attribute to set it in my Theme.MyApp, like android:editTextStyle. And this is true for TextInputLayout, FAB and so on. These widgets sets up its themes getting directly from resource:

TypedArray a = context.obtainStyledAttributes(attrs, 
    R.styleable.AppBarLayout, R.style.Widget_Design_AppBarLayout);

So, really there is no way to define styles in this form? If not, there is any technical reason to not provide this feature?

How to&Answers:

With the Material Components Theme you can define in your app theme the style used by the widgets.
You can use something like:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

    <!-- Widget styles -->
    <item name="appBarLayoutStyle">@style/Widget.MaterialComponents.AppBarLayout.Primary</item>
    <item name="badgeStyle">@style/Widget.MaterialComponents.Badge</item>
    <item name="bottomAppBarStyle">@style/Widget.MaterialComponents.BottomAppBar</item>
    <item name="bottomNavigationStyle">@style/Widget.MaterialComponents.BottomNavigationView</item>
    <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Action</item>
    <item name="chipGroupStyle">@style/Widget.MaterialComponents.ChipGroup</item>
    <item name="chipStandaloneStyle">@style/Widget.MaterialComponents.Chip.Entry</item>
    <item name="extendedFloatingActionButtonStyle">@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon</item>
    <item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item>
    <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button</item>
    <item name="materialButtonOutlinedStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
    <item name="materialButtonToggleGroupStyle">@style/Widget.MaterialComponents.MaterialButtonToggleGroup</item>
    <item name="materialCardViewStyle">@style/Widget.MaterialComponents.CardView</item>
    <item name="navigationViewStyle">@style/Widget.MaterialComponents.NavigationView</item>
    <item name="sliderStyle">@style/Widget.MaterialComponents.Slider</item>
    <item name="snackbarStyle">@style/Widget.MaterialComponents.Snackbar</item>
    <item name="snackbarButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Snackbar</item>
    <item name="snackbarTextViewStyle">@style/Widget.MaterialComponents.Snackbar.TextView</item>
    <item name="tabStyle">@style/Widget.MaterialComponents.TabLayout</item>
    <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.FilledBox</item>
    <item name="toolbarStyle">@style/Widget.MaterialComponents.Toolbar</item>
</style>