ボーダー付きのマテリアルデザインボタン

Question

マテリアルデザインボタンを色で塗りつぶす方法を知っています。

style="@style/Widget.AppCompat.Button.Colored"

境界線のない透明ボタン：

style="@style/Widget.AppCompat.Button.Borderless.Colored"

ただし、マテリアルデザインをボーダー付き（透明）ボタンにする方法はありますか？以下のようなものですか？

Answer 1

正しく行う方法は次のとおりです。

あなたがする必要があるのは

1-ストロークで描画可能な図形を作成する
2-リップル描画可能を作成します
3-v21未満で描画可能なセレクターを作成します
4-ボーダー付きボタンの新しいスタイルを作成します
5-ボタンにスタイルを適用

1-ストロークで形状を作成btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <stroke
        Android:width="2dp"
        Android:color="@color/colorAccent">
    </stroke>
    <solid Android:color="@color/colorTransparent"/>
    <corners
        Android:radius="5dp">
    </corners>

</shape>

2-リップル描画可能を作成しますdrawable-v21/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="@color/colorOverlay">
    <item>
        <shape>
            <stroke
                Android:width="2dp"
                Android:color="@color/colorAccent"/>
            <corners Android:radius="5dp"/>
        </shape>
    </item>
    <item Android:id="@Android:id/mask">
        <shape>
            <stroke
                Android:width="2dp"
                Android:color="@color/colorAccent"/>
            <solid Android:color="@Android:color/white"/>
            <corners Android:radius="5dp"/>
        </shape>
    </item>

</ripple>

Android:id="@Android:id/mask"は、ボタンにリップルタッチフィードバックが必要です。マスクとしてマークされたレイヤーは、タッチフィードバックのためだけに、画面に表示されません。

3-v21未満の描画可能なセレクターを作成するdrawable/bg_btn_outline.xml

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

    <item Android:drawable="@drawable/btn_outline"/>

</selector>

4-ボーダー付きボタンの新しいスタイルを作成

<style name="ButtonBorder" parent="Widget.AppCompat.Button.Colored"/>

<style name="ButtonBorder.Accent">
        <item name="Android:background">@drawable/bg_btn_outline</item>
        <item name="Android:textColor">@color/colorAccent</item>
        <item name="Android:textAllCaps">false</item>
        <item name="Android:textSize">16sp</item>
        <item name="Android:singleLine">true</item>
    </style>

4-ボタンにスタイルを適用

<Button
   style="@style/ButtonBorder.Accent"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"/>

それはほとんどそれです。これがボタンの外観のサンプルです。

Answer 2

マテリアルデザインボタンのstyle属性を@style/Widget.MaterialComponents.Button.OutlinedButtonに設定し、app:strokeColor属性値を好みの色に設定することで、これを非常に簡単に行うことができます。

例：

<com.google.Android.material.button.MaterialButton
                Android:text="Rounded outlined button"
                Android:layout_height="wrap_content"
                Android:layout_width="wrap_content"
                Android:id="@+id/btnRound"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                app:strokeColor="@color/colorPrimaryDark"/>

参照：

• https://material.io/develop/Android/docs/getting-started/
• https://material.io/develop/Android/components/material-button/

Answer 3

詳細な回答は@NomanRafiqueに感謝します！ただし、カスタムの背景のため、いくつかの重要なことが失われました。

1. ボタンの高さがデフォルトのWidget.AppCompat.Buttonより大きい
2. パディング
3. 状態の有効化/無効化

ご参考までに、デフォルトの背景は次のようになります。 https://Android.googlesource.com/platform/frameworks/support/+/a7487e7/v7/appcompat/res/drawable-v21/ abc_btn_colored_material.xml

元のインセット、パディング、カラーセレクターを再利用することで、単純な場合、次のようなものを見つけることができます（すべての値はデフォルトで、Android support /マテリアルライブラリ）：

drawable-v21/bg_btn_outlined.xml

<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:insetLeft="@dimen/abc_button_inset_horizontal_material"
       Android:insetTop="@dimen/abc_button_inset_vertical_material"
       Android:insetRight="@dimen/abc_button_inset_horizontal_material"
       Android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:color="?attr/colorControlHighlight">
        <item>
            <shape>
                <stroke
                    Android:width="2dp"
                    Android:color="@color/abc_btn_colored_borderless_text_material"/>
                <corners Android:radius="@dimen/abc_control_corner_material"/>
                <padding
                    Android:bottom="@dimen/abc_button_padding_vertical_material"
                    Android:left="@dimen/abc_button_padding_horizontal_material"
                    Android:right="@dimen/abc_button_padding_horizontal_material"
                    Android:top="@dimen/abc_button_padding_vertical_material"/>
            </shape>
        </item>
        <item Android:id="@Android:id/mask">
            <shape>
                <stroke
                    Android:width="2dp"
                    Android:color="@color/abc_btn_colored_borderless_text_material"/>
                <solid Android:color="@Android:color/white"/>
                <corners Android:radius="@dimen/abc_control_corner_material"/>
            </shape>
        </item>
    </ripple>
</inset>

styles.xml

<style name="Button.Outlined" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="Android:background">@drawable/bg_btn_outlined</item>
</style>

この時点で、タッチに応答し、enabled="false"状態を尊重し、デフォルトのWidget.AppCompat.Buttonと同じ高さのアウトラインボタンが必要です。

これで、@color/abc_btn_colored_borderless_text_materialカラーセレクターの独自の実装を提供することにより、ここから色のカスタマイズを開始できます。

Answer 4

これは、境界線とLollipop以上での波紋効果だけでボタンを実行する方法です。 AppCompatボタンと同様に、これらは下位APIにフォールバックプレス効果を持っています（下位APIにリップルが必要な場合は、外部ライブラリを使用する必要があります）。 FrameLayoutが安いので使用しています。テキストと境界線の色は黒ですが、カスタムの色で変更できます。

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="20dp"
    Android:background="@drawable/background_button_ghost">

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?android:selectableItemBackground"
        Android:gravity="center"
        Android:padding="14dp"
        Android:textSize="16sp"
        Android:textAllCaps="true"
        Android:textStyle="bold"
        Android:textColor="@Android:color/black"
        Android:text="Text"/>
</FrameLayout>

drawable/background_button_ghost.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <stroke
        Android:width="2dp"
        Android:color="@Android:color/black"/>
    <solid Android:color="@color/transparent"/>
</shape>

私が何かを逃した場合は、コメントを残してください、私は答えを更新します。

Answer 5

XMLでこれを使用して、

            <com.google.Android.material.button.MaterialButton
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:text="Its a button"
                Android:textColor="@Android:color/white"
                Android:textSize="@dimen/_12ssp"
                app:backgroundTint="@Android:color/transparent"
                app:strokeColor="@Android:color/white"
                app:strokeWidth="@dimen/_1sdp" />

どこ

1. app：backgroundTintは背景色に使用されます
2. app：strokeColorは境界線の色です
3. app：strokeWidthは境界線の幅です

Answer 6

簡単にこのコードを使用できます。 それはすっごくよさそうだ

           <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="#ffffff"
                Android:orientation="vertical">

                <Android.support.v7.widget.AppCompatButton
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:backgroundTint="#F48025"
                    Android:text="login"
                    Android:textColor="@color/colorWhite" />

            </LinearLayout>

ここでの境界色は：

Android:background="#ffffff"

そして背景色は：

Android:backgroundTint="#F48025"