CODEWITHSUNDEEP
androidandroid-layoutmaterial-design
Muhammad Mahtab Ahmed
Muhammad Mahtab Ahmed

Reputation: 41

Implementation Outlined text field Input with lable text in android application

I want to implement this type of layout of input text with float lable but problem is when I run application it not look same and lable appear upper side of input text field.

enter image description here

But, this is my result

enter image description here

My code is:

roundview.xml.

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

                <stroke
                    android:width="2dp"
                    android:color="#3bbdfa"
                    />
            </shape>
        </item>
    </selector>


<android.support.design.widget.TextInputLayout
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edittxt"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:background="@drawable/roundview"
        android:fadeScrollbars="false"
        android:fadingEdge="vertical"
        android:foregroundGravity="fill_vertical"
        android:hint="name"
        android:isScrollContainer="false"
        android:requiresFadingEdge="vertical"
        android:singleLine="false"
        android:visibility="visible" />

</android.support.design.widget.TextInputLayout>

I follow https://material.io/design for text fields design but I got this problem.thanks

Upvotes: 4

Views: 12053

Answers (5)

Dinith
Dinith

Reputation: 1009

Have a look at TextField Widgets.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    />

</com.google.android.material.textfield.TextInputLayout>

Upvotes: -1

Jospin Rugamba Bahizi
Jospin Rugamba Bahizi

Reputation: 1

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:layout_marginTop="100dp" >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/text"
        android:inputType="text"
        android:importantForAutofill="no"
        tools:ignore="LabelFor" />

 </com.google.android.material.textfield.TextInputLayout>

Upvotes: -1

Napster
Napster

Reputation: 159

Outline Box

Outline text fields have a stroked border and are less emphasized. To use an outline text field, apply the following style to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Reference: TextInputLayout

Upvotes: 2

ashwin mahajan
ashwin mahajan

Reputation: 1782

It can be done by applying Widget.MaterialComponents.TextInputLayout.OutlinedBox style on a TextInputLayout.

<android.support.design.widget.TextInputLayout
        android:id="@+id/name_text_input"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/name_edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name" />
    </android.support.design.widget.TextInputLayout>

You can check this answer which also has a link to an example.

Upvotes: 8

Suhaib Roomy
Suhaib Roomy

Reputation: 2600

This cannot be achieved using android.support.design.widget.TextInputLayout. You will have to create a custom class which can draw this kind of border around your edit text keeping in mind the hint text, you can use a png as your background if your hint text is constant

Upvotes: 0

Related Questions