android: drawable Margine sinistro e / o imbottitura


Risposte:


466

Come cephus citato android:drawablePadding, forzerà l'imbottitura tra il testo e il disegno solo se il pulsante è abbastanza piccolo.

Quando si android:drawablePaddingdispongono pulsanti più grandi, è possibile utilizzare insieme a android:paddingLefteandroid:paddingRight per forzare il testo e il disegno verso l'interno verso il centro del pulsante. Regolando le imbottiture sinistra e destra separatamente è possibile apportare regolazioni molto dettagliate al layout.

Ecco un pulsante di esempio che utilizza il riempimento per avvicinare il testo e l'icona più di quanto non lo sarebbero per impostazione predefinita:

<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" sono la chiave qui!
IgorGanapolsky,

4
questo non è correlato alla domanda, ma android: gravity = "center" manterrà il testo allineato con il centro del disegno!
cwhsu,

1
E se avessimo i disegni sia a sinistra che a destra e dovessimo solo regolare il disegno a destra ??
nmxprime,

Uso solo: android: paddingLeft, e cambia la posizione dell'immagine. android: drawablePadding viene utilizzato per lo spazio tra immagine e testo.
Coraggioso

Il problema di questo codice è che fa passwordToggleDrawableaumentare il gap di riempimento sinistro poiché non può target specifico solo da disegnare.
Frutta

184

TextView ha una proprietà android: drawablePadding che dovrebbe fare il trucco:

Android: drawablePadding

L'imbottitura tra i disegni e il testo.

Deve essere un valore di dimensione, ovvero un numero in virgola mobile aggiunto con un'unità come "14.5sp". Le unità disponibili sono: px (pixel), dp (pixel indipendenti dalla densità), sp (pixel ridimensionati in base alla dimensione del carattere preferita), in (pollici), mm (millimetri).

Questo può anche essere un riferimento a una risorsa (nella forma "@ [pacchetto:] tipo: nome") o all'attributo del tema (nella forma "? [Pacchetto:] [tipo:] nome") contenente un valore di questo tipo .

Ciò corrisponde al simbolo della risorsa dell'attributo globale drawablePadding.


61

android:drawablePaddingcreerà uno spazio tra il testo e il disegno solo se il pulsante è abbastanza piccolo da schiacciare i 2 insieme. Se il tuo pulsante è più largo della larghezza combinata (per drawableLeft / drawableRight) o altezza (per drawableTop / drawableBottom), drawablePadding non fa nulla.

Sto lottando con questo proprio adesso. I miei pulsanti sono abbastanza larghi e l'icona è appesa sul bordo sinistro del pulsante e il testo è centrato al centro. Il mio unico modo per aggirare questo per ora è stato quello di cuocere in un margine sul disegno aggiungendo pixel vuoti al bordo sinistro della tela con Photoshop. Non è l'ideale e non è nemmeno raccomandato. Ma questa è la mia soluzione stop-gap per ora, a meno di ricostruire TextView / Button.


grazie per aver spiegato il mio problema. Non ho capito che è causato solo quando il pulsante è abbastanza largo
peter.bartos,

Ho lo stesso problema. Il mio pulsante è largo, quindi il disegno non è vicino al testo
Milad Faridnia,

yay ha funzionato grazie
dave o grady

43

Sì. usa drawablePadding come segue,

<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

Crea le tue risorse disegnabili.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 Ho usato l'inser in drawable e funziona benissimo per i dispositivi con la versione più recente. Voglio dire, non funziona in SDK 16, 17 ma funziona in SDK 23. C'è qualche idea?
Bhavin Chauhan,


Bella risposta e voto positivo per questo. Mi aiuti a risolvere un problema che mi ha confuso a lungo.
Anthonyeef,

34

android:drawablePaddingè il modo più semplice per dare un'imbottitura a un'icona di disegno ma non puoi dare un'imbottitura specifica su un lato come paddingRighto paddingLeftdi un'icona di disegno. Per ottenere ciò devi scavare al suo interno. E se si applica paddingLefto paddingRighta Edittextallora posizionerà l'imbottitura per intero Edittextinsieme all'icona disegnabile.


12

definisci una forma per il tuo edittext e dagli un padding Ad esempio

<?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>

L'imbottitura definita in questa forma ti aiuterà a dare l'imbottitura a sinistra o destra ---------------------- Applica questa forma su 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'uso di quella forma definita come sfondo darà al tuo EditText uno stile più margine a drawableLeft.


12

android: drawablePadding è il modo più semplice per dare un'imbottitura all'icona disegnabile ma non puoi dare un'imbottitura specifica su un lato come paddingRight o paddingLeft dell'icona drawable.Per ottenere che devi scavare al suo interno. E se applichi il padding Sinistra o padding verso destra su Edittext, posizionerà il padding sull'intero Edittext insieme all'icona disegnabile.

<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"/>

Dovresti usare "dp"
Mark Pazon il

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"/>

nota: layout_width deve essere wrap_content e utilizzare paddingLeft paddingRight drawablePadding per controllare il gap. Se specifichi layout_width il valore è diviso tra icona e testo, penso che una volta attribuito a layout_width un valore specifico, il padding misurerà.


9

Lancio anche la mia risposta sul ring. Se vuoi farlo a livello di codice puoi fare quanto segue.

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);

Ciò aggiungerà l'imbottitura alla fine del disegno dove fine significherà sinistra / destra a seconda che il telefono sia in LTR o RTL.


7

Invece di Buttonusare LinearLayoutcon ImageViewe TextViewdentro. In articoli figlio come ImageViewe TextViewuso android:duplicateParentState="true".


Avrai effettivamente bisogno di un FrameLayout e di un Button (e ImageView / TextView all'interno del loro LinearLayout) per riprodurre l'interfaccia utente dei pulsanti e trasferire onclicklistener () nella parte del pulsante
3c71

1
Perché usare un layout aggiuntivo se hai già drawablePadding in TextView.
Parinda Rajapaksha,

5

Dovresti prendere in considerazione l'utilizzo dell'elenco dei livelli

Crea un file disegnabile come questo, chiamalo come 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>

Sotto il file di layout,

<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

Puoi usare un'imbottitura per il pulsante e puoi giocare con 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" />

puoi usare un padding specifico dipende da dove metti il ​​tuo drawable, con android: paddingLeft = "10dp" o android: paddingBottom = "10dp" o android: paddingRight = "10dp" o android: paddingTop = "10dp"


2

È possibile utilizzare android:drawableLeft="@drawable/your_icon"per impostare il disegno da visualizzare sul lato sinistro. Per impostare un'imbottitura per il disegno è necessario utilizzare rispettivamente android:paddingLefto android:paddingRightper impostare l'imbottitura sinistra / destra.

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

1

Se la dimensione della risorsa estraibile è fissa, puoi fare così:

<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 chiave qui è che:

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

Cioè, la dimensione della risorsa estraibile più paddingRight è il paddingLeft.

Puoi vedere il risultato in questo esempio


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

addressTitleView.setCompoundDrawablePadding();

Mentre questo frammento di codice può risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e che queste persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
Rosário Pereira Fernandes,

Questo funziona solo per la visualizzazione di testo, ad esempio il pulsante che consente anche di impostare i drwables di inizio / fine
Ixx

1

rifare da:

<?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>

per

<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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.