Tuesday 16 July 2013

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.
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"?>
<resources>

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

</resources>
styles.xml
<style name="ButtonText">
    <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>
    <item name="android:layout_margin">3dp</item>
    <item name="android:textSize">30dp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">5</item>
    <item name="android:shadowDy">5</item>
    <item name="android:shadowRadius">2</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" >

    <solid android:color="#ffffff" />

    <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" />

    <corners android:radius="15px" />

</shape>
background_b.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#77000000" />

    <corners android:radius="10dip" />

    <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"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape>
            <solid android:color="#343434" />

            <stroke android:width="1dp" android:color="#171717" />

            <corners android:radius="3dp" />

            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape></item>
    <item><shape>
            <gradient android:angle="270" android:endColor="#171717" android:startColor="#343434" />

            <stroke android:width="1dp" android:color="#171717" />

            <corners android:radius="4dp" />

            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape></item>

</selector>
blue_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <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 Bg for listrow -->
    <gradient
        android:angle="270"
        android:centerColor="#e7e7e8"
        android:endColor="#cfcfcf"
        android:startColor="#f1f1f2" />

</shape>

button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <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"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <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
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <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"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <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"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient
        android:angle="90"
        android:endColor="#fff"
        android:startColor="#999"
        android:type="linear" />

</shape>
yellew_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <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 
Happy Coddddding :)




No comments:

Post a Comment