android:drawableLeftマージンおよび/またはパディング


回答:


466

セファスが言及したandroid:drawablePaddingように、ボタンが十分に小さい場合にのみ、テキストとドローアブルの間にパディングが強制されます。

大きなボタンをレイアウトするとき、あなたは使用することができるandroid:drawablePaddingと一緒にandroid:paddingLeftしてandroid:paddingRight、ボタンの中心に向かってテキストや描画可能内側を強制します。左右のパディングを個別に調整することで、レイアウトを非常に詳細に調整できます。

デフォルトの場合よりもパディングを使用してテキストとアイコンを近づけるボタンの例を次に示します。

<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"が重要です。
IgorGanapolsky

4
これは質問とは関係ありませんが、android:gravity = "center"はテキストをドローアブルの中心に揃えます!
cwhsu 14年

1
左と右の両方にドローアブルがあり、右のドローアブルのみを調整する必要がある場合はどうなりますか?
nmxprime 2014年

私はandroid:paddingLeftのみを使用し、画像の位置を変更します。android:drawablePaddingは、画像とテキストの間のスペースに使用されます。
Brave

このコードの問題は、passwordToggleDrawable特定のターゲットをドローアブルのままにすることができないため、左パディングのギャップが大きくなることです。
Fruit

184

TextViewには、トリックを実行するandroid:drawablePaddingプロパティがあります。

android:drawablePadding

ドローアブルとテキストの間のパディング。

「14.5sp」などの単位が追加された浮動小数点数であるディメンション値である必要があります。使用可能な単位は、px(ピクセル)、dp(密度非依存ピクセル)、sp(優先フォントサイズに基づいてスケーリングされたピクセル)、in(インチ)、mm(ミリメートル)です。

これは、このタイプの値を含むリソース( "@ [package:] type:name"の形式)またはテーマ属性( "?[package:] [type:] name"の形式)への参照でもあります。 。

これは、グローバル属性リソースシンボルdrawablePaddingに対応します。


61

android:drawablePaddingボタンが2つを押しつぶすのに十分小さい場合にのみ、テキストとドローアブルの間にパディングギャップが作成されます。ボタンが幅(drawableLeft / drawableRightの場合)または高さ(drawableTop / drawableBottomの場合)を合わせた幅よりも広い場合、drawablePaddingは何もしません。

私も今これに苦労しています。私のボタンはかなり幅が広く、アイコンはボタンの左端にぶら下がっており、テキストは中央に中央揃えされています。今のところこれを回避する唯一の方法は、フォトショップでキャンバスの左端に空白のピクセルを追加して、ドローアブルのマージンを焼き込むことでした。理想的ではなく、あまりお勧めしません。しかし、それは今のところ私の一時的な解決策であり、TextView / Buttonを再構築することはできません。


私の問題を説明してくれてありがとう。ボタンの幅が十分に広い場合にのみ発生することには気づきませんでした
peter.bartos

私は同じ問題を抱えています。私のボタンは幅が広いので、ドローアブルはテキストに近くありません
Milad Faridnia

おかげで
うまくいき

43

はい。次のようにdrawablePaddingを使用します。

<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

ドローアブルresources.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
ドローアブルでインセットを使用している最高のアーティスト。新しいバージョンのデバイスでも問題なく機能します。つまり、SDK 16、17では機能せず、SDK 23で機能します。何かアイデアはありますか?
Bhavin Chauhan 2016


いい答えで、これに賛成票を投じます。あなたは私を長い間混乱させていた問題を解決するのを助けてくれます。
アントニエフ2016

34

android:drawablePadding描画可能なアイコンにパディングを与えるための最も簡単な方法ですが、あなたは次のように特定に片側のパディングを与えることができないpaddingRightか、paddingLeft描画可能のあなたがそれに掘るために持っていることを達成icon.To。そして、あなたがpaddingLeftまたはpaddingRightに適用するとEdittext、それはEdittextドローアブルアイコンとともに全体にパディングを配置します。


12

edittextの形状を定義し、パディングを追加します。

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

この形状で定義されたパディングは、drawableleftまたはrightにパディングを与えるのに役立ちます---------------------- 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"
         />

その定義された形状を背景として使用すると、EditTextに何らかのスタイルとdrawableLeftへのマージンが与えられます。


12

android:drawablePaddingは、描画可能なアイコンにパディングを付ける最も簡単な方法ですが、描画可能なアイコンのpaddingRightやpaddingLeftのような特定の片側パディングを与えることはできません。また、EdittextにpaddingLeftまたはpaddingRightを適用すると、描画可能なアイコンとともにEdittext全体にパディングが配置されます。

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

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

注:layout_widthはwrap_contentであり、paddingLeft paddingRight drawablePaddingを使用してギャップを制御する必要があります。layout_width値を指定すると、アイコンとテキストの間にギャップが生じます。layout_widthに指定値を指定すると、パディングが測定されると思います。


9

私も答えをリングに投げます。これをプログラムで実行したい場合は、以下を実行できます。

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

これは、ドローアブルの最後にパディングを追加します。電話がLTRまたはRTLのどちらであるかによって、端は左/右を意味します。


7

代わりにButton使用LinearLayoutしてImageViewおよびTextView内部。子供のようなアイテムImageViewTextView使用しますandroid:duplicateParentState="true"


Button UIを再現してonclicklistener()をボタンパーツに転送するには、実際にはFrameLayoutとButton(および独自のLinearLayout内のImageView / TextView)が必要です
3c71

1
TextViewに既にdrawablePaddingがある場合に、追加のレイアウトを使用する理由。
Parinda Rajapaksha 2017

5

レイヤーリストの使用を検討する必要があります

このようなドローアブルファイルを作成し、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>

レイアウトファイルの下で、

<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

ボタンのパディングを使用して、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" />

android:paddingLeft = "10dp"またはandroid:paddingBottom = "10dp"またはandroid:paddingRight = "10dp"またはandroid:paddingTop = "10dp"を使用して、ドローアブルを配置する場所に応じて特定のパディングを使用できます


2

を使用android:drawableLeft="@drawable/your_icon"して、ドローアブルを左側に表示するように設定できます。ドローアブルのパディングを設定するには、android:paddingLeftまたはandroid:paddingRightを使用して、左右のパディングをそれぞれ設定する必要があります。

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

1

ドローアブルリソースのサイズが固定されている場合、次のようにすることができます。

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

ここでの鍵はそれです:

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

つまり、ドローアブルリソースとpaddingRightのサイズはpaddingLeftです。

この例で結果を見ることができます


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

addressTitleView.setCompoundDrawablePadding();

このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の質を高めるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
ロザリオペレイラフェルナンデス

これはテキストビューでのみ機能します。たとえば、開始/終了drwableを設定できるボタンではありません
Ixx

1

からリメイクしてください:

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.