How to create gradient background color with border in android layout

LinearLayout with gradient background and border

Getting boring in android layout with plain background?

Some users want application with nice looking interface.

So, to do this developers should put some decoration in layout like putting some background image, some color combination, borders and etc.

Do I say background image? Hahaha!!!

Yes, I mention that.

Actually image consume more memory and it may effect the performance of our application.

But if you want to use image it's up to you.

This time I going to show a simple code snippet to create gradient background with border in android layout without using image. In this sample I just used a LinearLayout but you can apply and other views like TextView, RelativeLayout, Button and other.  

LinearLayout with gradient background

 LinearLayout firstLayout(){
     LinearLayout firstLayout = new LinearLayout(this);
     
     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     firstLayout.setBackgroundDrawable(gd);
     
     // APPLY THE SIZE AND MARGIN
     firstLayout.setLayoutParams(params);
     return firstLayout;
    }

LinearLayout with gradient background and rounded corner with same radius

 LinearLayout secondLayout(){
  LinearLayout secondLayout = new LinearLayout(this);
  
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     
     // SET RADIUS FOR THE CORNER
     gd.setCornerRadius(20f);
     
     secondLayout.setBackgroundDrawable(gd);
     
     
     // APPLY THE SIZE AND MARGIN
     secondLayout.setLayoutParams(params);
     return secondLayout;
 }

LinearLayout with gradient background and top left and bottom right corner with larger radius

LinearLayout thirdLayout(){
  LinearLayout thirdLayout = new LinearLayout(this);

  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     
     // SET RADIUS OF EACH CORNER
     gd.setCornerRadii(new float[]{100,100,20,20,100,100,20,20});
     
     thirdLayout.setBackgroundDrawable(gd);
     
     // APPLY THE SIZE AND MARGIN
     thirdLayout.setLayoutParams(params);
     
     return thirdLayout;
 }

LinearLayout with gradient background and bottom left and top right corner with larger radius

LinearLayout forthLayout(){
  LinearLayout forthLayout = new LinearLayout(this);

  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     
     // SET RADIUS OF EACH CORNER
     gd.setCornerRadii(new float[]{20,20,100,100,20,20,100,100});
     
     forthLayout.setBackgroundDrawable(gd);
     
     // APPLY THE SIZE AND MARGIN
     forthLayout.setLayoutParams(params);
     return forthLayout;
 }

LinearLayout with border and bottom left and top right corner with larger radius

 LinearLayout fifthLayout(){
  LinearLayout fifthLayout = new LinearLayout(this);
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable();
     
     // SET RADIUS OF EACH CORNER
     gd.setCornerRadii(new float[]{20,20,100,100,20,20,100,100});
     
     // SET INSIDE COLOR
     gd.setColor(Color.GREEN);
     
     // SET STROKE COLOR. THIS IS THE BORDER
     gd.setStroke(5, Color.RED);
     
     fifthLayout.setBackgroundDrawable(gd);
     
     // APPLY THE SIZE AND MARGIN
     fifthLayout.setLayoutParams(params);
     return fifthLayout;
 }

Here is the complete code

package com.example.gradientlayoutwithborder;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

 LinearLayout contentView;
 LinearLayout firstLayout;
 LinearLayout secondLayout;
 LinearLayout thirdLayout;
 LinearLayout forthLayout;
 LinearLayout fifthLayout;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        contentView = new LinearLayout(this);
        contentView.setOrientation(LinearLayout.VERTICAL);
        
        // SET CONTENT VIEW
        setContentView(contentView);
        
        // INITIALIZE THE VIEW'S
        
        firstLayout = this.firstLayout();
        secondLayout = this.secondLayout();
        thirdLayout = this.thirdLayout();
        forthLayout = this.forthLayout();
        fifthLayout = this.fifthLayout();
        
        // ADD THE VIEW'S IN CONTENT VIEW
        
        contentView.addView(firstLayout);
        contentView.addView(secondLayout);
        contentView.addView(thirdLayout);
        contentView.addView(forthLayout);
        contentView.addView(fifthLayout);
    }
    
    /**
     * LinearLayout with Gradient Background
     * @return
     */
    LinearLayout firstLayout(){
     LinearLayout firstLayout = new LinearLayout(this);
     
     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     firstLayout.setBackgroundDrawable(gd);
     
     // SET THE SIZE AND MARGIN
     firstLayout.setLayoutParams(params);
     return firstLayout;
    }
    
    /**
     * LinearLayout With Gradient Background And Rounded Corner With Same Radius
     * @return
     */
 LinearLayout secondLayout(){
  LinearLayout secondLayout = new LinearLayout(this);
  
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     
     // SET RADIUS FOR THE CORNER
     gd.setCornerRadius(20f);
     
     secondLayout.setBackgroundDrawable(gd);
     
     
     // SET THE SIZE AND MARGIN
     secondLayout.setLayoutParams(params);
     return secondLayout;
 }
 
 /**
  * LinearLayout With Gradient Background And Top Left And Bottom Right Corner With Larger Radius
  * @return
  */
 LinearLayout thirdLayout(){
  LinearLayout thirdLayout = new LinearLayout(this);
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     
     // SET RADIUS OF EACH CORNER
     gd.setCornerRadii(new float[]{100,100,20,20,100,100,20,20});
     
     thirdLayout.setBackgroundDrawable(gd);
     
     // SET THE SIZE AND MARGIN
     thirdLayout.setLayoutParams(params);
     
     return thirdLayout;
 }
 
 /**
  * LinearLayout With Gradient Background And Bottom Left And Top Right Corner With Larger Radius
  * @return
  */
 LinearLayout forthLayout(){
  LinearLayout forthLayout = new LinearLayout(this);
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable(
     GradientDrawable.Orientation.TOP_BOTTOM,new int[] {Color.BLACK,Color.WHITE,Color.BLACK});
     
     // SET RADIUS OF EACH CORNER
     gd.setCornerRadii(new float[]{20,20,100,100,20,20,100,100});
     
     forthLayout.setBackgroundDrawable(gd);
     
     // SET THE SIZE AND MARGIN
     forthLayout.setLayoutParams(params);
     return forthLayout;
 }
 
 /**
  * LinearLayout With Border And Bottom Left And Top Right Corner With Larger Radius
  * @return
  */
 LinearLayout fifthLayout(){
  LinearLayout fifthLayout = new LinearLayout(this);
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,100);
     params.setMargins(2, 2, 2, 2);
     
     // GRADIENT DRAWABLE
     GradientDrawable gd = new GradientDrawable();
     
     // SET RADIUS OF EACH CORNER
     gd.setCornerRadii(new float[]{20,20,100,100,20,20,100,100});
     
     // SET INSIDE COLOR
     gd.setColor(Color.GREEN);
     
     // SET STROKE COLOR. THIS IS THE BORDER
     gd.setStroke(5, Color.RED);
     
     fifthLayout.setBackgroundDrawable(gd);
     
     // SET THE SIZE AND MARGIN
     fifthLayout.setLayoutParams(params);
     return fifthLayout;
 }
}

Download Source Code
Happy coding!!!