I am trying to create a button with an icon in the center. The top and bottom part of the circle are a little flat. Is there a way to do this without using corner radius? Here is my layout for the button.
<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" />
You can use the app:shapeAppearanceOverlay
attribute to define the corner size. You can use the 50%
value.
<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"
/>
with:
<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
or with the style="@style/Widget.MaterialComponents.Button.Icon"
It requires at least the version 1.1.0.
With jetpack compose 1.0.0
(tested with 1.0.0-beta07
) you can use:
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")
}
By using cornerRadius
along with inset
you can get the rounded shape:
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
android:layout_width="48dp"
android:layout_height="48dp"
app:cornerRadius="30dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:insetLeft="0dp"
android:insetRight="0dp"
app:icon="@drawable/ic_menu"/>
my answer is the enhancement of above answers. to build reusable resource:
<style name="ShapeAppearance.MdcShapeAppearance.SmallComponent.OutlinedCircleButton" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
<item name="android:insetLeft">@dimen/dip_0</item>
<item name="android:insetRight">@dimen/dip_0</item>
<item name="android:insetTop">@dimen/dip_0</item>
<item name="android:insetBottom">@dimen/dip_0</item>
<item name="android:padding">@dimen/dip_0</item>
<item name="iconGravity">textStart</item>
<item name="iconPadding">@dimen/dip_0</item>
</style>
then, you can use it as button style. don't forget to add app:cornerRadius="@dimen/dip_20"
to make it circle with your desired size
<com.google.android.material.button.MaterialButton
android:id="@+id/btn_plus"
style="@style/ShapeAppearance.MdcShapeAppearance.SmallComponent.OutlinedCircleButton"
android:layout_width="@dimen/dip_20"
android:layout_height="@dimen/dip_20"
app:cornerRadius="@dimen/dip_20"
android:layout_marginEnd="@dimen/dip_16"
app:icon="@drawable/ic_plus"
app:iconTint="?colorOnBackground"
app:layout_constraintBottom_toBottomOf="@id/tv_total_checkout_product"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/tv_total_checkout_product"
app:strokeColor="?colorOnBackground" />
Consider using ComplexView library https://www.github.com/BluRe-CN/ComplexView as the parent view, then apply the curved edges using app:radius="desired radius". You can also apply shadows of any color to the view using app:shadowColor="desired color".
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.