0

I want a EditText as given in the picture bellow:-

enter image description here

Please suggest how to do this? Thanks in advance!

Update:-

I used Nikita Kurtin's suggestion. It looks weird. I have to adjust the background. I guess this background needs to adjusted for variants of devices. See the picture what is the problem right now:-

enter image description here

masiboo
  • 4,537
  • 9
  • 75
  • 136

3 Answers3

1

i highly recommend to use this lib for every line of your layout without helper text, floated label text and error text. check lib: https://github.com/rengwuxian/MaterialEditText

Setmax
  • 946
  • 6
  • 10
  • It's nice but limited. Not backward compatible. So I can't use it. My app should support min sdk level 16 – masiboo Aug 05 '15 at 08:00
  • 1
    This library is min sdk 12. https://github.com/rengwuxian/MaterialEditText/blob/master/sample/build.gradle Not backward compatible means, its version 2, if you used version 1, then upgraded to version 2, you won't be able to go back to version 2. For your min sdk 16 requirements this library is good to go. I used this library, it's fantastic and easy to use. – Itai Spector Oct 25 '15 at 16:55
1

You can create an xml for a line background and set it's attribute of tileMode as repeated. Then just use it as a background of your edit text.

example for an xml: asume it's called 'blue_lines.xml'

<?xml version="1.0" encoding="utf-8"?>
<bitmap 
android:src="@drawable/blue_line_bg"
xmlns:android="http://schemas.android.com/apk/res/android"
android:tileMode="repeat"/>

example for editText using it:

<EditText 
android:id="@+id/input1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/blue_lines"

 />

enter image description here

Update1: blue line image I used blue line image

Update2: dynamically calculated font, to adjust different screens

First: get the height of blue_line_bg 

BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeResource(getResources(), R.drawable.blue_line_bg, options);
    int imageHeight = options.outHeight;
    int padding=10;//inner line padding
    int fontSize=imageHeight-padding;//calculated font size

Second: add calculated font size to the relevant editText 

((EditText)findViewById(R.id.input1)).setTextSize(fontSize);//set calculated font size to the edit text
Nikita Kurtin
  • 5,889
  • 4
  • 44
  • 48
  • Could you please give the blue_line_bg image? I couldn't make or find any suitable blue line image for background. I tried it and works with my crappy background blue line image :(. – masiboo Aug 05 '15 at 07:56
  • 1
    No problem, I added it to the answer for you. As you can see It's just a simple white rectangle with blue line at the bottom. – Nikita Kurtin Aug 05 '15 at 18:24
  • Thanks but it didn't help. Please check the updated comments – masiboo Aug 06 '15 at 06:33
  • 1
    Yes to adjust to different screens the font size and the one-line background needs to be matched. To solve this you can dynamically take the height of resources bitmap, and then add needed text size to the EditText. I've added example to the answer. @see Update 2 Checked it in 2 real devices: Nexus 4 with API 5.0 and THL with 4.2.2 – Nikita Kurtin Aug 11 '15 at 00:29
0

You have to create your edit text through java code, I haven't done this before but https://stackoverflow.com/a/10770670/1384010 is an example who is doing kind of same thing.You will need to make few changes in code for meeting with your actual requirements.

Hope this will help you mate.

Community
  • 1
  • 1
Adarsh Yadav
  • 3,752
  • 3
  • 24
  • 46