Android: margen izquierdo y / o relleno acolchado


Respuestas:


466

Como mencionó Cephus android:drawablePadding, solo forzará el relleno entre el texto y el dibujo si el botón es lo suficientemente pequeño.

Al diseñar botones más grandes, puede usarlos android:drawablePaddingjunto con android:paddingLefty android:paddingRightpara forzar el texto y el dibujo hacia el centro del botón. Al ajustar el relleno izquierdo y derecho por separado, puede realizar ajustes muy detallados en el diseño.

Aquí hay un botón de ejemplo que usa relleno para acercar el texto y el icono de forma predeterminada:

<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" son la clave aquí!
IgorGanapolsky

44
esto no está relacionado con la pregunta, pero android: gravity = "center" mantendrá el texto alineado con el centro del dibujo.
cwhsu

1
¿Qué pasa si tenemos elementos dibujables tanto a la izquierda como a la derecha, y solo tenemos que ajustar el dibujo a la derecha?
nmxprime

Solo uso: android: paddingLeft, y cambia la posición de la imagen. android: drawablePadding se usa para el espacio entre la imagen y el texto.
Valiente

El problema de este código es que hace que el passwordToggleDrawableespacio de relleno izquierdo se vuelva más grande, ya que no puede especificar el objetivo solo a la izquierda.
Fruta

184

TextView tiene una propiedad android: drawablePadding que debería hacer el truco:

android: drawablePadding

El relleno entre los dibujables y el texto.

Debe ser un valor de dimensión, que es un número de coma flotante agregado con una unidad como "14.5sp". Las unidades disponibles son: px (píxeles), dp (píxeles independientes de la densidad), sp (píxeles escalados según el tamaño de fuente preferido), en (pulgadas), mm (milímetros).

Esto también puede ser una referencia a un recurso (en la forma "@ [paquete:] tipo: nombre") o atributo del tema (en la forma "? [Paquete:] [tipo:] nombre") que contiene un valor de este tipo .

Esto corresponde al símbolo de recurso de atributo global drawablePadding.


61

android:drawablePaddingsolo creará un espacio de relleno entre el texto y el dibujo si el botón es lo suficientemente pequeño como para aplastar los 2 juntos. Si su botón es más ancho que el ancho combinado (para drawableLeft / drawableRight) o la altura (para drawableTop / drawableBottom), drawablePadding no hace nada.

Estoy luchando con esto ahora mismo también. Mis botones son bastante anchos, y el icono está colgado en el borde izquierdo del botón y el texto está centrado en el medio. Mi única forma de evitar esto por ahora ha sido hornear en un margen en el dibujable agregando píxeles en blanco en el borde izquierdo del lienzo con Photoshop. No es ideal, y tampoco es realmente recomendable. Pero esa es mi solución provisional por ahora, salvo reconstruir TextView / Button.


Gracias por explicar mi problema. No me he dado cuenta de que solo se produce cuando el botón es lo suficientemente ancho
Peter.bartos

Tengo el mismo problema. Mi botón es ancho, por lo que el dibujo no está cerca del texto
Milad Faridnia

yay funcionó gracias
dave o grady

43

Si. use drawablePadding de la siguiente manera,

<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

Haga sus recursos dibujables.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 He usado el recuadro en dibujable y funciona bien para dispositivos de versiones más recientes. Quiero decir que no funciona en SDK 16, 17 sino en SDK 23. ¿Hay alguna idea?
Bhavin Chauhan


Buena respuesta y voto positivo para esto. Solo me ayudas a resolver un problema que me confundió durante mucho tiempo.
Anthonyeef

34

android:drawablePaddinges la forma más fácil de dar relleno a un icono dibujable, pero no puede dar un relleno lateral específico como paddingRighto paddingLeftde un icono dibujable. Para lograrlo, debe profundizar en él. Y si aplica paddingLefto paddingRightpara Edittext, colocará el relleno completo Edittextjunto con el icono dibujable.


12

define una forma para tu texto de edición y dale un relleno Por ejemplo

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

El relleno definido en esta forma ayudará a dar relleno a drawableleft o right ---------------------- Aplicar esta forma en 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"
         />

el uso de esa forma definida como fondo le dará a su EditText algo de estilo más margen para drawableLeft.


12

android: drawablePadding es la forma más fácil de dar relleno a un icono dibujable, pero no puede proporcionar un relleno lateral específico como paddingRight o paddingLeft of drawable icon. Para lograrlo, debe profundizar en él. Y si aplica paddingLeft o paddingRight a Edittext, colocará el relleno en todo Edittext junto con el icono dibujable.

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

Deberías usar "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"/>

nota: layout_width debe ser wrap_content y usar paddingLeft paddingRight drawablePadding para controlar la brecha. Si especifica que el valor de layout_width tiene un espacio entre el icono y el texto, creo que una vez que le dé al valor de layout_width un valor específico, se medirá el relleno.


9

También arrojaré mi respuesta al ring. Si desea hacer esto mediante programación, puede hacer lo siguiente.

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

Esto agregará el relleno al final del dibujo donde final significará izquierda / derecha dependiendo de si el teléfono está en LTR o RTL.


7

En lugar de Buttonusar LinearLayoutcon ImageViewy TextViewdentro. En artículos infantiles como ImageViewy TextViewuso android:duplicateParentState="true".


En realidad, necesitará un FrameLayout y un Button (y ImageView / TextView dentro de su propio LinearLayout) para reproducir la interfaz de usuario del botón y transferir el onclicklistener () a la parte del botón
3c71

1
¿Por qué usar un diseño adicional si ya tiene drawablePadding en TextView?
Parinda Rajapaksha

5

Deberías considerar usar la lista de capas

Cree un archivo dibujable como este, asígnele el nombre 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>

Debajo del archivo de diseño,

<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

Puede usar un relleno para el botón y puede jugar con relleno extraíble

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

puede usar un relleno específico dependiendo de dónde coloque su elemento de dibujo, con android: paddingLeft = "10dp" o android: paddingBottom = "10dp" o android: paddingRight = "10dp" o android: paddingTop = "10dp"


2

Puede usar android:drawableLeft="@drawable/your_icon"para configurar el dibujo que se mostrará en el lado izquierdo. Para establecer un relleno para el dibujo, debe usar android:paddingLefto android:paddingRightpara configurar el relleno izquierdo / derecho respectivamente.

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

1

Si el tamaño del recurso extraíble es fijo, puede hacer lo siguiente:

<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 clave aquí es que:

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

Es decir, el tamaño del recurso extraíble más paddingRight es el paddingLeft.

Puedes ver el resultado en este ejemplo


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

addressTitleView.setCompoundDrawablePadding();

Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código.
Rosário Pereira Fernandes

Esto solo funciona para la vista de texto, no por ejemplo, el botón que también permite configurar drwables de inicio / fin
Ixx

1

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

a

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.