Android: Gradient Background

In this article we explain how to create different types of gradient background for Android applications.

The application is made of 5 simple activities, each one characterized by a particular background.

To be not redundant, we show just one of the xml files related to the layouts of the activities, for example the one of activity #2, SecondActivity.java:

public class SecondActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) { 
    // TODO Auto-generated method stub 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.second);

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

    button1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        Intent intent = new Intent(SecondActivity.this,MainActivity.class); 
        startActivity(intent);
      }
    });

    button2.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        Intent intent = new Intent(SecondActivity.this,ThirdActivity.class); 
        startActivity(intent);
      }
    });

  }

} 

The layout is defined in second.xml:

<RelativeLayout 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:background="@drawable/gradient_2"                 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="com.example.gradientbackground.MainActivity" >

   <TextView
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true" 
     android:layout_marginTop="164dp" 
     android:textAppearance="?android:attr/textAppearanceMedium" 
     android:text="@string/linear" />

   <Button
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_marginBottom="38dp" 
     android:layout_marginRight="64dp" 
     android:text="@string/next" />

   <Button
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignBaseline="@+id/button2" 
     android:layout_alignBottom="@+id/button2" 
     android:layout_toLeftOf="@+id/button2" 
     android:text="@string/prev" />
</RelativeLayout> 

The typologies of gradient background are defined in drawable folder, and are the following ones:

Radial, in gradient_1.xml:

<gradient 
   android:startColor="#87cefa" 
   android:endColor="#edeff6" 
   android:gradientRadius="300" 
   android:type="radial"/> 

Linear, in gradient_2.xml:

<gradient 
   android:startColor="#87cefa" 
   android:endColor="#edeff6" 
   android:type="linear"/> 

Lineare with angle, in gradient_3.xml:

<gradient 
   android:startColor="#1e90ff" 
   android:centerColor="#00bfff" 
   android:endColor="#edeff6" 
   android:angle="90" 
   android:type="linear"/> 

Sweep, in gradient_4.xml:

<gradient 
   android:startColor="#f0f8ff" 
   android:centerColor="#00bfff" 
   android:endColor="#edeff6" 
   android:type="sweep"/> 

Reflected, in gradient_5.xml:

<gradient 
   android:startColor="#f0f8ff" 
   android:centerColor="#00bfff" 
   android:endColor="#edeff6"/> 

You can download the complete example from our repository: Download GradientBackground.zip


The final result is the following: