How to specify a Toolbar theme in the App Theme in Android?

Question

Currently I am using material components and material theme:

  <style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
   ...
   ...
   <item name="materialButtonStyle">@style/Button</item>
  </style>

I was able to define a style for every button using materialButtonStyle and I was wondering if it is possible to achieve the same for a toolbar.

THIS IS REALLY IMPORTANT: The idea is to avoid defining a style / theme in the appbar or toolbar component, but just use it a get the styles defined by the app theme.

I want to avoid this:

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:theme="@style/ToolbarTheme">

    <com.google.android.material.appbar.MaterialToolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:titleTextAppearance="@style/ToolbarTextAppearance"
      tools:title="Title" />

</com.google.android.material.appbar.AppBarLayout>

Inside the theme I want to be able to specify the font style and the text appearance.

These are my style:

  <style name="ToolbarTheme" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
  </style>

  <style name="ToolbarTextAppearance" parent="TextAppearance.AppCompat.Title">
    <item name="android:fontFamily">@font/nunito_bold</item>
  </style>

Using the code defined previously, I am able to get those changes. But as I mentioned, I want to defined that as part of my app theme like the material button.

I tried using this but I did not succeed:

<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="appBarLayoutStyle">@style/ToolbarTheme</item>
    <item name="toolbarStyle">@style/ToolbarTheme</item>
</style>

Vorlage

Answer 1

This code works for me just fine:

<resources>

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="appBarLayoutStyle">@style/AppTheme.AppBarOverlay</item>
        <item name="toolbarStyle">@style/AppTheme.Toolbar</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <item name="android:background">?colorPrimary</item>

    </style>

    <style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">

        <item name="titleTextAppearance">@style/TextAppearance.MaterialComponents.Body1</item>

    </style>

</resources>

Sustentation

I was able to achieve the toolbar style with your code. I still have issues applying a theme to the appbar. As far as I can see you need to apply a background otherwise it does not work.. but you use app:theme in the appBar then you do not need to use background color, which i suppose that is the idea of using ThemeOverlay.MaterialComponents.Dark.ActionBar – Vorlage

Answer 2

You can add in your app theme the toolbarStyle attribute:

<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="toolbarStyle">@style/MyToolbar</item>
</style>

Then define your custom style:

<style name="MyToolbar" parent="@style/Widget.MaterialComponents.Toolbar">
  <item name="titleTextAppearance">@style/MyToolbartitleTextAppearance</item>
</style>

<style name="MyToolbartitleTextAppearance" parent="@style/TextAppearance.MaterialComponents.Headline6">
   ...
   <item name="fontFamily">....</item>
   <item name="android:fontFamily">....</item>    
</style>

In your layout use the com.google.android.material.appbar.MaterialToolbar.

To define globally a style for the AppBarLayout use in your app theme the attribute (in your case is not clear what you want to customize).

<item name="appBarLayoutStyle">@style/...</item>

Hatfield

Thanks! Do you have any idea how to specify the appBarTheme in the app theme? for example... <style name="AppBarTheme" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"> – Vorlage

@LeandroOcampo Updated the answer. But it is not clear what you try to achieve. May be there is a better way. – Hatfield

Answer 3

In Styles file add this:

     <style name="MyToolbarStyle" parent="@android:style/TextAppearance.Medium">
       <item name="android:textColor">?attr/color_text_primary</item>
       <item name="android:textSize">20sp</item>
      <item name="android:fontFamily">sans-serif-smallcaps</item>
     </style>

Then in your MainActivity class:

     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
     setSupportActionBar(toolbar); 
     toolbar.setTitleTextAppearance(this, R.style.MyToolbarStyle);

Bennet

Hi! thanks for your answer. The problem is that this is the same as setting this style through xml. I want to specify that in the app theme. – Vorlage

Nothing else worked for me except doing it programmatically. Sorry for any inconveniences. – Bennet