Underlining views, custom drawables in android

Edit:
In this post we talk about the performance of this method.

Sometimes we want to underline a view (a TextView or a Button), just to show the user that it’s active, or any other reason.

To achieve this we use custom drawables. In this case we use a layer-list.

The first element of the layer list is the base, and every item we put it’s a layer that goes on top, let’s try with an image, and it corresponding xml:

Layers

And here is the drawable. We can see that the first element is the base layer:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <!-- layer 1-->
            </item>
            <item>
                <!-- layer 2-->
            </item>
            <item>
                <!-- layer 3-->
            </item>
            <item>
                <!-- layer 4-->
            </item>
        </layer-list>
    </item>
</selector>

And now to achieve the effect we must know the bottom, top, right and left properties of item. They are similar to the margin property, but the are relative to the view.

So if we set the bottom of the second layer to 3dp (for example) we will be able to see 3dp of the layer below in the bottom. Here is an example:

Layers 2

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#ffff7a00" />
                </shape>
            </item>
            <item android:bottom="3dp">
                <shape>
                    <solid android:color="#222222" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Now we only need to assign the drawable to the background property of our view (ImageView, Button, etc).

Here is how it came out in my app:

Bar

Other effects

We can put lines in top and bottom at the same time:

Top and bottom

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#ffff7a00" />
                </shape>
            </item>
            <item android:top="3dp" android:bottom="3dp">
                <shape>
                    <solid android:color="#222222" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

We can also put a line in one (or both) sides. Here we have a line in the left.

Left

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <layer-list>
            <item>
                <shape >

                    <solid android:color="#ffff7a00" />
                </shape>
            </item>
            <item android:left="3dp">
                <shape>
                    <solid android:color="#222222" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

We can use more that 2 layers to achieve new effects. Here we use 3 layers to get this effect.

Explaining 3 layers
3 Layers example

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <layer-list>
            <item >
                <shape>
                    <solid android:color="#222222" />
                </shape>

            </item>
            <item android:bottom="3dp">
                <shape >

                    <solid android:color="#ffff7a00" />
                </shape>
            </item>
            <item android:bottom="6dp">
                <shape>
                    <solid android:color="#222222" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>
Advertisements

4 thoughts on “Underlining views, custom drawables in android

  1. Pingback: Underlining views with custom shapes, overdraw performance | Sloth Developers

    • You only need to assign the drawable to the background property of our view (ImageView, Button, etc).
      For Example your selector file is called: underline_text_selector.xml then you can apply it to any view by writing this in XML under that view.

      android:background=”@drawable/underline_text_selector”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s