DChiuch DChiuch - 2 months ago 12
Android Question

Squashed icons in toolbar after change to Android SDK 26

After changing my app from compiling/targeting SDK v25 to SDK v26, all of the menu icons in my app's toolbar are now squashed/squished/stretched.

Here's the relevant layout code:

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/AppTheme.AppBarOverlay" />

<br.com.mauker.materialsearchview.MaterialSearchView
android:id="@+id/search_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

</android.support.design.widget.AppBarLayout>


Here's a menu that squishes:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item android:id="@+id/action_search"
android:title="@string/search"
android:icon="@drawable/ic_search_white_48dp"
app:showAsAction="ifRoom" />

<item
android:id="@+id/advanced_search"
android:enabled="true"
android:title="@string/advanced_search"
app:showAsAction="never" />

</menu>


Here's another menu that squishes (they all do):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:id="@+id/add_photo"
android:enabled="true"
android:title="@string/add_photo"
android:icon="@drawable/ic_add_a_photo_white_48dp"
app:showAsAction="ifRoom" />

</menu>


How it looks on SDK v25

How it looks on SDK v26

Answer Source

The matter is that the icon size is bigger then the expected. Obviously the scaling mechanism has changed in SDK 26 and now it leads to this UI bug. Make sure the toolbar icon resources are provided in the following sizes.

Updated:

Since the Toolbar min height abc_action_bar_default_height_material is 56dp and abc_action_bar_icon_vertical_padding_material is 16dp, the toolbar icons are meant to be with a min size of 24dp in mdpi:

drawable-mdpi - 24 x 24 px
drawable-hdpi - 36 x 36 px
drawable-xhdpi - 48 x 48 px
drawable-xxhdpi - 72 x 72 px
drawable-xxxhdpi - 96 x 96 px