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

Question

塗りつぶしでマテリアルデザインボタンを作成する方法を知っています:

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

そして、境界線のない透明なボタン:

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

ただ、マテリアルデザインをフチあり(中を透明にする)ボタンにする方法はありますか? 以下のようなものですか？

Answer 1

Android 用の Material Components を使用することもできます。

依存関係を次のように追加しますbuild.gradle。

dependencies { implementation 'com.google.android.material:material:1.3.0' }

この場合MaterialButton 、レイアウト ファイルでを使用できます。

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button.OutlinedButton"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

スタイルを適用します@style/Widget.MaterialComponents.Button.OutlinedButton。

あなたの場合、app:cornerRadius属性を使用して角の半径のサイズを変更します。これにより、指定した寸法で角が丸くなります。
te 属性app:strokeColorを 使用app:strokeWidthして、境界線の色と幅を変更します。

を使用してコーナーをカスタマイズすることもできますShapeApperance(バージョン 1.1.0 が必要です) 。

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSize">8dp</item>
</style>

公式ドキュメントはここにあり、すべての Android 仕様はここにあります。

---

jetpack compose では、および属性1.0.xを使用できます。OutlinedButtonborder

    OutlinedButton(
        onClick = { },
        border = BorderStroke(1.dp, Color.Blue),
        shape = RoundedCornerShape(8.dp) 
    ) {
        Text(text = "Save")
    }

---

OLD (サポート ライブラリ)

新しいサポート ライブラリ 28.0.0では、デザイン ライブラリにMaterial Button.

このボタンをレイアウト ファイルに追加するには、次のコマンドを使用します。

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXX"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

次の属性を使用してボタンをカスタマイズできます。

• app:backgroundTint: ボタンの背景に色合いを適用するために使用されます。ボタンの背景色を変更する場合は、背景の代わりにこの属性を使用します。

• app:strokeColor: ボタンストロークに使用する色

• app:strokeWidth: ボタンストロークに使用する幅

また

Answer 2

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

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

ご参考までに、デフォルトの背景は次のようになります。

元のインセット、パディング、およびカラー セレクターを再利用することにより、単純なケースでは、次のようなものを作成できます (すべての値はデフォルトであり、Android サポート/マテリアル ライブラリから取得されます)。

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>

スタイル.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 3

これは Jetpack Compose でも行うことができます。これを行うには、 OutlinedButton を使用してコンポーズ可能な関数を作成し、必要な境界線として as パラメーターを渡します。

@Composable
fun OutlineButton() {
    OutlinedButton(
        onClick = { //TODO - implement click here },
        border = BorderStroke(1.dp, Color.Blue), // <-- border property
        shape = RoundedCornerShape(corner = CornerSize(20.dp)),
        colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Blue)
    ){
        Text(text = "CONFIRM")
    }
}