This article will show you how to create simple gradient line separators to spice up the layout a little bit.
We are going to create gradients like these:
About Drawables
First off, we are going to create a drawable. A drawable resource is graphics that can be drawn on the screen, it can be a couple of different things, here are some examples;
- Bitmaps – png, jpg or gif images
- Nine-Patch image – A png that can be stretched, to create buttons of varying sizes for example
- State List – Making it easier to use different images for button states for example (focused, pressed)
- Shape Drawable
You can read more about drawable resources here.
Creating a Gradient Shape Drawable
In this example we are going to use the Shape Drawable, with it, we can create different shapes, we will use a Rectangle shape.
Create a new .xml file in your drawable folder (or drawable-mdpi folder) called gradient.xml, with the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:startColor="#000000"
android:endColor="#000000"
android:centerColor="#97CF4D" />
</shape>
And that is basically it. You now have a gradient shape drawable ready to use.
How to use our Gradient Shape Drawable file
In your layout file (main.xml for example), enter the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout01"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp">
<Button
android:text="Button"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></Button>
<View
android:layout_width="wrap_content"
android:background="@drawable/gradient"
android:layout_height="1dp"></View>
<CheckBox
android:text="CheckBox"
android:id="@+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></CheckBox>
<View
android:layout_width="wrap_content"
android:background="@drawable/gradient"
android:layout_height="1dp"></View>
</LinearLayout>
The android:background=”@drawable/gradient”
uses our newly created gradient.xml file in the drawable folder (or drawable-mdpi folder), and the result you can see on the first image!
Please share this article.