Home » Android » Android Toolbar too high in landscape mode

Android Toolbar too high in landscape mode

Posted by: admin May 14, 2020 Leave a comment

Questions:

My min and target sdk is 21, and I am not using the support library.

I am using the new Toolbar widget, and generally it works, I just have a glitch in the way it looks. The action icons are centered in portrait mode, whereas the toolbar in landscape mode is higher, and the icons are not centered. Please take a look at the screenshots (read lines are just to make the problem more visible):

  • portrait:

portrait mode

  • landscape:

landscape mode

This might look like nothing, but when the actions are selected (like the ‘up’ arrow at the very left of the bar) the result is that a strip of few pixels below it is visible. I don’t like the way it looks.

The activity does not manage any configuration changes itself.

This is my code:

  • styles.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <style name="MyTheme" parent="android:Theme.Material.NoActionBar">
            <item name="android:toolbarStyle">@style/MyToolbarStyle</item>
        </style>
    
        <style name="MyToolbarStyle" parent="android:Widget.Toolbar">
            <item name="android:background">?android:attr/colorPrimary</item>
            <item name="android:elevation">2dp</item>
        </style>
    
    </resources>
    
  • XML usage:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    xmlns:tools="http://schemas.android.com/tools"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:context="com.test.TestActivity">
    
        <Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
    </RelativeLayout>
    

I tried messing around with the android:minHeight attribute, but setting to so, say, 30dp just moved the icons even more upwards, also in portrait mode.

I found this: https://code.google.com/p/android/issues/detail?id=77874
But there is no ?attr/actionBarSize…

How, if at all, can this problem be fixed? The phone the screenshots were taken on is a Nexus 6 (xxxhdpi), and the icon is from the google icon pack, and the biggest resource is xxhdpi. Is this the problem?

Update: the workaround from the aforementioned link does work when I use ?android:attr/actionBarSize. But, is this the only way? Seems a bit wrong, to need such workarounds for a new shiny component like this, even more so that the workaround requires an attribute value for a component to be replaced by the new one.

How to&Answers:

try to use:

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

for your toolbar.

Answer:

Add this in your toolbar style:

<item name="maxButtonHeight">?attr/actionBarSize</item>

Answer:

I had the same problem with android.support.v7.widget.Toolbar.

My solution:

Put your toolbar into a RelativeLayout with the height you want for your toolbar. Set your toolbars layout_height to “wrap_content” and align it to the vertical center. I hope it helps.

<RelativeLayout
        android:id="@+id/main_toolbar_relative_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            >
    </android.support.v7.widget.Toolbar>
</RelativeLayout>