id="info"

Developer

Visual cues with Android's multi-line EditText widget

William J. Francis shows you a couple of quick, painless ways to add bounding to a multi-line Android EditText widget.

android184x138.jpg

The Android UI has come a long way over the years. Particularly with the release of the Holo themes, a great number of widgets that previously felt clunky and dated suddenly became streamlined and sexy.

However, one case where I did not totally agree with the direction Google chose to take the UI in is that of the EditText widget. While I agree when editing a single line of text the Holo-themed EditText widget is a great use of screen real estate, when the component is set to multi-line, I think it fails to clue the user in.

To see what I mean, let's take a look at a standard EditText xml layout.

<EditText
android:layout_width="match_parent"
    	android:layout_height="wrap_content"
     	android:layout_margin="40dp"
  	android:inputType="textMultiLine" 
android:lines="8" 
	android:gravity="top|left" 
	android:cursorVisible="false"
android:scrollbars="vertical" />

I'm giving the user eight lines of text to play with, and when the widget is rendered on Éclair (API 10), that's pretty obvious (Figure A).

Figure A

edittextf1082514.png

Run that same code on Honeycomb (API 11) or better though, and it's not as clear (Figure B).

Figure B

edittextf2082514.png

Who knows, maybe I just think better inside the box (get it?), but except for the awful orange I preferred the pre-Holo look for the EditText view.

Luckily, there are a couple of quick, painless ways to add bounding to a multi-line EditText widget. The first is as easy as setting the background color and adding a bit of padding (Figure C).

<EditText
android:layout_width="match_parent"
    	android:layout_height="wrap_content"
     	android:layout_margin="40dp"
     	android:inputType="textMultiLine" 
android:lines="8" 
android:padding="8dp"
android:background="#50c5c5c5"
android:gravity="top|left" 
android:cursorVisible="false"
android:scrollbars="vertical" />

Figure C

edittextf3082514.png

If you want something a little fancier, try creating a simple XML shape in your /drawable folder.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="2dp" android:color="#ffc5c5c5" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="5dp" />
    <solid android:color="#ffffffff" />
</shape>

Then point your EditText background to your drawable (Figure D).

<EditText
   	android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:layout_margin="40dp"
    	android:inputType="textMultiLine" 
android:lines="8" 
android:padding="8dp"
android:background="@drawable/rectangle"
android:gravity="top|left" 
android:cursorVisible="false"
android:scrollbars="vertical" /> 

Figure D

edittextf4082514.png

At the end of the day, the Android platform gives developers guidance and freedom, and the UI widgets are no exception. If you find the cues provided by the out-of-the-box elements are leaving your users scratching their heads, by all means don't be afraid to experiment. Subtle tweaks are often all that are required and, as you can see from the examples above, the effort is pretty minimal.

Also see

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

Editor's Picks