How to keep round corners for button in Android when there are two-lines words

Question

I tried to make a button with round corners using the codes below:

first_page_button.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15px" />
    <solid android:color="#199900" />
</shape>

activity xml:

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center">
            <Button
                android:id="@+id/login_page_send_code"
                android:layout_width="wrap_content"
                android:minWidth="120dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:layout_height="45dp"
                android:layout_marginTop="25dp"
                android:layout_marginRight="20dp"
                android:text="@string/login_page_send_code"
                android:textSize="10dp"
                android:textColor="#EAEAEA"
                android:alpha="1"
                android:background="@drawable/first_page_button"/>
            <Button
                android:id="@+id/login_page_login"
                android:layout_width="wrap_content"
                android:minWidth="100dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:layout_height="35dp"
                android:layout_marginTop="30dp"
                android:layout_marginLeft="20dp"
                android:text="@string/login_page_login"
                android:textSize="15dp"
                android:textColor="#EAEAEA"
                android:alpha="1"
                android:background="@drawable/first_page_button"/>
        </LinearLayout>

The normal one line sentence looks like supposed.bmp.But I found that when the sentences are more than one line the two corners on the bottom won't be round liketwo-line.bmp. Please help me to modify my code, thanks for yours help!

It looks like you've set your layout_height to be a fixed height which is most likely causing the background to get truncated. Have you tried changing the layout_height to "wrap_content" — jagsaund, May 03 '18 at 05:54
@YuLeung Check my answer and let me know of you face any issues. — Jay Rathod, May 03 '18 at 06:37

score 0 · Answer 1 · answered May 03 '18 at 05:54

0

Try this for your Shapes

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorDarkWhite" />
    <corners android:bottomRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:topLeftRadius="5dp"/>
</shape>

Just adjust the corners the way you like it!

answered May 03 '18 at 05:54

Kristofer

809
9
24

I tried it but it just kept the wrong representation. – Yu Leung May 03 '18 at 06:03
whats wrong then? can you please capture the image of the wrongly presented button? – Fazan Cheng May 03 '18 at 06:19

InsaneCat · Answer 2 · 2018-05-03T06:47:52.750

round_corner.xml

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

    <corners android:radius="50dp" />

    <gradient
        android:angle="45"
        android:endColor="#00A46F"
        android:startColor="#00A46F" />

</shape>

Button

 <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_login_password"
        android:layout_marginTop="25dp"
        android:background="@drawable/round_corner"
        android:padding="0dp"
        android:text="HELLO THIS IS A TEST APPLICATION "
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="18sp" />

As per your XML file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:weightSum="1">

        <Button
            android:id="@+id/login_page_send_code"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight=".5"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:background="@drawable/round_corner_green"
            android:singleLine="false"
            android:text="THIS IS YOUR FIRST BUTTON"
            android:textColor="#EAEAEA"
            android:textSize="13dp" />

        <Button
            android:id="@+id/login_page_login"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight=".5"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:background="@drawable/round_corner_green"
            android:text="THIS IS YOUR SECOND BUTTON"
            android:textColor="#EAEAEA"
            android:textSize="13dp" />
    </LinearLayout>
</RelativeLayout>

Set a android:radius as per your requirement of round corner button.

Hope this helps you.

score 0 · Answer 3 · answered May 03 '18 at 06:19

check round corner button here

Try this Shapes drawable.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">

<solid android:color="#3F51B5" />

<corners
    android:bottomLeftRadius="24dp"
    android:bottomRightRadius="24dp"
    android:topLeftRadius="24dp"
    android:topRightRadius="24dp" />
</shape>

Jay Rathod · Accepted Answer · 2018-05-03T06:50:37.457

You need to made some changes to Button properties and correct them as below.

Like

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@color/white"
    android:padding="20dp"
    android:orientation="horizontal">

    <Button
        android:id="@+id/login_page_send_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:alpha="1"
        android:background="@drawable/first_page_button"
        android:minWidth="120dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="SE CONNECTOR"
        android:textColor="#EAEAEA"
        android:textSize="12sp"
        tools:ignore="ButtonStyle" />

    <Button
        android:id="@+id/login_page_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:alpha="1"
        android:background="@drawable/first_page_button"
        android:minWidth="100dp"
        android:paddingBottom="12dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="12dp"
        android:text="Envoyer Le Code De Verification"
        android:textColor="#EAEAEA"
        android:textSize="15sp"
        tools:ignore="ButtonStyle" />
</LinearLayout>

first_page_button.xml

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

    <stroke
        android:width="1dp"
        android:color="@color/white" />

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

    <corners
        android:bottomLeftRadius="10dip"
        android:bottomRightRadius="10dip"
        android:topLeftRadius="10dip"
        android:topRightRadius="10dip" />
</shape>

Output

How to keep round corners for button in Android when there are two-lines words

4 Answers4

Linked