CODEWITHSUNDEEP
android
user1234567
user1234567

Reputation: 1842

BackgroundColorSpan with additional, vertical padding

In my app I have something similar in appearance to labels in GMail app UI. For those who may not know, they look like this (labels are these colorful bars): Gmail screenshot

In order to achieve similar effect I use nine-patch drawables - for each label I am creating a TextView and assign drawable to it. This is simple solution, but I don't like it. It's not elegant, it is quite slow as shown by profiler, and I just don't think it's the right way to do it.

I changed the design of the UI to make it more "ICS-y", so I removed rounded corners from the labels. And I started thinking how I could replace 9-patch solution. The most obvious thing is to use BackgroundColorSpan. But it has one, small drawback. I want my labels to have some padding. With drawables, it was easy to achieve. With spans, it's harder. To make horizontal padding, I can just add spaces at the beginning and at the end of the string. But how to make vertical padding larger? To clear things up, this is a screenshot of the label with BackgroundColorSpan:

enter image description here

I want to make the colored parts above and below the text larger. I think I should use some kind of MetricAffectingSpan, but I couldn't figure out which one. Or maybe I should write my own? Or, finally, maybe spans are just not able to fulfill my needs and I should stay with images or create a canvas and "manually" draw everything as in GMail app?

Upvotes: 8

Views: 1020

Answers (1)

poitroae
poitroae

Reputation: 21357

The easiest way to do this, and im pretty sure the GMAIL app is making use of it, are shapes.

Just create a custom shape, in your case a rectangle shape with rounded corners and a solid color, and assign this drawable then to the background property of your textview.

A shape is defined in xml. You will assign it as follows:

<TextView
   ...
   android:background="@drawable/my_awesome_shape" />

Upvotes: 2

Related Questions