android: drawableLeft margem e / ou preenchimento

383

É possível definir a margem ou o preenchimento da imagem que adicionamos com o android:drawableLeft?

androidNewbies
fonte

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" />  
Jordânia
fonte
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.

Cheryl Simon
fonte
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.

cephus
fonte
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" />
Parinda Rajapaksha
fonte
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>
O melhor artista
fonte
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.

Bhargav Thanki
fonte
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.

Umesh N
fonte
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"/>
Sekhon123
fonte
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.

王良海
fonte
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.

Daniel Ochoa
fonte
7

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

Alexey Zakharov
fonte
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" 
    />
RayChongJH
fonte
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"

Carolina
fonte
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"
AouledIssa
fonte
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

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

addressTitleView.setCompoundDrawablePadding();
Srinivas Kokkula
fonte
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>
nicolas asinovich
fonte
-6

Tenta usar preenchimento negativo

Gostar:

android:paddingLeft="-8dp"
Philipe Steiff
fonte