StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><img src="https://i.stack.imgur.com/ptEUe.png" alt="Three kinds of EditText backgrounds"></p> <p>Basically, I see <strong>three ways</strong> to do what you want.</p> <h2>1st approach:</h2> <p>The first is, as <a href="https://stackoverflow.com/questions/11644429/how-create-gradient-like-iphone-edittext-box-in-android/11645359#11645359">Akki says</a>, 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.</p> <p>Here is a 9-patch made from your screen shot above. (This is <code>res/drawable-*dpi/rounded_text_field.9.png</code>)</p> <p><img src="https://i.stack.imgur.com/LhZLu.png" alt="Nine-patch background"></p> <h2>2nd approach:</h2> <p>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.</p> <p>Here is some code to generate a rounded-rect image with a gradient fill. (This is <code>res/drawable/gradientbg.xml</code>)</p> <pre><code><?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> </code></pre> <p>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.</p> <p><img src="https://i.stack.imgur.com/nkK7O.png" alt="Gradient background with 8dp radius corners."></p> <h2>3rd approach:</h2> <p>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.</p> <p>Here's the default <code>EditText</code> 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.</p> <p><img src="https://i.stack.imgur.com/NYdo8.png" alt="EditText on Gingerbread"></p> <p>For reference, here is the layout that contains all three EditTexts.</p> <pre><code><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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload