Rounded rectangle background editext with hint in

Question

I got stuck in creating UI. please help me out creating that .

I have a EditText having rounded rectangle border which is ok but placeholder is in the top of border leaving the border.

Here is the image

Thanks in advance.

Answer 1

try below...

you achieve this using ConstraintLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/linearLayout"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_10sdp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/round"
        android:padding="@dimen/_10sdp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:padding="@dimen/_5sdp"
        android:text="Name"
        app:layout_constraintLeft_toLeftOf="@+id/edittext"
        android:layout_marginLeft="@dimen/_15sdp"
        app:layout_constraintTop_toTopOf="@+id/edittext"
        app:layout_constraintBottom_toTopOf="@+id/edittext"
        android:textColor="@android:color/black"
        tools:layout_editor_absoluteX="107dp"
        tools:layout_editor_absoluteY="90dp" />
</android.support.constraint.ConstraintLayout>

round.xml

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#FFFFFF"/>
    <stroke android:color="@android:color/darker_gray" android:width="@dimen/_1sdp"/>
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
</shape>

Output : see

Answer 2

You have to use Vector Drawable for creating custom shape as you need.

I have created a sample for the same. Create custom_vector.xml file under res/drawable/

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="20dp"
    android:width="20dp"
    android:viewportWidth="400"
    android:viewportHeight="400">

    <group
        android:pivotX="10.0"
        android:pivotY="10.0">

        <!-- the outside box -->

        <!-- top line & top left corner -->
        <path android:pathData="M 30 60 H 40 c -40 0 -35 0 -35 35 "
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- left line & bottom left corner -->
        <path android:pathData="M 5 64 v 271 c 0 40 0 35 35 35 "
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- bottom line & bottom right corner -->
        <path android:pathData="M 30 370 h 330 c 40 0 35 -10 35 -35"
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- right line & top right corner -->
        <path android:pathData="M 395 356 v -261 c0 -40 0 -35 -50 -35"
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- top line till end-->
        <!-- 140 is the starting point of line after TEXT-->
        <path android:pathData="M 140 60 370 60"
            android:strokeColor="#000000" android:strokeWidth="10" />
    </group>
</vector>

You may have to change the value of last path tag

top line till end

as per your text at the place of 'Name'. You can also modify the shape or corners as you want.

Create a test_layout.xml file under res/layout/

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_vector"
        android:layout_margin="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:paddingLeft="5dp"
            android:textSize="20sp"
            android:paddingRight="5dp"
            android:text="Name"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="15dp"
            android:textSize="25sp"
            android:background="@android:color/transparent"
            android:text="Alex Smith"/>

    </LinearLayout>
</LinearLayout>

It appears like this screenshot