EditText that looks like TextView inside a ListView

Question

I am developing an application where the user can edit the data in the ListView. I want to have an EditText inside that ListView, this edittext should behave like TextView but when the user clicks it it should look like EditText, How can i achieve this functionality?

Actually the EditText inside the ListView looks ugly & i want that the EditText should look like a TextView bydefault but when the user try to Edit the data then it should look like the EditText.

I hope that my question is clear if not please ask.

Answer 1

The below files I used in my app.

main.xml in layout folder

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"    
    android:orientation="vertical" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <EditText android:layout_width="fill_parent"
        android:padding="5dip"
        android:layout_height="wrap_content"
        android:textColor="#00f"
        android:textSize="20dip"
        android:background="@drawable/bg" />    
    <EditText android:layout_width="fill_parent"
        android:padding="5dip"
        android:layout_height="wrap_content"
        android:textColor="#00f"
        android:textSize="20dip"
        android:background="@drawable/bg" />
</LinearLayout>

myshape.xml in drawable folder

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">   
    <solid   android:color="#fff"/> 
    <corners android:radius="2dip" />   
    <stroke android:width="2dip"
        android:color="#ff4500" />
</shape>

bg.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >    
    <item android:state_enabled="true"        
        android:state_focused="true"                        
        android:drawable="@drawable/myshape"/>    
</selector>

Java file

public class EditTextSelector extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Answer 2

Use selector for EditText to create different states. If it is in idle state give normal color drawable as background and if it is focussed use a 9 patch PNG drawable which resembles real EditText background.

I hope it may help you. If you don't know how to use selector, feel free to ask me.

Sample ScreenShots

I am using 1 TextVuew and 2 EditText views in my app, check below screen shots to know how the EditText will look like according to your requirements. If you like them and it is actually required then i post code here.

Initial Screen

While taking Input for 1st EditText

While taking Input for 2nd EditText

Answer 3

well, I would recommend to use textview.. and when click on it it will swap to editText(add View /removeView ) in parent.. and when focus changes it will reverted back to textview with new changes .. second solution to use popup dialog for editing purpose with done button to submit and back to get back to list. third solution to change style of editText with :

editText.setBackgroundResource(R.layout.writemode);
//later after this item loses focus, use:
editText.setBackgroundResource(R.layout.readmode);

Answer 4

You can prompt user To input with an AlertDialog.

Answer 5

Use setCursorVisible(false) to hide the cursor and onclick of edittext setCursorVisible(true). this, also set background color to white of edittext

Answer 6

android:cursorVisible="false"
android:background="@android:color/transparent"