Android : on changing EditText background color, EditText style getting changed

Question

Hi When I change the Background color of EditText of two EditText they are looking like both merging.

My layout code goes like this `

<EditText
    android:id="@+id/editText4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Text1"
    android:singleLine="true" />

<EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Text2"
    android:singleLine="true" >
</EditText>

<AutoCompleteTextView android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:imeOptions="actionNext"/>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Text3"
        android:singleLine="true" />

</LinearLayout>
 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Text4"
        android:singleLine="true" />

</LinearLayout>

 <Button
     android:id="@+id/button1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button" />

`

and My Activity code goes like this

public class MainActivity extends Activity {

EditText editText1, editText2, editText3, editText4;
Button button;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();

    button.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            editText1.setBackgroundColor(getResources().getColor(android.R.color.primary_text_dark_nodisable));
            editText3.setBackgroundColor(getResources().getColor(android.R.color.darker_gray));

        }
    });

}

private void init() {
    editText1 = (EditText) findViewById(R.id.editText1);
    editText2 = (EditText) findViewById(R.id.editText2);
    editText3 = (EditText) findViewById(R.id.editText4);
    button = (Button) findViewById(R.id.button1);

}

}

Refer the attached Screen shots below

Layout before clicking Button

Layout after clicking Button

Answer 1

As you can see here using EditText.setBackgroundColor(any color) will color your outline too. To keep the outline aspect i would recommend to include the edittext in a table row and use margin. Try this in your xml and see the result:

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:orientation="vertical" >

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:layout_margin="1dip"
        android:text="cosmincalistru" />
</TableRow>

Answer 2

You have set the same id for both the edittext. @+id/editText2

<EditText
    android:id="@+id/editText2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Text3"
    android:singleLine="true" />

<EditText
    android:id="@+id/editText2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Text4"
    android:singleLine="true" />