Question

Here’s an example of the iPhone EditText control.:

How can I create the same control in Android?

Answer 1

Basically, I see three ways to do what you want.

1st approach:

The first is, as Akki says, make a 9-patch that exactly duplicates the gradient-filled box that you want to use from (unspecified other platform). This lets your app look as close as possible to exactly the same on both platforms.

Here is a 9-patch made from your screen shot above. (This is res/drawable-*dpi/rounded_text_field.9.png)

2nd approach:

The second is to get the same effect using scalable native drawing capabilities. This won’t look exactly the same, but delivers arguably smoother results.

Here is some code to generate a rounded-rect image with a gradient fill. (This is res/drawable/gradientbg.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"
>
<corners android:radius="8dp"/>
<stroke android:width="2dp"
    android:color="#444"/>
<gradient 
   android:startColor="#888"
   android:centerColor="#fff"
   android:endColor="#fff"
   android:type="linear"
   android:angle="270"
   />
</shape>

Actually, I lied. In my original screen shot, the corners are much too big, so I reduced the corner radius from 16dp to 8dp. Here’s what it looks like now. Much improved, don’t you think? And a lot easier than tweaking a bitmap in 4 different densities.

3rd approach:

The third approach is to let the platform be what it will, and look the best that it can within its own paradigm. This has the advantage that, on different versions of the OS, your app will blend seamlessly with the rest of the system, even as the system theme changes.

Here’s the default EditText running the exact same code on Gingerbread. It would look pretty out of place on a Holo-themed device (such as the Jellybean-powered tablet that I used to create the first screenshot), and vice-versa.

For reference, here is the layout that contains all three EditTexts.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="32dp"
android:orientation="vertical"
 >
<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginTop="24dp"
    android:padding="12dp"
    android:gravity="center"
    android:background="@drawable/rounded_text_field"
    android:inputType="text"
    android:textColor="@android:color/black"
    android:text="9-patch background." >
    <requestFocus />
</EditText>
<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginTop="24dp"
    android:padding="12dp"
    android:gravity="center"
    android:background="@drawable/gradientbg"
    android:inputType="text"
    android:textColor="@android:color/black"
    android:text="Gradient background." />
<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginTop="24dp"
    android:padding="12dp"
    android:gravity="center"
    android:inputType="text"
    android:text="Default background." />
</LinearLayout>