CODEWITHSUNDEEP
androidxmlandroid-edittextstyles
Mehvish Ali
Mehvish Ali

Reputation: 752

Rounded Borders for EditText Android

I am trying to create rounded borders around two of the EditTexts in my one of my layouts. For this I have created a xml rounded_pass.xml and assigned it as a background to LinearLayout containing both the EditText fields. But I also want to have a seperator between EditViews.

rounded_pass.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"  >
            <corners
                android:topLeftRadius="5dip"
                android:topRightRadius="5dip"
                android:bottomLeftRadius="5dip"
                android:bottomRightRadius="5dip"

                />
        </shape>
    </item>
</selector>

LoginActivity.xml:

 .......
    .......
     <LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/imageView"
    android:background="@drawable/rounded_pass"
    >
    <EditText
        android:layout_width="215dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText"

       />

    <EditText
        android:layout_width="215dp"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/editText2"
     />
    </LinearLayout>
    .......
    .......

The Effect I want to have is: Desired Effect

Right Now:

Error Image

Upvotes: 2

Views: 10677

Answers (4)

Sagar Jogadia
Sagar Jogadia

Reputation: 1350

Create single xml rounded_border.xml and apply it to the root layout.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"  >
            <corners
                android:topLeftRadius="5dip"
                android:topRightRadius="5dip"
                android:bottomLeftRadius="5dip"
                android:bottomRightRadius="5dip"

                />
            <stroke android:width="1dip" android:color="#1caadf" />
            <!--<gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#ffffff" />-->
        </shape>
    </item>
</selector>

Upvotes: 3

Abhishek Patel
Abhishek Patel

Reputation: 4328

You can try this

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_uname"
    android:orientation="vertical">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent" />

    <View
        android:id="@+id/v1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#1caadf"></View>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:ems="10"
        android:inputType="textPassword" />
</LinearLayout>

Upvotes: 1

Niranj Patel
Niranj Patel

Reputation: 33248

There is minor changes in your shape xml file. You have set same corner value for both file. There should be corner value 5 bottomLeft & bottomRight for password filed.

here is perfect code. please run in device and check it.

rounded_uname.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="0dip"
        android:bottomRightRadius="0dip"
        android:topLeftRadius="5dip"
        android:topRightRadius="5dip"
        />
    <stroke
        android:width="1dip"
        android:color="#1caadf" />
</shape>

rounded_pass.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="5dip"
        android:bottomRightRadius="5dip"
        android:topLeftRadius="0dip"
        android:topRightRadius="0dip"
        />
    <stroke
        android:width="1dip"
        android:color="#1caadf" />
</shape>

Upvotes: 0

Ravi
Ravi

Reputation: 35569

Instead of giving borders to both Email and password, give border to its parent view. i.e RelativeLayout, LinearLayout or any layout

<LinearLayout background="@drawable/round_corner_drawable">

    //your both edittexts

</LinearLayout>

Add View having height of 1dp in between both your EditText, so that line will be drawn which will look like a border only

Upvotes: 1

Related Questions