Friday 26 September 2014

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:









    No comments:

    Post a Comment