Styling EditText view with shape drawable to look similar to new holographic theme for Android < 3.0

Question

I want to create a shape drawable for that mimics the new holographic theme (Android >=3.0) on older Android versions.

It's quite easy to draw a line at the bottom with

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
      <item>
          <shape >
              <solid android:color="@color/border" />
          </shape>
      </item>

      <!-- main color -->
      <item android:bottom="1.5dp">
          <shape >
              <solid android:color="@color/background" />
          </shape>
      </item>
  </layer-list>

But how to draw the tick boundaries left and right as in the holo theme slide from talk about android ui at Google I/O 2011

Yes. It was sufficient. As written below the solution is missing the glow effect for the selected field. — Rodja, Dec 13 '12 at 11:08

score 29 · Accepted Answer · edited Nov 21 '14 at 08:12

29

It's a little hack, but unless you find something better, this way it should be possible.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
      <shape >
          <solid android:color="@color/border" />
      </shape>
  </item>

  <!-- main color -->
  <item android:bottom="1.5dp"
      android:left="1.5dp"
      android:right="1.5dp">
      <shape >
          <solid android:color="@color/background" />
      </shape>
  </item>

  <!-- draw another block to cut-off the left and right bars -->
  <item android:bottom="15.0dp">
      <shape >
          <solid android:color="@color/background" />
      </shape>
  </item>
</layer-list>

edited Nov 21 '14 at 08:12

Yuval Itzchakov

146,575
32
257
321

answered Nov 21 '11 at 12:51

Entreco

12,738
8
75
95

That works as expected! I guess creating a glowing for the selected state is not so easy... – Rodja Nov 21 '11 at 14:17
1

A totallly different approach (without using shape-drawables), is to use .9.png (or nine patch images)... With those, it should be fairly easy as well, but I don't know your reason for staying with shape-drawables. http://developer.android.com/guide/developing/tools/draw9patch.html – Entreco Nov 22 '11 at 06:46
2

Shape drawables are resolution indipendent. When using nine patches, I need to manage a bunch of assets. If that is not an issue, nine patches are a fine solution, too. – Rodja Nov 23 '11 at 09:10
2

I'm trying to do this but trying to get the last 2 android:colors (where you have "background") be transparent on top of my current background without having to specify "@color/background". How can I do this? I tried @android:color/transparent, but it just makes the whole EditText look like a white box (I'm using #FFFFFF in place of your "@color/border"). – Mxyk Oct 02 '12 at 18:31

score 9 · Answer 2 · answered Feb 22 '13 at 19:35

9

I've found this website that will create Holo-themed drawables for widgets for any color you pick: http://android-holo-colors.com/ . It generates 9-patches for you, you just stick them in your app.

answered Feb 22 '13 at 19:35

Mark

1,746
2
18
19

But, thanks for the link! It's nice to quickly get some drawables and get right to coding – Entreco Feb 23 '13 at 18:15

Styling EditText view with shape drawable to look similar to new holographic theme for Android < 3.0

2 Answers2

Linked