Android Tutorials and Tips: Gradient Background for buttons, list Item and Layouts Android

Gradient Background for buttons, list Item and Layouts Android

Many Developers want gradient backgrounds instead of images, So here is lots of gradient example for buttons , list items and Layouts.

Best Tool
http://angrytools.com/gradient/

Have look on screen shots first.

Sorry This tutorial is not fully structured :( , Because I don't have much time to do that right now.

But can learn many new things from this Such as Text shadow as we mention in style.xml etc

MainActivity.java

package com.example.gradiantexample;

import android.os.Bundle;

import android.app.Activity;

import android.content.Intent;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Button button1 = (Button) findViewById(R.id.button1);

Button button2 = (Button) findViewById(R.id.button2);

Button button3 = (Button) findViewById(R.id.button3);

Button button4 = (Button) findViewById(R.id.button4);

Button button5 = (Button) findViewById(R.id.button5);

Button button6 = (Button) findViewById(R.id.button6);

Button button7 = (Button) findViewById(R.id.button7);

Button button8 = (Button) findViewById(R.id.button8);

Button button9 = (Button) findViewById(R.id.button9);

button1.setOnClickListener(this);

button2.setOnClickListener(this);

button3.setOnClickListener(this);

button4.setOnClickListener(this);

button5.setOnClickListener(this);

button6.setOnClickListener(this);

button7.setOnClickListener(this);

button8.setOnClickListener(this);

button9.setOnClickListener(this);

}

@Override

public void onClick(View v) {

Intent i = new Intent(this, GradianColor.class);

switch (v.getId()) {

case R.id.button1:

i.putExtra("GradiantNum", 1);

startActivity(i);

break;

case R.id.button2:

i.putExtra("GradiantNum", 2);

startActivity(i);

break;

case R.id.button3:

i.putExtra("GradiantNum", 3);

startActivity(i);

break;

case R.id.button4:

i.putExtra("GradiantNum", 4);

startActivity(i);

break;

case R.id.button5:

i.putExtra("GradiantNum", 5);

startActivity(i);

break;

case R.id.button6:

i.putExtra("GradiantNum", 6);

startActivity(i);

break;

case R.id.button7:

Intent i1 = new Intent(this, ItemExample.class);

startActivity(i1);

break;

case R.id.button8:

Intent i2 = new Intent(this, GradianColor.class);

startActivity(i2);

break;

case R.id.button9:

Intent i3 = new Intent(this, GradianColor.class);

startActivity(i3);

break;

default:

break;

}

GradianColor.java

package com.example.gradiantexample;

import android.os.Bundle;

import android.app.Activity;

import android.content.Intent;

import android.view.Menu;

import android.widget.RelativeLayout;

public class GradianColor extends Activity {

RelativeLayout layout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_gradian_color);

layout = (RelativeLayout) findViewById(R.id.ColorbgRL);

int gradianType = 0;

try {

Intent i = getIntent();

gradianType = i.getIntExtra("GradiantNum", 0);

} catch (Exception e) {

e.printStackTrace();

}

switch (gradianType) {

case 1:

layout.setBackgroundResource(R.drawable.background_a);

break;

case 2:

layout.setBackgroundResource(R.drawable.background_b);

break;

case 3:

layout.setBackgroundResource(R.drawable.background_c);

break;

case 4:

layout.setBackgroundResource(R.drawable.background_d);

break;

case 5:

layout.setBackgroundResource(R.drawable.background_f);

break;

case 6:

layout.setBackgroundResource(R.drawable.background_f);

break;

default:

layout.setBackgroundResource(R.drawable.whitegradiant);

break;

}

ItemExample.java

package com.example.gradiantexample;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class ItemExample extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_item_example);

}

activity_gradian_color.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/ColorbgRL"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</RelativeLayout>

activity_item_example.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@android:color/black">

<TextView

android:id="@+id/TextView04"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:background="@drawable/whitegradiant"

android:gravity="center"

android:text="single Item " />

<TextView

android:id="@+id/TextView05"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_alignParentTop="true"

android:background="@drawable/listitem_gradiant_2"

android:gravity="center"

android:text="ListItem " />

<TextView

android:id="@+id/TextView03"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_below="@+id/TextView05"

android:background="@drawable/listitem_gradiant_2"

android:gravity="center"

android:text="ListItem " />

<TextView

android:id="@+id/TextView02"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_below="@+id/textView1"

android:background="@drawable/list_item_gradient1"

android:gravity="center"

android:text="ListItem 2" />

<TextView

android:id="@+id/TextView07"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_above="@+id/TextView04"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_marginBottom="20dp"

android:background="@drawable/list_item_gradiant_3"

android:gravity="center"

android:text="single Item " />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_below="@+id/TextView03"

android:layout_marginTop="20dp"

android:background="@drawable/list_item_gradient1"

android:gravity="center"

android:text="ListItem 2" />

<TextView

android:id="@+id/TextView01"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_below="@+id/TextView02"

android:layout_marginTop="15dp"

android:background="@drawable/topbar"

android:gravity="center"

android:text="ListItem 2" />

<TextView

android:id="@+id/TextView06"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_below="@+id/TextView01"

android:background="@drawable/list_item_gradient1"

android:gravity="center"

android:text="ListItem 2" />

</RelativeLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/whitegradiant"

android:orientation="vertical" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:weightSum="2" >

<Button

android:id="@+id/button1"

style="@style/ButtonText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/red_btn"

android:text="Red" />

<Button

android:id="@+id/button2"

style="@style/ButtonText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/green_btn"

android:text="green" />

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:weightSum="2" >

<Button

android:id="@+id/button3"

style="@style/ButtonText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/blue_btn"

android:text="blue" />

<Button

android:id="@+id/button4"

style="@style/ButtonText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/black_btn"

android:text="black" />

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:weightSum="2" >

<Button

android:id="@+id/button5"

style="@style/ButtonText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/yellew_btn"

android:text="yellow" />

<Button

android:id="@+id/button6"

style="@style/ButtonText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/purple_btn"

android:text="purple" />

</LinearLayout>

<Button

android:id="@+id/button7"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/background_b"

android:text="Gradiant Item Views" />

<Button

android:id="@+id/button8"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/button_bg"

android:text="Sample Button 1" />

<Button

android:id="@+id/button9"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/button_bg_a"

android:text="Sample Button 2" />

</LinearLayout>

Color.XML

<?xml version="1.0" encoding="utf-8"?>

<color name="greyLgt">#ECECEC</color>

</resources>

styles.xml

<item name="android:layout_width">fill_parent</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:textColor">#ffffff</item>

<item name="android:gravity">center</item>

</style>

AND HERE IS ALL GRADIENT BACKGROUNDS

Sorry for name :p it just put for test , now idont have time to change it

backaground_d.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:startColor="#FFFFFF"

android:endColor="#00000000"

android:angle="45"/>

</shape>

background_a.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<stroke

android:width="1dp"

android:color="#0B6138" />

<gradient

android:angle="0"

android:centerColor="#FFFFFFFF"

android:endColor="#0080FF"

android:startColor="#81DAF5" />

<padding

android:bottom="1dp"

android:left="1dp"

android:right="1dp"

android:top="1dp" />

</shape>

background_b.xml

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:startColor="#7faacaFF"

android:endColor="#cfe1edFF"

android:gradientRadius="326"

android:type="radial"/>

</shape>

background_c.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:angle="45"

android:endColor="#00000000"

android:startColor="#3B5998" />

</shape>

background_d.xml

<?xml version="1.0" encoding="UTF-8"?>

<gradient

android:startColor="#e5eb43"

android:endColor="#214209"

android:type="radial"

android:gradientRadius="326"

</shape>

background_f.xml

<?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:centerColor="#FFFFFFFF"

android:endColor="#00000000"

android:startColor="#00000000" />

</shape>

background.xml

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:angle="-90"

android:endColor="#44FF0000"

android:startColor="#CCFF0000" />

<padding

android:bottom="10dip"

android:left="10dip"

android:right="10dip"

android:top="10dip" />

<stroke

android:width="1dip"

android:color="#000000" >

</stroke>

</shape>

black_btn.xml

<?xml version="1.0" encoding="utf-8"?>

</shape></item>

</shape></item>

</selector>

blue_btn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape>

<solid

android:color="#449def" />

<stroke

android:width="1dp"

android:color="#2f6699" />

<corners

android:radius="3dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

<item>

<shape>

<gradient

android:startColor="#449def"

android:endColor="#2f6699"

android:angle="270" />

<stroke

android:width="1dp"

android:color="#2f6699" />

<corners

android:radius="4dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

</selector>

button_bg_a.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:angle="90"

android:endColor="#65df35"

android:startColor="#0d4e01" />

</shape>

button_bg_b.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:angle="270"

android:centerColor="#e7e7e8"

android:endColor="#cfcfcf"

android:startColor="#f1f1f2" />

</shape>

button_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<item

android:state_selected="false"

android:state_pressed="false"

android:drawable="@drawable/gradient_bg" />

<item android:state_pressed="true"

android:drawable="@drawable/gradient_bg_hover" />

<item android:state_selected="true"

android:state_pressed="false"

android:drawable="@drawable/gradient_bg_hover" />

</selector>

gradient_bg_hover.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:startColor="#78DDFF"

android:centerColor="#16cedb"

android:endColor="#09adb9"

android:angle="270" />

</shape>

gradient_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:startColor="#D5DDE0"

android:centerColor="#e7e7e8"

android:endColor="#CFCFCF"

android:angle="270" />

</shape>

green_btn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape>

<solid

android:color="#70c656" />

<stroke

android:width="1dp"

android:color="#53933f" />

<corners

android:radius="3dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

<item>

<shape>

<gradient

android:startColor="#70c656"

android:endColor="#53933f"

android:angle="270" />

<stroke

android:width="1dp"

android:color="#53933f" />

<corners

android:radius="4dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

</selector>

list_item_gradiant_3.xml

<gradient

android:startColor="@color/greyMed"

android:endColor="@color/greyLgt"

android:angle="135">

</gradient>

</shape>

list_item_gradient1.xml

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:angle="90"

android:endColor="#fff"

android:startColor="#999"

android:type="linear" />

</shape>

list_item_plane.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:angle="90"

android:endColor="@color/greyLgt"

android:startColor="@color/greyMed" >

</gradient>

</shape>

listitem_gradiant_2.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:angle="90"

android:centerColor="@color/greyLgt"

android:endColor="@color/greyMed"

android:startColor="@color/greyMed" >

</gradient>

</shape>

<!--

“linear”. This is the default value. A linear gradient as the previous examples.

“radial”. It requires to specify the attribute gradientRadius which is a float value.

“sweep”. A sweeping line gradient.

-->

purple_btn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape>

<solid

android:color="#a276eb" />

<stroke

android:width="1dp"

android:color="#6a3ab2" />

<corners

android:radius="3dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

<item>

<shape>

<gradient

android:startColor="#a276eb"

android:endColor="#6a3ab2"

android:angle="270" />

<stroke

android:width="1dp"

android:color="#6a3ab2" />

<corners

android:radius="4dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

</selector>

red_btn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape>

<solid

android:color="#ef4444" />

<stroke

android:width="1dp"

android:color="#992f2f" />

<corners

android:radius="3dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

<item>

<shape>

<gradient

android:startColor="#ef4444"

android:endColor="#992f2f"

android:angle="270" />

<stroke

android:width="1dp"

android:color="#992f2f" />

<corners

android:radius="3dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

</selector>

topbar.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<stroke

android:width="2dp"

android:color="#FFFFFFFF" />

<gradient

android:angle="225"

android:endColor="#DD2ECCFA"

android:startColor="#DD000000" />

<corners

android:bottomLeftRadius="7dp"

android:bottomRightRadius="7dp"

android:topLeftRadius="7dp"

android:topRightRadius="7dp" />

</shape>

whitegradiant.xml

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:angle="90"

android:endColor="#fff"

android:startColor="#999"

android:type="linear" />

</shape>

yellew_btn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape>

<solid

android:color="#f3ae1b" />

<stroke

android:width="1dp"

android:color="#bb6008" />

<corners

android:radius="3dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

<item>

<shape>

<gradient

android:startColor="#f3ae1b"

android:endColor="#bb6008"

android:angle="270" />

<stroke

android:width="1dp"

android:color="#bb6008" />

<corners

android:radius="4dp" />

<padding

android:left="10dp"

android:top="10dp"

android:right="10dp"

android:bottom="10dp" />

</shape>

</item>

</selector>

You can download complete example from here

Download

Happy Coddddding :)

Android Tutorials and Tips

Tuesday, 16 July 2013

Gradient Background for buttons, list Item and Layouts Android

Gradient Background for buttons, list Item and Layouts Android

No comments:

Post a Comment

Blog Archive