android: drawableLeft margem e / ou preenchimento


Respostas:


466

Como o Cephus mencionado android:drawablePadding, forçará o preenchimento apenas entre o texto e o drawable se o botão for pequeno o suficiente.

Ao colocar botões maiores, você pode usar android:drawablePaddingem conjunto com android:paddingLefte android:paddingRightforçar o texto e o desenho para dentro em direção ao centro do botão. Ajustando o preenchimento esquerdo e direito separadamente, você pode fazer ajustes muito detalhados no layout.

Aqui está um botão de exemplo que usa preenchimento para aproximar o texto e o ícone do que eles seriam por padrão:

<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" são essenciais aqui!
IgorGanapolsky

4
isso não está relacionado à questão, mas o android: gravity = "center" manterá o texto alinhado com o centro do drawable!
cwhsu

11
E se tivermos drawables tanto à esquerda quanto à direita e precisarmos apenas ajustar o drawable direito?
nmxprime

Eu só uso: android: paddingLeft, e ele muda a posição da imagem. android: drawablePadding é usado para o espaço entre a imagem e o texto.
Admirável

O problema desse código é que ele passwordToggleDrawableaumenta o espaço esquerdo do preenchimento, pois não pode ser direcionado apenas para o drawable esquerdo.
Fruit

184

O TextView possui uma propriedade android: drawablePadding , que deve fazer o truque:

android: drawablePadding

O preenchimento entre as gavetas e o texto.

Deve ser um valor de dimensão, que é um número de ponto flutuante anexado a uma unidade como "14,5sp". As unidades disponíveis são: px (pixels), dp (pixels independentes da densidade), sp (pixels dimensionados com base no tamanho da fonte preferido), em (polegadas), mm (milímetros).

Isso também pode ser uma referência a um recurso (no formato "@ [package:] type: name") ou atributo de tema (no formato "? [Package:] [type:] name") contendo um valor desse tipo .

Isso corresponde ao símbolo do recurso de atributo global drawablePadding.


61

android:drawablePaddingsó criará um espaço de preenchimento entre o texto e o drawable se o botão for pequeno o suficiente para pressionar os 2 juntos. Se o botão for maior que a largura combinada (para drawableLeft / drawableRight) ou a altura (para drawableTop / drawableBottom), o drawablePadding não fará nada.

Também estou lutando com isso agora. Meus botões são bem amplos, e o ícone está pendurado na borda esquerda do botão e o texto está centralizado no meio. Minha única maneira de contornar isso por enquanto foi assar em uma margem no drawable adicionando pixels em branco à borda esquerda da tela com o photoshop. Não é o ideal e também não é realmente recomendado. Mas essa é a minha solução para o problema, por enquanto, antes da reconstrução do TextView / Button.


obrigado por explicar o meu problema. Eu não percebi que ele é causado apenas quando o botão é grande o suficiente
peter.bartos

Eu tenho o mesmo problema. Meu botão é grande para que o drawable não é perto do texto
Milad Faridnia

yay funcionou obrigado
dave o grady

43

Sim. use drawablePadding da seguinte maneira,

<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

Crie seus recursos desenhados.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 Eu uso inserível no drawable e está funcionando bem para dispositivos com versões mais recentes. Quero dizer, não está funcionando no SDK 16, 17, mas trabalhando no SDK 23. Existe alguma idéia?
Bhavin Chauhan


Boa resposta e voto positivo para isso. Você acabou de me ajudar a resolver um problema que me confundiu por muito tempo.
Anthonyeef 07/07

34

android:drawablePaddingé a maneira mais fácil de dar preenchimento ao ícone desenhável, mas Você não pode fornecer um preenchimento específico de um lado como paddingRightou paddingLeftdo ícone desenhável. E se você aplicar paddingLeftou, paddingRightem Edittextseguida, ele colocará o preenchimento como um todo, Edittextjuntamente com o ícone de desenho.


12

defina uma forma para o seu edittext e dê um preenchimento Por exemplo

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

O preenchimento definido nesta forma ajudará a dar preenchimento à esquerda de desenho ou à direita ---------------------- Aplique essa forma no 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"
         />

usar essa forma definida como plano de fundo dará ao EditText algum estilo e margem para drawableLeft.


12

android: drawablePadding é a maneira mais fácil de fornecer preenchimento ao ícone do drawable, mas você não pode fornecer um preenchimento de um lado específico, como paddingRight ou paddingLeft do ícone do drawable. E se você aplicar paddingLeft ou paddingRight ao Edittext, ele colocará o padding em todo o Text Edit junto com o ícone de desenho.

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

Você deveria estar usando "dp"
Mark Pazon 16/01

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

note: layout_width precisa ser wrap_content e use paddingLeft paddingRight drawablePadding para controlar o espaço. Se você especificar o valor layout_width is will tiver espaço entre o ícone e o texto, acho que, uma vez que o layout_width especifique o valor, o preenchimento será medido.


9

Vou jogar minha resposta no ringue também. Se você quiser fazer isso programaticamente, faça o seguinte.

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

Isso adicionará o preenchimento ao final do drawable, onde end significará esquerda / direita, dependendo do telefone estar em LTR ou RTL.


7

Em vez de Buttonusar LinearLayoutcom ImageViewe TextViewdentro. Em itens filhos, como ImageViewe TextViewuso android:duplicateParentState="true".


Você realmente precisa de um FrameLayout e um botão (eo ImageView / TextView dentro de seu próprio LinearLayout) para reproduzir o botão UI e transferir o OnClickListener () para o botão parte
3c71

11
Por que usar layout adicional se você já possui drawablePadding no TextView.
Parinda Rajapaksha

5

Você deve considerar o uso de lista de camadas

Crie um arquivo drawable como este, denomine 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>

Em arquivo de 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

Você pode usar um preenchimento para o botão e jogar com 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" />

você pode usar um preenchimento específico depende de onde colocar seu drawable, com android: paddingLeft = "10dp" ou android: paddingBottom = "10dp" ou android: paddingRight = "10dp" ou android: paddingTop = "10dp"


2

Você pode usar android:drawableLeft="@drawable/your_icon"para definir o drawable a ser mostrado no lado esquerdo. Para definir um preenchimento para o drawable, use android:paddingLeftou android:paddingRightpara definir o preenchimento esquerdo / direito, respectivamente.

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

1

Se o tamanho do recurso extraível for fixo, você poderá fazer o seguinte:

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

A chave aqui é que:

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

Ou seja, o tamanho do recurso extraível mais paddingRight é o paddingLeft.

Você pode ver o resultado neste exemplo


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

addressTitleView.setCompoundDrawablePadding();

Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Rosário Pereira Fernandes

Isso só funciona para exibição de texto não eg botão que também permite definir de início drwables / finais
Ixx

1

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

para

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.