Toolbar Height in Landscape mode (FIX)

Toolbar height issue

Screenshot_2015-04-19-11-32-36If you’ve noticed by now, the Toolbar height by default when compared in normal and landscape mode, is different. There seems to be extra padding at the bottom where the Toolbar title is not vertically centered.

This issue is all the more prominent when you attach a scrollable view. The views scrolls slightly into the toolbar.

Screenshot_2015-04-19-11-32-49

The solution

Now, the fix for this is relatively simple. We need to change our toolbar height  to what our minimum height is. Open toolbar.xml, remove the minHeight attribute and change the layout_height to ?attr/actionBarSize

So your initial Toolbar layout would be like this:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

That would be changed to:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

 

Here is a deliberate side by side comparison for you to see the difference between how the Toolbar height WAS in landscape, and how its supposed to be on the right (after we fixed it).

So my suggestion is to stick to using the android:layout_height attribute for your Toolbar layout height and avoid using app:minHeight  especially when dealing with landscape mode and scrollable views.

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn’t annoy people. In his spare time, he likes to draw and paint.
Subscribe to Newsletter
Be the first to get latest updates and exclusive content
straight to your email inbox.
STAY UPDATED
Chill, I hate spam too. You can unsubscribe anytime.

Suleiman

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn't annoy people. In his spare time, he likes to draw and paint.

You may also like...

Subscribe to Newsletter
Be the first to get latest updates and exclusive content
straight to your email inbox.
STAY UPDATED
Chill, I hate spam too. You can unsubscribe anytime.
Gradle setup, ProGuard rules, Material Design palette, metrics and much more

FREE Material Design Starter Project

For more details, click on the below link.
GET IT NOW FOR ANDROID STUDIO!
Download FREE
STARTER PROJECT
Material Design Template Project for Android Studio
DOWNLOAD STARTER PROJECT
Learn to ready your apps for Android O
Are your apps ready for Android O?