Rounded Button in Android Without Expanding Size

Question

This post has plenty of answers that explain how to create a rounded button in Android. But almost all of the answers end up expanding the size of the button.

For instance, in this layout, notice how the top button (the one with the rounded corners) has significantly more padding then the rest of the buttons.

Here's the code for a button without rounded corners;

<Button
    android:id="@+id/useKeyboardButton"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="@string/use_keyboard_msg"
    app:layout_constraintBottom_toTopOf="@+id/privacyPolicyButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/enableKeyboardButton"
    style="@style/Widget.AppCompat.Button.Colored"
    />

And here's the code for a button with rounded corners:

<Button
    android:id="@+id/enableKeyboardButton"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="@string/enable_keyboard_msg"
    app:layout_constraintBottom_toTopOf="@+id/useKeyboardButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    style="@style/Widget.AppCompat.Button.Colored"
    android:background="@drawable/rounded_corners"
    />

where the background is this drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"/>
    <corners android:radius="10dp"/>
</shape>

score 2 · Answer 1 · answered Jul 13 '18 at 02:15

2

Try removing the style attribute and only setting the background drawable.

answered Jul 13 '18 at 02:15

Jonas

51
4

score 1 · Answer 2 · answered Jul 13 '18 at 03:03

This could be done with newer support library (v28) MaterialButton.

<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MATERIAL BUTTON"
android:textSize="18sp"
app:icon="@drawable/ic_android_white_24dp" />

Take a look at this great article

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Use MaterialButton

and add app:cornerRadius="8dp"for rounded corner

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 24 '19 at 06:09

Lokesh

3,247
2
33
62

Rounded Button in Android Without Expanding Size

3 Answers3