问题描述
我知道如何制作带有颜色填充的 Material Design 按钮:
style="@style/Widget.AppCompat.Button.Colored"
和无边框透明按钮:
style="@style/Widget.AppCompat.Button.Borderless.Colored"
但是,有没有办法让 Material design 有边框(内部透明)按钮?像下面这样?
您也可以使用
您还可以使用 ShapeApperance
自定义角点(需要 1.1.0 版本)
<项目名称=shapeAppearanceOverlay">@style/MyShapeAppearance</item></风格><item name="cornerFamilyTopLeft">圆形</item><项目名称=cornerFamilyBottomLeft">圆形</item><item name="cornerFamilyTopRight">cut</item><item name="cornerFamilyBottomRight">cut</item><项目名称=cornerSize">8dp</item></风格>
官方文档在
OLD(支持库)
使用新的 支持库 28.0.0,设计库现在包含 Material Button
.
您可以使用以下命令将此按钮添加到我们的布局文件中:
您可以使用以下属性自定义按钮:
app:backgroundTint
: 用于为按钮的背景应用色调.如果您想更改按钮的背景颜色,请使用此属性而不是背景.app:strokeColor
:按钮描边使用的颜色app:strokeWidth
: 按钮描边的宽度
还有
I know how to make Material Design button with color fill:
style="@style/Widget.AppCompat.Button.Colored"
And no-bordered transparent button:
style="@style/Widget.AppCompat.Button.Borderless.Colored"
However, is there a way to make Material design bordered (transparent inside) button? Something like below?
解决方案
You can also use the Material Components for Android.
Add the dependency to your
build.gradle
:
dependencies { implementation 'com.google.android.material:material:1.3.0' }
In this case you can use the
MaterialButton
in your layout file:
<com.google.android.material.button.MaterialButton
....
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
app:cornerRadius=".."
app:strokeColor="@color/colorPrimary"/>
Apply the style
@style/Widget.MaterialComponents.Button.OutlinedButton
.
In your case use the
app:cornerRadius
attribute to change the size of corner radius. This will round off the corners with specified dimensions.
Use te attribute app:strokeColor
and app:strokeWidth
to change the color and the width of the border.
You can also customize the corners using
ShapeApperance
(it requires version 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>
The official doc is here and all the android specs here.
With jetpack compose
1.0.x
you can use the OutlinedButton
and the border
attribute:
OutlinedButton(
onClick = { },
border = BorderStroke(1.dp, Color.Blue),
shape = RoundedCornerShape(8.dp)
) {
Text(text = "Save")
}
OLD (support library)
With the new Support Library 28.0.0, the Design Library now contains the
Material Button
.
You can add this button to our layout file with:
<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" />
You can customize the button with these attributes:
app:backgroundTint
: Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background.app:strokeColor
: The color to be used for the button strokeapp:strokeWidth
: The width to be used for the button stroke
Also
这篇关于带边框的材料设计按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!