I have a button, and I have cornerRadius but it isn't working

Question

I have a button and I gave the cornerRadius attribute. In the xml code, the app appears o be curved but when I run the app, the button is rectangular in shape.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/res_item"
    android:forceDarkAllowed="false"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="70dp">

    <ImageView
        android:id="@+id/res_item_image"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.494" />

    <TextView
        android:id="@+id/res_item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:fontFamily="@font/salsa"
        android:text="Name"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/add"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@id/res_item_image"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/res_item_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/salsa"
        android:text="price"
        app:layout_constraintTop_toBottomOf="@id/res_item_name"
        app:layout_constraintStart_toEndOf="@id/res_item_image"
        android:layout_marginLeft="20dp"
        android:textColor="@color/tomato_red"
        android:textSize="18sp" />

<Button       app:cornerRadius="20dp"
        android:id="@+id/add"
        android:layout_width="70dp"
        android:layout_height="40dp"
        android:layout_margin="20dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="30dp"
        android:text="Add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Instead of this button I also used material button, but still the same happens. It appears to be curved in the XML design, but it isn't in the app.

Does this answer your question? [Rounded corners on material button](https://stackoverflow.com/questions/42684717/rounded-corners-on-material-button) — pepperlove, Jul 06 '21 at 04:10

Ananta Raha · Answer 1 · 2021-07-08T07:36:31.687

1

If you are using a Material theme, then you have to use app:shapeAppearance instead of app:cornerRadius. See details

At first create a shape style in your styles.xml:

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

And in your Button, remove app:cornerRadius and use this shape style:

<com.google.android.material.button.MaterialButton app:shapeAppearance="@style/ShapeAppearance.App.SmallComponent"
        android:id="@+id/add"
        android:layout_width="70dp"
        android:layout_height="40dp"
        android:layout_margin="20dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="30dp"
        android:text="Add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

edited Jul 08 '21 at 07:36

answered Jul 05 '21 at 12:47

Ananta Raha

1,011
5
14

I actually did this. But still the button is in rectangular shape. – yazhini Jul 05 '21 at 13:27
What type of theme you used for your app/activity? This should work when you use Material Theme. – Ananta Raha Jul 05 '21 at 20:37
Thank you! I tried so many things, but this worked perfectly! Instead of a simple ` – SMBiggs Jul 08 '21 at 05:32
Oh, sorry I forgot that, thanks for your observations. You will find detailed description of almost all types of material components in the official doc here https://material.io/components?platform=android – Ananta Raha Jul 08 '21 at 07:43

score 0 · Answer 2 · answered Jul 05 '21 at 11:58

Create a new file in the drawable folder called for example ripple.xml and use this code:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="@color/colorPrimary"/>
      <corners android:radius="20dp" />
    </shape>
  </item>
</ripple>

And now use the created file as background for your button:

<Button      
    android:id="@+id/add"
    android:layout_width="70dp"
    android:layout_height="40dp"
    android:layout_margin="20dp"
    android:layout_marginEnd="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="30dp"
    android:text="Add"
    android:background="@drawable/ripple"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

score 0 · Answer 3 · answered Jul 05 '21 at 12:00

If you want to create rounded corner button then Create a xml file in your drawable folder like button_shape.xml and paste the following code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#50B771" />

    <corners android:radius="5dp" />
</shape>

Then set the selector file into your button in the xml:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/button_shape"
    android:text="Buttons" />

If you have again doubt on this you can ping me.

I tried using this but still the same rectangle button appears. Does it have anything to do with the adapter class? — yazhini, Jul 05 '21 at 13:03

I have a button, and I have cornerRadius but it isn't working

3 Answers3