user3796130
user3796130

Reputation:

How to create a EditText with the top corner rounded and the bottom rectangle

I have a simple background in my drawable folder, just a border that I use on my EditText :

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

    <corners
        android:radius="2dp"
        />
    <solid android:color="#ffffff"
        />
    <stroke
        android:width="1dip"
        android:color="#000" />
</shape>

But I want to achieve this. Top rounded and the bottom rectangle in the edges! I'm having trouble and do this

Upvotes: 0

Views: 2720

Answers (4)

omkar ugale
omkar ugale

Reputation: 116

create round_shape.xml

 <?xml version="1.0" encoding="utf-8"?>
            <shape xmlns:android="http://schemas.android.com/apk/res/android">
            
                <solid android:color="@color/white"/>
                <corners android:bottomRightRadius="0dp"
                    android:bottomLeftRadius="0dp"
                    android:topLeftRadius="20dp"
                    android:topRightRadius="20dp"/>
            
            </shape>

Set that drawable in you Edit Text background

<EditText
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/round_shape"/>

Upvotes: 1

Ninja
Ninja

Reputation: 698

Create one Drawable shape xml file

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

    <stroke
        android:width="1dip"
        android:color="@color/colorAccent"/>

    <corners android:radius="10dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"/>

</shape>

Set that drawable in you EditText background

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your Text"
    android:padding="@dimen/dimen10"
    android:background="@drawable/testing"/>

Upvotes: 2

Vasudev Vyas
Vasudev Vyas

Reputation: 742

here create editbox_custom_top_radius.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Here Corner use for give curve to your edit text-->
    <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/>

    <!--stroke is use to apply border on edit text-->
    <stroke android:width="2dp"/>

    <!--solid for incase you want background color to edit box-->
    <solid android:color="@color/app_grey"/>
</shape>

create editbox_custom_bottom_radius.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Here Corner use for give curve to your edit text-->
    <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"/>

    <!--stroke is use to apply border on edit text-->
    <stroke android:width="2dp"/>

    <!--solid for incase you want background color to edit box-->
    <solid android:color="@color/app_grey"/>
</shape>

and apply it on your edit box

    <LinearLayout
     android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


 <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Your Text"
        android:padding="@dimen/dimen10"
        android:background="@drawable/editbox_custom_top_radius"/>

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Your Text"
        android:padding="@dimen/dimen10"/>

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Your Text"
        android:padding="@dimen/dimen10"
        android:background="@drawable/editbox_custom_bottom_radius"/>

</LinearLayout>

try it.

Upvotes: 0

Ratilal Chopda
Ratilal Chopda

Reputation: 4220

Please try this one work for me

<solid android:color="#ffffff" />

<stroke
    android:width="1dp"
    android:color="#000" />
<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="25dp"
    android:topRightRadius="25dp" />

please check and change radius.

Upvotes: 0

Related Questions