Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the recommended ActionBar icon size in Material Design (Android API 21+)?

First of all, this question is related: How big should Action Bar(Toolbar) icons be in the new Android Material design?

In the related question it is clear that the touch target size of the action bar icons should be 48dp. I would like to get a couple of things clarified regarding these icon sizes in Material Design:

  1. On this page: Material Design Keylines - Touch Target Size there is two icons, the search icon is tiny (24dp) and the profile icon is much bigger (40dp). Is there any recommendation on how big the icon should be, within the 48dp touch target? It looks like the action bar icons that you can download from the Material Design site is 40dp (i.e. as the profile button in the linked site).

  2. I assume that the old Iconography instructions are out of date for Material Design, is that correct? This page says that the icons should be 32dp with a 24dp icon: Iconography.

  3. I also noticed that Android Asset Studio and Android Asset Studio for Material Design generate xxhdpi action bar icons with 96x96 pixels but I assumed they should be 144x144 pixels. I assume this since the xxhdpi 48dp action bar icons in the icons from the Material Design site is 144x144 pixels. Is it correct that Material Design ActionBar icons should be 144x144 pixels for xxhdpi?

like image 942
mikeesouth Avatar asked Jan 10 '15 08:01

mikeesouth


People also ask

What is the top part of an app called?

On Android, toolbars are called top app bars. It's recommended to use a platform's default text alignment for toolbar titles, unless multiple action buttons are present. Titles are left-aligned by default in top app bars.


1 Answers

  1. There are recommendation for most features. Toolbar icons should always be 24dp, while as you say circular features (including images and floating buttons) should be 40dp. You might find different values for different views, in the page you linked or in the "Components" side menu.

    I downloaded material icons some time ago, from here or here. In both cases icons are provided in different sizes, 18dp, 24dp, 36dp and 48dp. It's up to you to choose the best size and to set an appropriate padding on the view, to ensure a 48dp clickable area. In most cases if you chose an AppCompat or Material theme it will handle sizing and padding for you.

    Apart from that, e.g. when sizing a button, I would choose Buttons from the "Components" menu, and get size info there.

  2. Yes.

  3. You are probably right, 48dp icons for xxhdpi should be 144x144 pixels.

like image 60
natario Avatar answered Nov 28 '22 17:11

natario