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

Solution 1

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>

Solution 2

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.

Comments

[Rodja]

That works as expected! I guess creating a glowing for the selected state is not so easy...

[Entreco]

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. developer.android.com/guide/developing/tools/draw9patch.html

[Rodja]

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.

[Mxyk]

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").

[Entreco]

But, thanks for the link! It's nice to quickly get some drawables and get right to coding