Android Toolbar: small title text in landscape mode

Question

I'm testing the new Toolbar and AppCompat theme on Android and ran into a problem. My toolbar title text looks normal-sized on portrait mode but it became rather small on landscape mode although I didn't do anything in the code to change the title's text size. Here are the screen shots:

activity_main.xml:

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.techfunmyanmar.jujaka.ui.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- As the main content view, the view below consumes the entire
             space available using match_parent in both dimensions. -->
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- android:layout_gravity="start" tells DrawerLayout to treat
             this as a sliding drawer on the left side for left-to-right
             languages and on the right side for right-to-left languages.
             If you're not building against API 17 or higher, use
             android:layout_gravity="left" instead. -->
        <!-- The drawer is given a fixed width in dp and extends the full height of
             the container. -->
        <fragment
            android:id="@+id/navigation_drawer"
            android:name="com.techfunmyanmar.jujaka.ui.NavigationDrawerFragment"
            android:layout_width="@dimen/navigation_drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            tools:layout="@layout/fragment_navigation_drawer" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

styles.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>

        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>

    </style>

    <!-- Main application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">

    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
    </style>
</resources>

Demented

Instead of making the text size larger, should you consider of making the toolbar height smaller? As, this is what Google done in their GMail app. I post a similar question at #30897848 – Chloroprene

Answer 1

I tried to set android:titleTextAppearance of the toolbar but the style wasn't being applied. Then I realized I'm using the AppCompat theme so I used app:titleTextAppearance and the style is now being applied. It looks like the small letters in landscape are a problem in the built-in AppCompat.Toolbar.Title style itself so I overrode it to set the font size manually. The final code:

Toolbar XML:

<android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextAppearance="@style/ToolbarTitle"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Toolbar Style:

<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">20sp</item>
</style>

Demented

very good solution! The textSize should be 20sp, as portrait mode text size – Paleoecology

How can I apply this to standar support actionbar? (No toolbar) – Tillford

@ChillyChan here you go. Nothing special with my xml files. I don't use a Toolbar Widget at all. just the support actionbar <style name="Theme.myTheme" parent="Base.myTheme"/> <style name="Base.myTheme" parent="Theme.AppCompat"> <item name="colorPrimary">@color/primary_color</item> <item name="colorPrimaryDark">@color/primary_dark_color</item> <item name="colorAccent">@color/accent_color</item> <item name="android:windowBackground">@color/gray</item> </style> – Tillford

@ChillyChan kinda ungly code formating in comments but all I want is to have the same actionbar title-text size on both landscape and portrait modes – Tillford

Any updates on how to set this to the actionbar (without using toolbar)? – Thursby

@ChillyChan did you notice that icons alignment а is failed in landscape? I suppose they should be inline but they don't. How do I fix that? – Bedlamite

I've just faced the same problem with small text in landscape mode, found this answer, tried it, and figured out that it has a caveat. The primary problem is that the toolbar gets narrower in the landscape mode, so making the text larger results in that subtitle doesn't fit. – Motive

Perfect. Worked with toolbar. – Chastain

The cause is that the size is set to 14dp in landscape mode: android-sdk/platforms/android-23/data/res/values-land/dimens_material.xml <dimen name="text_size_title_material_toolbar">14dp</dimen> – Demisec

Answer 2

AOSP Issue #170707 was written regarding the change in text size for title and subtitle. Project Member response was "Works as intended. Identical to framework behavior." Although I don't find changing the text size to be the desirable default behavior, it sounds like the AppCompat engineers had to maintain consistency with the (flawed) framework behavior. Developers are then left to override the default styles as described in Chilly Chan's answer.

Additions to Chilly Chan's answer:

1) The subtitle text size can be controlled in a similar way by defining another style derived from TextAppearance.Widget.AppCompat.Toolbar.Subtitle.

2) Default values for title/subtitle size in portrait orientation are 20dp/16dp (on my Galaxy S3, 4.4.2.). Chilly Chan's example specifies "17sp". Use "sp" only if you want to let user preference setting affect title/subtitle size.

Ruppert

Don't use dp on text sizes. – Skyline

@qbix Thanks for pointing out dp. dp is the right thing to do for a Toolbar with a subtitle, imitating Google's default values. Using sp in the Toolbar results in the bottom half of the subtitle text being cropped off, when users have the Large Text accessibility setting turned on. The alternative is allowing the Toolbar to stretch to some unexpected height to fit the text, and even then, the subtitle text padding becomes incorrect (flush with bottom of Toolbar w/ 0 bottom padding), or at least a pain to manage. – Ideography

Answer 3

I was looking for a solution without custom Toolbar, but with custom style and this code did the trick for me:

styles.xml

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
    <item name="titleTextStyle">@style/MyTitleTextStyle</item>
</style>

<style name="MyTitleTextStyle" parent="@style/TextAppearance.AppCompat.Title">
    <item name="android:textSize">20sp</item> <!-- Default for portrait is 20sp and for landscape 14sp-->
</style>

AndroidManifest.xml

    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/MyTheme"/>

Where the MainActivity extends AppCompatActivity; tested on API 19, 22 and 23.

Absurdity

This is the BEST answer! – Donative

Answer 4

Try to add this to your toolbar section under the activity_main.xml.

android:minHeight="?android:attr/actionBarSize"

I also noticed that you are using standard dark action bar , suggest to use Theme with no action bar , defined a new toolbar where

 Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

<android.support.v7.widget.Toolbar
    android:id=”@+id/my_awesome_toolbar”
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”?attr/actionBarSize”
    android:background=”?attr/colorPrimary” />

Crus

Thanks but it's still small. – Demented

Using not dark action bar Theme ? running on emulator or phone ? – Crus

Thanks again. I tried "Theme.AppCompat.Light.NoActionBar" with the toolbar xml you posted and the title is still small. The only difference is the overflow icon and title turned black. Running on phone. Tested on ICS, KK and L. The text is small on all three phones in landscape mode. – Demented

<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textSize">17sp</item> </style> – Crus

Thanks for the help. I've fixed the problem and added my own answer to the question. I was using android:titleTextAppearance instead of app:titleTextAppearance. – Demented

Answer 5

I think it has to do with some layout changes performed when you rotate the device, ast it looks like you can prevent the resize by adding something like

  android:configChanges="orientation|screenSize"

in the AndroidManifest.xml for the activity you're in. As always, android:configChanges has more implications so should be used only if you really need it :)

Anacreontic

Hi all. I don't know why this comment had vote down. I tried configChanges and it is working without any other changes in xml. Thank man. @FrancescoMapelli – Fiore

thanks. I'd like to know the downvote reason as well... maybe I am missing something serious on why this is not ok. I know that my solution is more a workaround than a clean solution, but at least it works and gives hint on the causes – Anacreontic

This answer is incorrect because the text size will differ depending on the orientation of the device at View inflation time (usually app launch). So if you launch the app in portrait, your Toolbar will have a larger text size persisting through rotations. But if you launch the app in landscape, your Toolbar will have a smaller text size, again persisting through rotations. – Ideography

that's why I added the " As always, android:configChanges has more implications" caveat... – Anacreontic