android - 如何在 Android 中创建圆形轮廓材质按钮?
问题描述
我正在尝试在中心创建一个带有图标的按钮。圆圈的顶部和底部有点平坦。有没有办法在不使用圆角半径的情况下做到这一点?这是我的按钮布局。
<com.google.android.material.button.MaterialButton
android:id="@+id/start_dispenser_btn"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="175dp"
android:layout_height="175dp"
android:padding="14dp"
app:cornerRadius="150dp"
app:icon="@drawable/ic_play_arrow_black_60dp"
app:iconGravity="end"
app:iconSize="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/stop_dispenser_btn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/test_dispenser_container"
app:strokeColor="@color/background_black" />
解决方案
您可以使用该app:shapeAppearanceOverlay
属性来定义角的大小。您可以使用该50%
值。
<com.google.android.material.button.MaterialButton
android:layout_width="50dp"
android:layout_height="50dp"
style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="@drawable/ic_add_24px"
app:iconSize="24dp"
app:iconGravity="textStart"
android:padding="0dp"
app:iconPadding="0dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
/>
和:
<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
或与style="@style/Widget.MaterialComponents.Button.Icon"
它至少需要 1.1.0 版本。
使用jetpack compose ,您可以使用OutlinedButton
asCircleShape
形状:
OutlinedButton(onClick = { /* ... */ },
modifier= Modifier.size(50.dp), // it is important otherwise the button is oval
shape = CircleShape,
border= BorderStroke(1.dp, Color.Blue),
contentPadding = PaddingValues(0.dp),
colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Blue)
) {
Icon(Icons.Default.Add, contentDescription = "content description")
}
推荐阅读
- python - sqlalchemy.exc.ArgumentError:映射器映射类无法为映射表“用户”组装任何主键列
- visual-studio-code - 如何在 Vscode 中使片段建议区分大小写?
- image - 如何将 TVIPS 摄像头的 tif 校准导入 DM
- python - 循环遍历一系列日期以进行比较
- python-3.x - 在作业 Circle Ci 中使用 Blackbox 时出现错误“gpg:解密失败:无密钥”
- macos - 从 Pycharm 访问 Mac 相机
- javascript - 为什么 .val('') 去掉单引号
- swift - 使用泛型将额外的道具注入视图模型
- scala - 如何按三级 Seq 数据分组
- karate - 空手道司机 iframe 元素识别挑战