[英]How do I implement this Material Design 2.0 button shape?
I would like to achieve the button shape looking like the one in Material Components example我想实现看起来像材料组件示例中的按钮形状
What I already tried to do is setting custom style for the button like this我已经尝试做的是为这样的按钮设置自定义样式
<style name="ButtonAddLeft" parent="Widget.MaterialComponents.Button.Icon">
<item name="backgroundTint">@color/secondary</item>
<item name="android:textColor">@color/primary</item>
<item name="shapeAppearance">@style/ButtonAddLeftShape</item>
</style>
<style name="ButtonAddLeftShape">
<item name="cornerFamilyTopLeft">cut</item>
<item name="cornerFamilyBottomLeft">cut</item>
<item name="cornerSize">12dp</item>
</style>
But this does not look like the one from the example, regardless of how I set the cornerSize.但这看起来不像示例中的那个,无论我如何设置cornerSize。
You need to set the corner cut style to the theme.您需要将切角样式设置为主题。
<style name="RightCutButton" parent="ThemeOverlay.MaterialComponents.Light">
<item name="shapeAppearanceSmallComponent">@style/CornerCut</item>
</style>
<style name="CornerCut" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">18dp</item>
<item name="cornerSizeBottomRight">18dp</item>
</style>
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="shapeAppearanceSmallComponent">@style/CornerCut</item>
</style>
You can use the app:shapeAppearanceOverlay
attribute in your layout:您可以在布局中使用
app:shapeAppearanceOverlay
属性:
<com.google.android.material.button.MaterialButton
app:shapeAppearanceOverlay="@style/ButtomShapeArrowRight"
.../>
with:和:
<style name="ButtomShapeArrowRight">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">4dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
You can also achieve it programmatically:您还可以通过编程方式实现它:
MaterialButton button_arrow = findViewById(R.id.button_arrow);
button_arrow.setShapeAppearanceModel(
button_arrow.getShapeAppearanceModel()
.toBuilder()
.setTopLeftCorner(CornerFamily.ROUNDED,..)
.setBottomLeftCorner(CornerFamily.ROUNDED,...)
.setBottomRightCorner(CornerFamily.CUT, new RelativeCornerSize(0.5f))
.setTopRightCorner(CornerFamily.CUT, new RelativeCornerSize(0.5f))
.build()
);
Just a note about new RelativeCornerSize(0.5f)
: It changed in 1.2.0-beta01
.只是关于
new RelativeCornerSize(0.5f)
:它在1.2.0-beta01
发生了变化。 Before it was new RelativeCornerSize(50))
.之前是
new RelativeCornerSize(50))
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.