简体   繁体   中英

Align an icon with the Toolbar icon - Android Material Design

In the new Material Design (using AppCompat), I am trying to align some action icons with the drawer icon of the new toolbar. Something like:

在此输入图像描述

I think I am looking in all the metrics correctly...

Touch Target Size

在此输入图像描述

The problem is that I can't perfectly align it, because after that left padding of 16px, the icons should start, but the icon itself has also some "padding" (icon from material github), like:

在此输入图像描述

Maybe is silly but I do not know what I am missing. How can I take into account the padding inside the image to properly align it? I have same problem with aligning radio buttons or checkbox with that action bar icon.

I tried this piece of code:

<RelativeLayout
    android:id="@+id/image_button"
    android:layout_width="72dp"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="32dp"
        android:layout_height="48dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_label_grey600_48dp" />
</RelativeLayout>

But does not look align to me (like in the first screenshot I posted). Here also looks perfectly align:

在此输入图像描述

And looks likes is taking in account something more than that 72px and 16px of padding.


UPDATE

Ok, let me show you guys more examples and some code. Imaging that my list item has a radio button with a label text.

<RadioButton
     style="?android:textAppearanceMedium"
     android:layout_width="wrap_content"
     android:layout_height="48dp"
     android:layout_marginLeft="16dp"
     android:paddingLeft="32dp"
     android:singleLine="true"/>

Result:

在此输入图像描述

在此输入图像描述

I don't actually see a rule to set marginLeft and paddingLeft to the right values without using a custom button as a radio button (and knowing the dimensions of that button) ... <-- Which is a bad option because the color button is taken fro my accentColor (new stuff of Material).

It also looks like new Gmail app is facing some alignment issues (see when I select a mail, the 1 is not aligned anymore with the mail title):

在此输入图像描述

在此输入图像描述

The problem is that I can't perfectly align it, because after that left padding of 16px, the icons should start, but the icon itself has also some "padding" (icon from material github)

Yes, the icon must have some padding and it varies depending on which screen resolution the icon will be displayed. The padding for different screen density:
mdpi 4px * 1.0 = 4px
hdpi 4px * 1.5 = 6px
xhdpi 4px * 2.0 = 8px
xxhdpi 4px * 3.0 = 12px
xxxhdpi 4px * 4.0 = 16px
This is the padding included in the icon drawable and you shouldn't remove it. 图标住区

在此输入图像描述

http://www.google.com/design/spec/style/icons.html#icons-system-icons

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM