Android Toolbar: title and overflow menus aligment issue on 5.0 only

问题

I am developing an Android app following Material Design standards, and in order to maintain compatibility I implemented a custom Toolbar as shown here: http://www.android4devs.com/2014/12/how-to-make-material-design-app.html with my code for the toolbar being

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:theme="@style/AppToolbar"
        android:background="@color/primary"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:elevation="4dp" >

I then overrode the AppCompat style in values/style and specified primary and secondary colors to adjust the ActionBar layout.

<resources>

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:colorPrimary">@color/primary</item>
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <item name="android:textColor">@color/primary_text</item>
    <item name="android:textColorPrimary">@color/accent</item>
    <item name="android:textColorSecondary">@color/accent</item>
    <item name="android:actionMenuTextColor">@color/accent</item>
    <item name="android:itemTextAppearance">@style/menuAppearance</item>
    <item name="android:editTextColor">@color/primary_text</item>
    <item name="android:textColorHint">@color/secondary_text</item>
    <item name="android:colorControlHighlight">@color/accent</item>
    <item name="android:colorAccent">@color/accent</item>
</style>

<style name="menuAppearance" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
    <item name="android:textColor">@color/accent</item>
</style>

</resources>

Toolbar v21/style resource:

<style name="AppToolbar" parent="android:Widget.Material.Toolbar">
    <item name="android:background">@color/primary</item>
    <item name="android:textColorPrimary">@color/accent</item>
</style>

I finally used setSupportActionBar(Toolbar toolbar) method to set the Action Bar. Activity titles are in the Manifest, while menu items attributes are coded in the respective xml files.

I tried my application on a Samsung s3 mini (Android version: 4.1.2) and it worked just fine. Titles and menu icon align perfectly at vertical center of the toolbar, and overflow menu layout is ok. When moving on an Asus Zenfone2 ZE500CL mounting Lollipop (5.0), however, I discovered that title and overflow menu texts layout was messed up: they are stuck up the Toolbar and overflow menu list top side, while other menu items such as HomeIndicator and always-shown ones remain vertically centered into the toolbar.

I spent a day on the Internet trying to figure this out, but all questions were about messed up layouts which could be fixed by specifying a proper height for the toolbar. Lots of people suggested to add a TextView into the Toolbar to fix the title, I tried and it did, but my problem goes deeper, for Overflow menu items are still top aligned.

I can't add screenshots directly, so I'm posting this image from Google Drive, hoping it will make things clearer https://drive.google.com/file/d/0BzSgLr3IafUYUGhOS3BlYjY4UjA/view?usp=sharing Thanks in advance for your help!

回答1:

I eventually came up with the solution to my problem; I'm sharing it for whoever faces the same issue. I realized the toolbar is only needed for pre-Lollipop devices, so I created two different Themes for the application: one WITHOUT the ActionBar in style.xml resource, and one WITH the ActionBar in v21 version of the style resource. Into style.xml:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    ...
</style>

Into v21/style.xml:

<style name="AppTheme" parent="Theme.AppCompat">
    ...
</style>

This way, whenever a pre-Lollipop device launches the app, it will launch the ActionBar-less version. Changes are needed in the Activity layout and class as well: as for style, I created a v21 version of the Activity layout for Lollipop devices and included the Toolbar in the original layout only: into layout/activity_main.xml

<RelativeLayout ...>

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />
...

Finally, into OnCreate method inserted this conditional:

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {

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

in order to fill up the empty ActionBar on pre-Lollipop devices only. I tried the application on both my devices and it finally worked. Note that for v21 version of an xml resource I mean a copy of the original file, saved into "resource_type"-v21 folder.

来源：https://stackoverflow.com/questions/31785410/android-toolbar-title-and-overflow-menus-aligment-issue-on-5-0-only

标签

android

android-layout

toolbar

material-design