CODEWITHSUNDEEP
androidandroid-layoutmaterial-designandroid-drawablexml-drawable
kamren
kamren

Reputation: 37

Android button border shape with cut corners

Is it possible to make a button (or any other element like image view or layout) with border shaped with cut corners like below: rectangle with cut corners Preferably using xml-drawables with cut size taken from @dimen

Edit: The important thing is shape should consist of frame only without filling the inside with any color.

Upvotes: -1

Views: 1409

Answers (1)

salman
salman

Reputation: 104

you can use this

<com.google.android.material.button.MaterialButton
    android:id="@+id/btAdd"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:insetTop="0dp"
    android:insetBottom="0dp"
    android:text="@string/add_address"
    app:cornerRadius="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/edit_phone"
    app:layout_constraintVertical_bias="0.0" />

and in style file add this

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">16dp</item>
</style>

in material button change the shape to

        app:shapeAppearance="@style/ShapeAppearance.App.SmallComponent"

final result:

<com.google.android.material.button.MaterialButton
    android:id="@+id/btAdd"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:insetTop="0dp"
    android:insetBottom="0dp"
    android:text="@string/add_address"
    app:shapeAppearance="@style/ShapeAppearance.App.SmallComponent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/edit_phone"
    app:layout_constraintVertical_bias="0.0" />

enter image description here

you can change radius in style file

<item name="cornerSize">16dp</item> // here change value

Upvotes: 1

Related Questions