CODEWITHSUNDEEP
androidandroid-edittext
gktg1414
gktg1414

Reputation: 107

EditText and Horizontal Line

When we type an input value by using EditText, I want a horizontal line to be placed below my input like phone book application in all mobile phones.

Enter Phone : ___________

I want my input to be placed on this line. How can I do this by using EditText ?

Upvotes: 1

Views: 1563

Answers (6)

user6930148
user6930148

Reputation:

one method is,

make backgroundtint is black colour and set hint like below code

 <EditText
 android:layout_width="200dp"
 android:layout_height="wrap_content"
 android:backgroundTint="#000000"
 android:hint=" "  />

other method is, add a view with black background below the editText and background of the editText is make it null.

Upvotes: 0

Chetan Joshi
Chetan Joshi

Reputation: 5721

You can Try with CustomEditText Like Below code:

package com.cj.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.EditText;

/**
 * Created by E069099 on 7/20/2017.
 */

public class CustomEdiTextWithLine extends EditText {
    private Rect rect;
    private Paint paint;

    public CustomEdiTextWithLine(Context context, AttributeSet attrs) {
        super(context, attrs);
        rect = new Rect();
        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.GREEN);
        paint.setStrokeWidth(2F);

        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setTextSize(20);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //start at the vertical center of the textview
        float top = (getHeight() + getPaddingTop() - getPaddingBottom())/2;
        //start at the left margin
        float left = getPaddingLeft();
        //we draw all the way to the right
        float right = getWidth() -getPaddingRight();
        //we want the line to be 2 pixel thick
        float bottom = getHeight()- getPaddingBottom();
        canvas.drawLine(0,bottom,right,bottom,paint);
        super.onDraw(canvas);
    }
}

Upvotes: 0

Andy Developer
Andy Developer

Reputation: 3101

As everyone answer said set width and height to wrap_content this is the right answer but still their is another way to achieve this lets have a look.

First create a drawable file (myline.xml) which create the line.

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

<item
    android:bottom="1dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle">
        <stroke
            // You can change width according to your need
            android:width="1dp"
            android:color="#000000" />
    </shape>
</item>

Now in your layout.xml use myline.xml in edit text background.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter Phone: "
        android:textColor="#000"
        android:textSize="18dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myline"
        android:textColor="#000"
        android:textSize="18dp" />
</LinearLayout>

And its done see the output in screenshot below.

enter image description here

Upvotes: 0

Ajil O.
Ajil O.

Reputation: 6892

You have to set width to either match_parent or to fixed width like 100dp

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
/>

Upvotes: 0

AskNilesh
AskNilesh

Reputation: 69734

You have to set width of EditText from match_parent to wrap_content line below code

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
/>

Upvotes: 0

Ojas Chimane
Ojas Chimane

Reputation: 104

Try this

 <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dp"
            android:layout_marginTop="2dp">

            <EditText
                android:id="@+id/Prac"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Practice"
                android:inputType="text"
                android:textSize="12sp" />
        </android.support.design.widget.TextInputLayout>

Upvotes: 2

Related Questions