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

Exception or error:

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

How to solve:

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>

###

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.

Leave a Reply

Your email address will not be published. Required fields are marked *