Android: marge et / ou rembourrage drawableLeft


Réponses:


466

Comme mentionné cephus android:drawablePaddingne forcera le remplissage entre le texte et le dessinable que si le bouton est suffisamment petit.

Lorsque vous disposez des boutons plus grands, vous pouvez les utiliser android:drawablePaddingconjointement avec android:paddingLeftet android:paddingRightpour forcer le texte et le dessiner vers l'intérieur vers le centre du bouton. En ajustant séparément le rembourrage gauche et droit, vous pouvez apporter des ajustements très détaillés à la disposition.

Voici un exemple de bouton qui utilise le remplissage pour rapprocher le texte et l'icône plus près qu'ils ne le seraient par défaut:

<Button android:text="@string/button_label" 
    android:id="@+id/buttonId"
    android:layout_width="160dip"
    android:layout_height="60dip"
    android:layout_gravity="center"
    android:textSize="13dip"
    android:drawableLeft="@drawable/button_icon"
    android:drawablePadding="2dip"
    android:paddingLeft="30dip"
    android:paddingRight="26dip"
    android:singleLine="true"
    android:gravity="center" />  

22
android: paddingLeft = "30dip" android: paddingRight = "26dip" sont la clé ici!
IgorGanapolsky

4
ce n'est pas lié à la question, mais android: gravity = "center" gardera le texte aligné avec le centre du dessinable!
cwhsu

1
Et si nous avons des drawables à gauche et à droite, et que nous devons seulement ajuster la drawable à droite ??
nmxprime

J'utilise uniquement: android: paddingLeft, et cela change la position de l'image. android: drawablePadding est utilisé pour l'espace entre l'image et le texte.
Brave

Le problème de ce code est qu'il fait que l' passwordToggleDrawableécart de remplissage gauche devient plus grand car il ne peut pas cibler uniquement la gauche à dessiner.
Fruit

184

TextView a une propriété android: drawablePadding qui devrait faire l'affaire:

android: drawablePadding

Le rembourrage entre les tirables et le texte.

Doit être une valeur de dimension, qui est un nombre à virgule flottante ajouté à une unité telle que "14,5 points". Les unités disponibles sont: px (pixels), dp (pixels indépendants de la densité), sp (pixels mis à l'échelle en fonction de la taille de police préférée), en (pouces), mm (millimètres).

Il peut également s'agir d'une référence à une ressource (sous la forme "@ [package:] type: nom") ou à un attribut de thème (sous la forme "? [Package:] [type:] nom") contenant une valeur de ce type .

Cela correspond au symbole de ressource d'attribut global drawablePadding.


61

android:drawablePaddingne créera un espace de remplissage entre le texte et le dessinable que si le bouton est suffisamment petit pour serrer les 2 ensemble. Si votre bouton est plus large que la largeur combinée (pour drawableLeft / drawableRight) ou la hauteur (pour drawableTop / drawableBottom), alors drawablePadding ne fait rien.

Je me bats aussi avec ça en ce moment. Mes boutons sont assez larges et l'icône est suspendue sur le bord gauche du bouton et le texte est centré au milieu. Ma seule façon de contourner cela pour l'instant a été de cuire dans une marge sur le dessinable en ajoutant des pixels vierges au bord gauche de la toile avec Photoshop. Pas idéal, et pas vraiment recommandé non plus. Mais c'est ma solution provisoire pour l'instant, à moins de reconstruire TextView / Button.


merci d'avoir expliqué mon problème. Je n'ai pas réalisé que cela n'est causé que lorsque le bouton est suffisamment large
peter.bartos

J'ai le même problème. Mon bouton est large donc le dessinable n'est pas proche du texte
Milad Faridnia

yay cela a fonctionné merci
dave o grady

43

Oui. utilisez drawablePadding comme suit,

<TextView
        android:id="@+id/tvHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Settings and Contents"
        android:drawableLeft="@drawable/icon_success"
        android:drawablePadding="10dp" />

37

Faites vos ressources dessinables.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <inset android:drawable="@drawable/small_m" android:insetLeft="10dp" android:insetTop="10dp" />
    </item>
    <item>
        <inset android:drawable="@drawable/small_p" android:insetLeft="10dp" android:insetTop="10dp" />
    </item>
</selector>

2
@ The Finest Artist J'ai utilisé l'encart en dessinable et cela fonctionne très bien pour les appareils de version plus récente. Je veux dire que cela ne fonctionne pas dans les SDK 16, 17 mais dans le SDK 23. Y a-t-il une idée?
Bhavin Chauhan


Belle réponse et vote positif pour cela. Vous venez de m'aider à résoudre un problème qui m'a longtemps troublé.
Anthonyeef

34

android:drawablePaddingest le moyen le plus simple de donner un rembourrage à une icône dessinable mais vous ne pouvez pas donner un rembourrage spécifique d'un côté comme paddingRightou paddingLeftd'une icône dessinable. Pour y parvenir, vous devez creuser dedans. Et si vous appliquez paddingLeftou paddingRightà Edittextalors il placera le rembourrage à tout le Edittextlong avec l'icône dessinable.


12

définir une forme pour votre edittext et lui donner un rembourrage Par exemple

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <padding
        android:left="5dp"
        android:right="5dp"
    />
    <solid android:color="#F6F6F6" />
    <stroke
        android:width="1px"
        android:color="#C3C3C3" />

    <corners
        android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp" />
</shape>

Le rembourrage défini dans cette forme aidera à donner un rembourrage à drawableleft ou à droite ---------------------- Appliquer cette forme sur EditView

 <EditText
            android:id="@+id/example"
            android:layout_width="fill_parent"
            android:layout_height="36dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/shape2"
            android:drawableLeft="@drawable/icon1"
            android:drawablePadding="@dimen/txtDrwblPadding"
            android:ems="10"
         />

l'utilisation de cette forme définie comme arrière-plan donnera à votre EditText un style plus une marge à drawableLeft.


12

android: drawablePadding est le moyen le plus simple de donner un rembourrage à une icône dessinable, mais vous ne pouvez pas donner un rembourrage spécifique d'un côté comme paddingRight ou paddingLeft d'icône dessinable. Pour y parvenir, vous devez creuser dedans. Et si vous appliquez paddingLeft ou paddingRight à Edittext, il placera le remplissage à Edittext entier avec une icône dessinable.

<TextView android:layout_width="match_parent"
    android:padding="5sp"
    android:id="@+id/date"
    android:gravity="center|start"
    android:drawableEnd="@drawable/ic_calendar"
    android:background="@drawable/edit_background"
    android:hint="Not Selected"
    android:drawablePadding="10sp"
    android:paddingStart="10sp"
    android:paddingEnd="10sp"
    android:textColor="@color/black"
    android:layout_height="wrap_content"/>

Vous devriez utiliser "dp"
Mark Pazon

11
<TextView
    android:layout_width="wrap_content"
    android:layout_height="32dp"
    android:background="@drawable/a"
    android:drawableLeft="@drawable/concern_black"
    android:gravity="center"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:drawablePadding="10dp"
    android:text="text"/>

remarque: layout_width doit être wrap_content et utiliser paddingLeft paddingRight drawablePadding pour contrôler l'écart. Si vous spécifiez la valeur layout_width, il y aura un écart entre l'icône et le texte, je pense qu'une fois que vous donnez à layout_width une valeur spécifiée, le remplissage mesurera.


9

Je jetterai également ma réponse sur le ring. Si vous souhaitez effectuer cette opération par programme, vous pouvez procéder comme suit.

final Drawable drawable = ContextCompat.getDrawable(getContext(), R.drawable.somedrawable);
final boolean isLTR = ViewCompat.LAYOUT_DIRECTION_LTR == ViewCompat.getLayoutDirection(this);
final int iconInsetPadding = getResources().getDimensionPixelSize(R.dimen.icon_padding);

final Drawable insetDrawable = new InsetDrawable(drawable, isLTR ? 0 : iconInsetPadding, 0, isLTR ? iconInsetPadding : 0, 0);

Cela ajoutera le rembourrage à la fin du dessinable où la fin signifiera gauche / droite selon que le téléphone est en LTR ou RTL.


7

Au lieu d' Buttonutiliser LinearLayoutavec ImageViewet à l' TextViewintérieur. Dans les articles pour enfants comme ImageViewet TextViewutiliser android:duplicateParentState="true".


Vous aurez en fait besoin d'un FrameLayout et d'un Button (et ImageView / TextView dans leur propre LinearLayout) pour reproduire l'interface utilisateur du bouton et transférer le onclicklistener () à la partie bouton
3c71

1
Pourquoi utiliser une disposition supplémentaire si vous avez déjà drawablePadding dans TextView.
Parinda Rajapaksha

5

Vous devriez envisager d'utiliser la liste des couches

Créez un fichier dessinable comme celui-ci, nommez-le ic_calendar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>
<item android:right="10dp">
    <bitmap android:gravity="center_vertical|left"
        android:src="@drawable/ic_calendar_16dp"
        android:tint="@color/red"
        />
</item>
</layer-list>

Sous le fichier de mise en page,

<TextView
         android:id="@+id/tvDate"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:drawableLeft="@drawable/ic_calendar"
         android:textColor="@color/colorGrey"
         android:textSize="14sp" 
    />

4

Vous pouvez utiliser un rembourrage pour le bouton et vous pouvez jouer avec drawablePadding

 <Button
    style="@style/botonesMenu"
    android:padding="15dp"
    android:drawablePadding="-15dp"
    android:text="@string/actualizarBD"
    android:textAlignment="gravity"
    android:gravity="center"
    android:layout_row="1"
    android:layout_column="0"
    android:drawableTop="@drawable/actualizar"
    android:id="@+id/btnActualizar"
    android:onClick="actualizarBD" />

vous pouvez utiliser un rembourrage spécifique en fonction de l'emplacement de votre dessinable, avec android: paddingLeft = "10dp" ou android: paddingBottom = "10dp" ou android: paddingRight = "10dp" ou android: paddingTop = "10dp"


2

Vous pouvez utiliser android:drawableLeft="@drawable/your_icon"pour définir le dessin à afficher sur le côté gauche. Afin de définir un rembourrage pour le dessin, vous devez utiliser android:paddingLeftou android:paddingRightpour définir le rembourrage gauche / droit respectivement.

android:paddingRight="10dp"
android:paddingLeft="20dp"
android:drawableRight="@drawable/ic_app_manager"

1

Si la taille des ressources dessinables est fixe, vous pouvez faire comme ceci:

<Button
    android:background="@drawable/rounded_button_green"
    style="?android:attr/selectableItemBackground"
    android:layout_height="wrap_content"
    app:layout_widthPercent="70%"
    android:drawableRight="@drawable/ic_clear_black_24dp"
    android:paddingRight="10dp"
    android:paddingLeft="34dp"
    tools:text="example" />

La clé ici est que:

    android:drawableRight="@drawable/ic_clear_black_24dp"
    android:paddingRight="10dp"
    android:paddingLeft="34dp"

C'est-à-dire que la taille de la ressource dessinable plus paddingRight est le paddingLeft.

Vous pouvez voir le résultat dans cet exemple


1
textView.setCompoundDrawablesWithIntrinsicBounds(AppCompatResources.getDrawable(this,drawable),null,null,null);

addressTitleView.setCompoundDrawablePadding();

Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question pour les lecteurs à l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Rosário Pereira Fernandes

Cela ne fonctionne que pour l'affichage du texte et non par exemple un bouton qui permet également de définir les drwables de début / fin
Ixx

1

juste refaire à partir de:

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

    <corners android:radius="40dp"/>

    <solid android:color="@android:color/white"/>

</shape>

à

<layer-list
        xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:right="@dimen/_2dp"
            android:left="@dimen/_2dp"
            android:bottom="@dimen/_2dp"
            android:top="@dimen/_2dp"
            >
        <shape
                xmlns:android="http://schemas.android.com/apk/res/android">

            <corners android:radius="40dp"/>

            <solid android:color="@android:color/white"/>

        </shape>
    </item>

</layer-list>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.