Search code examples
androidbackgroundthemesandroid-3.0-honeycombdrawable

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


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


Solution

  • 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>