Android Gradient Buttons(Shape)
Today
i am posting about creating fancy buttons in android.You can use this
tutorial to create your own fancy and more attractive buttons.In android
you can use shape class to create your own background,border for your
views,gradient for views.glossy effects.Gradient can be
Linear,Radial,Sweep gradiant.
The root tag of the xml file is a shape tag which indicates that you are creating a drawable for the background for some view.
solid tag is for paint the color of the shape in this tag there is a color attribute, this is for set the color of the shape.
corner tag is for set the style of the corner of the shape. In this tag there is a radius attribute which is used to round the corner of the shape.
gradient is the tag which is used to set the gradient background of the shape. In this tag there are different types of the attributes like angle which indicates the angle of the gradient and there are two other attributes which are startColor and the endColor which are for set the start and end color of the gradient.
There is a padding tag which is used to set the padding of the shape. stroke is used to create the border of the shape. in this tag there are width attribute which indicates the width of the border. There is a color attribute which is used to set the color of the border. If you want to set the dashed border instead of plain border then you can use other two attribute of the stroke. android:dashWidth and android:dashGap are used to set the dashed border of the shape.
We are using Selector tag for the selection of view which i will explain in my next blog
The root tag of the xml file is a shape tag which indicates that you are creating a drawable for the background for some view.
solid tag is for paint the color of the shape in this tag there is a color attribute, this is for set the color of the shape.
corner tag is for set the style of the corner of the shape. In this tag there is a radius attribute which is used to round the corner of the shape.
gradient is the tag which is used to set the gradient background of the shape. In this tag there are different types of the attributes like angle which indicates the angle of the gradient and there are two other attributes which are startColor and the endColor which are for set the start and end color of the gradient.
There is a padding tag which is used to set the padding of the shape. stroke is used to create the border of the shape. in this tag there are width attribute which indicates the width of the border. There is a color attribute which is used to set the color of the border. If you want to set the dashed border instead of plain border then you can use other two attribute of the stroke. android:dashWidth and android:dashGap are used to set the dashed border of the shape.
We are using Selector tag for the selection of view which i will explain in my next blog
Example:
Following is the background used for application: application_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#1b89b3"
android:endColor="#1b89b3"
android:centerColor="#82d3f3"
android:angle="90"
android:type="linear"/>
</shape>
</shape>
here are the different button files:
1) gradiant_black.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#6024335a"
android:endColor="#bc312f2f"
android:centerColor="#90d5cfd0"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#600d0500"
android:endColor="#bc0d0500"
android:centerColor="#90ede2db"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
</selector>
2)gradiant_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#6024335a"
android:endColor="#bc24335a"
android:centerColor="#90cbced7"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#60312abf"
android:endColor="#bc312abf"
android:centerColor="#90a39fe7"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
</selector>
3)gradiant_green.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#60056d02"
android:endColor="#bc25a622"
android:centerColor="#90c0e3bf"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#60056802"
android:endColor="#bc50b84d"
android:centerColor="#90c0edbf"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
</selector>
4)gradiant_orange.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#00f39b2a"
android:endColor="#00f39b2a"
android:centerColor="#50c89859"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#00f39b2a"
android:endColor="#30f39b2a"
android:centerColor="#90cfa175"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
</selector>
5)gradiant_red.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#60c4082b"
android:endColor="#bcd53a57"
android:centerColor="#90f1c4cc"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#6074091d"
android:endColor="#bc74091d"
android:centerColor="#9074091d"
android:angle="90"
android:type="linear"/>
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="5dp"
android:color="#f3e61b"/>
</shape>
</item>
</selector>
Here is main layout: mainlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:gravity="center"
android:orientation="vertical"
android:background="@drawable/application_background">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradiant_blue"
android:text="@string/application_button1"
android:textSize="12sp"
android:textStyle="bold"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradiant_green"
android:text="@string/application_button2"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradiant_red"
android:text="@string/application_button3"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradiant_black"
android:text="@string/application_button4"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradiant_orange"
android:text="@string/application_button5"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
</LinearLayout>
After running your application will look like this
No comments:
Post a Comment