web-dev-qa-db-ja.com

Androidのボタンの周りのパディング（またはマージン？）を適切に削除する方法は？

現在、次のログインボタンがあります。

ボタンが押されていないとき

enter image description here

ボタンが押されているとき

enter image description here

XMLは次のようになります

<LinearLayout
    Android:background="?attr/welcomeBottomNavBarBackground"
    Android:orientation="horizontal"
    Android:id="@+id/sign_in_bottom_nav_bar"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true">
    <Button
        style="?android:attr/buttonBarButtonStyle"
        Android:id="@+id/sign_in_button"
        Android:layout_width="0dp"
        Android:width="0dp"
        Android:layout_weight="1.0"
        Android:layout_height="48dp"
        Android:gravity="center"
        Android:layout_gravity="center"
        Android:enabled="true"
        Android:textAllCaps="true"
        Android:text="@string/log_in" />
</LinearLayout>

ボタンが押されているときに、ボタンの周りのパディングを削除したい（または、マージンと呼ぶべきですか？一番下のp/sセクションを参照してください）。

Androidのボタンの周囲のパディングを削除する方法

試した

<Button
    ...
    ...
    Android:minHeight="0dp"
    Android:minWidth="0dp" />

機能せず、効果もありません。

さらに試してみる

<Button
    ...
    ...
    Android:background="@null"
    Android:minHeight="0dp"
    Android:minWidth="0dp" />

押すとパディングがなくなります。ただし、押された視覚効果を設計した素材もなくなります。

押されたときにボタンのパディングを削除し、押された視覚効果を設計した素材を保持する最良の方法は何ですか？

P/S

私はそれをパディングまたはマージンと呼ぶべきかどうか本当に知りません。私が達成したいのは、下部の領域を押すと、プレスの視覚効果の変更が100％下部のバー領域全体に及ぶことです（@+id/sign_in_bottom_nav_bar）、現在の95％の下部バー領域の代わりに。

javaandroidandroid-layoutandroid-viewandroid-button
18
Cheok Yan Cheng

標準ボタンは全幅で使用されることを想定していないため、これが発生します。

バックグラウンド

Material Design-Button Style を見ると、ボタンに48dpの高さのクリック領域があることがわかります。しかし、何らかの理由で36dpの高さとして表示されます。

これが表示される背景のアウトラインであり、ボタン自体の領域全体をカバーしません。
角は丸く、パディングがあり、それ自体がクリック可能で、コンテンツをラップし、画面の下部の幅全体に広がることは想定されていません。

溶液

上記のように、必要なのは異なるbackgroundです。標準のボタンではなく、この素敵な波及効果のある選択可能なアイテムの背景。

このユースケースには、?selectableItemBackground背景に使用できるテーマ属性（特にリスト内）。
プラットフォームの標準リップル（または<21のカラー状態リスト）を追加し、現在のテーマカラーを使用します。

ユースケースには、次のものを使用できます。

<Button
    Android:id="@+id/sign_in_button"
    style="?android:attr/buttonBarButtonStyle"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:text="Login"
    Android:background="?attr/selectableItemBackground" />
                   <!--  /\ that's all -->

ビューが唯一のものであり、画面全体に広がる場合は、レイアウトの重みを追加する必要もありません

背景がどのように見えるかについて別のアイデアがある場合は、自分でカスタムドローアブルを作成し、そこで色と状態を管理する必要があります。

25
David Medenjak

styles.xml

<style name="MyButtonStyle" parent="Base.Widget.AppCompat.Button">
    <item name="Android:background">@drawable/selector</item>
    <item name="Android:textColor">@Android:color/black</item>
</style>

values/drawable：

my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape Android:shape="rectangle" xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <corners Android:radius="2dp" />
    <!-- specify your desired color here -->
    <solid Android:color="#9e9b99" />
</shape>

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_focused="true" Android:drawable="@drawable/my_drawable"/>
    <item Android:state_pressed="true" Android:drawable="@drawable/my_drawable"/>
    <item Android:drawable="@Android:color/transparent"/>
</selector>

values/drawable-v21：

my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape Android:shape="rectangle"
       Android:tint="?attr/colorButtonNormal"
       xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <corners Android:radius="2dp" />
    <solid Android:color="@Android:color/white" />
</shape>

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="?attr/colorControlHighlight">
    <item Android:id="@Android:id/mask"
          Android:drawable="@drawable/my_drawable" />
</ripple>

レイアウト内：

<Button
    Android:id="@+id/button"
    style="@style/MyButtonStyle"
    Android:layout_width="match_parent"
    Android:layout_height="100dp"
    Android:text="Test"/>

API 19の結果：

enter image description here

API 21の結果：

enter image description here

ソースコード

4
azizbekian

私はあなたが経験していることを経験しました。簡単に言えば、<Button>タグのみ、後方互換性を確保します。

最も単純で最も広く実践されている方法は、<RelativeLayout>アンダーレイ、<Button>。

ボタンコード：

        <RelativeLayout
            Android:id="@+id/myButtonUnderlay"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/colorPrimary"
            Android:visibility="visible">

            <Button
                Android:id="@+id/myButton"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="?attr/selectableItemBackgroundBorderless"
                Android:text="I am as cute as a Button"/>

        </RelativeLayout>

ボタンを使用する必要がある場合はいつでも、この完全なコードを使用します。

内訳は次のとおりです：

  1. OnClickイベントはmyButtonにフックされます。
  2. myButtonUnderlayの属性を変更して、ボタンの寸法を制御します。
  3. myButtonで、Android:background="?attr/selectableItemBackgroundBorderless"。これにより、テキストだけの透明なボタンになり、後方互換性のある波紋になります。
  4. myButtonUnderlayでは、ボタン、マージン、パディング、ボーダー、グラデーション、シャドウなどの色の設定など、他のすべてのバックグラウンドアプリケーションを実行します。
  5. ボタンの可視性（プログラムによるかどうか）の操作が必要な場合は、myButtonUnderlayで行います。

注：後方互換性を確保するには、必ず使用してください

Android:background="?attr/selectableItemBackgroundBorderless"、および[〜＃〜] not [〜＃〜]

Android:background="?android:attr/selectableItemBackgroundBorderless"

2
Abdul Wasae

それを解決する最善の解決策は、独自の_Ripple Effect_を作成することだと思います。ボタンを押したときのパディングは、コンポーネントのデフォルトの_Ripple Effect_を尊重しています。

_<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="?attr/colorControlHighlight">
    <item Android:drawable="?attr/colorPrimary"/>
</ripple>
_

または、ボタンのスタイルを_style="?android:textAppearanceSmall"_に変更してみてください

要確認：この効果は、Android Lollipop (API 21)以上でのみ表示されます。

2
Luiz Fernando Salvaterra

パディングとマージンは、ボタンで使用される元のリソースの結果である場合があります。

そのため、セレクターを使用して、使用するリソースを変更することができます。

<selector
  xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/btn_action_hover" />
    <item Android:state_selected="true" Android:drawable="@drawable/btn_action_hover" />
    <item Android:state_focused="true" Android:drawable="@drawable/btn_action_hover" />
    <item Android:drawable="@drawable/btn_action_normal" />
</selector>

これにより、ボタンのデフォルトの画像/形状が変更されるため、ドロアブルを使用して、すべてのアイテムをドロアブルに設定してみてください。ドロアブルは、ビットマップ、または現在の状態のボタンの外観を定義する.xmlファイル（スタイルファイル）のいずれかです。あなたがボタンスタイルを自分で設定したとしても、まだいくつかのネイティブスタイルが含まれていると思います。これは、カスタムテーマを使用していないためである可能性があります。したがって、この問題は

theme="@style/myNewTheme"

ここで、myNewThemeはテーマであり、任意の親（parent=""は定義しないでください）。

特定のテーマ（たとえば、Theme.AppCompat。[name]のようにGoogle/Androidによって設計されたもの）を使用すると、buttonStyleも付属します。これはTheme.Holo.Lightの一部です：

    <!-- Button styles -->
    <item name="buttonStyle">@style/Widget.Holo.Light.Button</item>

    <item name="buttonStyleSmall">@style/Widget.Holo.Light.Button.Small</item>
    <item name="buttonStyleInset">@style/Widget.Holo.Light.Button.Inset</item>

    <item name="buttonStyleToggle">@style/Widget.Holo.Light.Button.Toggle</item>
    <item name="switchStyle">@style/Widget.Holo.Light.CompoundButton.Switch</item>
    <item name="mediaRouteButtonStyle">@style/Widget.Holo.Light.MediaRouteButton</item>

    <item name="selectableItemBackground">@drawable/item_background_holo_light</item>
    <item name="selectableItemBackgroundBorderless">?attr/selectableItemBackground</item>
    <item name="borderlessButtonStyle">@style/Widget.Holo.Light.Button.Borderless</item>
    <item name="homeAsUpIndicator">@drawable/ic_ab_back_holo_light</item>

ご覧のとおり、このテーマは、基本機能でのボタンの外観/動作を定義します。一部をオーバーライドできますが、重要な部分はオーバーライドしていません（buttonStyleなど）。したがって、自分で新しいテーマを作成し、好みに合わせてスタイルを設定し、テーマを設定して（theme = "themename"を使用）、そのテーマがテーマを継承しない場合、心配することなくボタンを好みに合わせてスタイル設定できます。テーマのデフォルトスタイルについて

基本的に：

padding/margin = "0dp"を呼び出しても役に立ちません。テーマで定義されたデフォルトのドロウアブルには、ボタンドロウアブルにこれがあります。つまり、変更することはできません。そのため、ボタンのスタイルを変更するか、テーマを完全に変更する必要があります。多くのテーマがボタンのスタイルを定義するため、テーマに親がないことを確認してください。テーマで定義されたボタンスタイルは望ましくありません。

1
Zoe

@David Medenjakの回答として、Google Material design Button-style を開発者向けサイトで読むことができます。 @David Medenjakが答えで説明したように、ボタンスタイルを使用します。また、次の方法で行うこともできます。パディングやマージンではありませんが、実際にはボタンの背景効果です。それを削除したい場合は、次のようにすることができます。

オプション1：

ステップ1：以下のコードをstyles.xmlに追加します

<style name="myColoredButton">
        <item name="Android:textColor">#FF3E96</item>
        <item name="Android:padding">0dp</item>
        <item name="Android:minWidth">88dp</item>
        <item name="Android:minHeight">36dp</item>
        <item name="Android:elevation">1dp</item>
        <item name="Android:translationZ">1dp</item>
        <item name="Android:background">#FF0000</item>
    </style>

ステップ2：drawablesフォルダーの下に新しいXMLファイルを作成し、次のコードを追加します。XMLファイルにbutton_prime.xmlという名前を付けました

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/colorPrimary">
    <item>
        <shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
            <corners Android:radius="1dp" />
            <solid Android:color="#8B8386" />
        </shape>
    </item>
</ripple>

手順3：次のように、ボタンでスタイルとドロウアブルを使用します。

<Button
        style="@style/myColoredButton"
        Android:layout_width="250dp"
        Android:layout_height="50dp"
        Android:text="Cancel"
        Android:gravity="center"
        Android:background="@drawable/button_prime"
        Android:colorButtonNormal="#3578A9" />

オプション2：

Support Library v7では、すべてのスタイルが実際に既に定義されており、使用する準備ができているため、標準のボタンでは、これらのスタイルはすべて使用できます。

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    Android:layout_width="match_parent"
    Android:layout_height="50dp"
    Android:text="BUTTON"
    Android:gravity="center"
    Android:minHeight="0dp"
    Android:minWidth="0dp"
    Android:background="@color/colorAccent"/>

ボタンスタイルの詳細については check this answerをご覧ください

この答え もチェックすると思います。あなたがあなたの解決策を手に入れることを願っています。

1
Shailesh

多くの解決策を試した後、ようやくタグだけではこれを達成できないという結論に達しました。ボタンの周りのこの不要なスペースを削除するには、私の解決策は次のとおりです：

 <RelativeLayout
    Android:id="@+id/myButtonUnderlay"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:visibility="visible">
<Button
    Android:id="@+id/save_button"
    Android:layout_width="match_parent"
    Android:layout_height="50dp"
    Android:layout_marginTop="-5dp" 
    Android:layout_marginBottom="-5dp"
    Android:layout_above="@+id/content_scrollview"
    Android:layout_gravity="bottom"
    Android:background="@drawable/ripple_theme"
    Android:enabled="true"
    Android:text="SetUp Store"
    Android:textColor="#fff"
    Android:textSize="18sp"
    Android:visibility="gone"
    tools:visibility="visible"
    style="@style/MediumFontTextView" />
</RelativeLayout>
0
Sandeep Sankla

Button背景をAndroid:background="?selectableItemBackground"として設定します

<LinearLayout
    Android:background="?attr/welcomeBottomNavBarBackground"
    Android:orientation="horizontal"
    Android:id="@+id/sign_in_bottom_nav_bar"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true">

    <Button
        style="?android:attr/buttonBarButtonStyle"
        Android:background="?selectableItemBackground"
        Android:id="@+id/sign_in_button"
        Android:layout_width="0dp"
        Android:width="0dp"
        Android:layout_weight="1.0"
        Android:layout_height="48dp"
        Android:gravity="center"
        Android:layout_gravity="center"
        Android:enabled="true"
        Android:textAllCaps="true"
        Android:text="@string/log_in" />

</LinearLayout>
0
Deena

念のため this をご覧になることをお勧めします。

その後、動作しない場合は、Android xml drawables、およびpressed/notpressedを区別するためのドロアブル状態を使用して、独自のスタイルを作成することをお勧めします（azizbekianサジェストのような））.

自分のスタイルを使用すると、アプリの表示方法をより詳細に制御できるため、最良の答えになると思いますが、Androidデフォルトのテーマとスタイルを使用すると、ユーザーはカスタムスタイルを持つことができますただし、すべてのカスタムスタイルをテストすることはできないため、すべてのカスタムスタイルでアプリが正しく表示されることを確認できないため、一部のカスタムスタイルで問題が発生する可能性があります。

0
Feuby