web-dev-qa-db-fra.com

Quelle est la taille des icônes du tiroir de navigation?

J'ai besoin de connaître la taille correcte (plan de travail et contenu) pour les icônes du tiroir de navigation.

Il ne dit rien sur les spécifications du tiroir de navigation: http://www.google.com.br/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs

Merci!

androidnavigation-drawerandroid-design-libraryandroid-navigationview
16
thiagolr

Je voterais en faveur de la réponse de Balar, mais elle est décalée par un petit détail. La bonne réponse est que toutes les petites icônes doivent être 24 x 24 dp .

Référence: https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size

20
MusicMaster

Pour: 

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

Selon leurs ratios: 

mdpi : hdpi : xhdpi : xxhdpi : xxxhdpi= 1 : 1.5 : 2 : 3 : 4

Mise à jour:

Maintenant, Google a publié un design d'icône de matériau avec plus de détails.Les icônes peuvent être réduites à 20dp avec une zone de rognage de 2dp entourant l'icône.

enter image description here

Pour en savoir plus, visitez le site Material Design .

20
Sayem

Vous pouvez vérifier l'implémentation officielle de NavigationView fournie par la bibliothèque de conception de support.

Si vous voyez le code de NavigationMenuItemView, il définit:

this.mIconSize = 
 context.getResources().getDimensionPixelSize(dimen.navigation_icon_size);

où:

<dimen name="navigation_icon_size">24dp</dimen
8
Gabriele Mariotti

les dimensions de ces icônes de navigation sont généralement de 24 x 24 pixels

1
Conall_Heffernan

Si vous n'avez besoin que de la taille de l'icône pour définir les dimensions d'un composant de vue, vous pouvez utiliser le style Toolbar.Button.Navigation. Voici un exemple où je crée une fausse vue d'icône de navigation.

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/vCoordinatorLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <!--CONTENT VIEW-->
        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical">

        </LinearLayout>

        <!--FAKE TOOLBAR NAVIGATION ICON-->
        <RelativeLayout
            Android:layout_width="?attr/actionBarSize"
            Android:layout_height="?attr/actionBarSize">
            <ImageView
                Android:id="@+id/vToolbarNavigationIcon"
                style="@style/Widget.AppCompat.Toolbar.Button.Navigation"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_centerInParent="true"
                Android:src="@drawable/my_icon"/>
        </RelativeLayout>

    </Android.support.design.widget.CoordinatorLayout>
1
Justin Fiedler