Jul 22, 2011

Animated customized dialog or popup transparent layout with Button and Linear layout gradient effect in android

The image shown below is an example of animated customized popup withtransparent layout for button and linearlayout, and the linearlayout and button is given gradient effect

How to get a transparent layout? For that we need to use a transparent class

package com.popup.design.layers;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class TransparentPanel extends LinearLayout
private Paint innerPaint, borderPaint ;

public TransparentPanel(Context context, AttributeSet attrs) {
super(context, attrs);

public TransparentPanel(Context context) {

private void init() {
innerPaint = new Paint();
innerPaint.setARGB(225, 0, 0, 0);

borderPaint = new Paint();
borderPaint.setARGB(255, 0, 0, 0);

public void setInnerPaint(Paint innerPaint) {
this.innerPaint = innerPaint;

public void setBorderPaint(Paint borderPaint) {
this.borderPaint = borderPaint;

protected void dispatchDraw(Canvas canvas) {

RectF drawRect = new RectF();
drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());

canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
canvas.drawRoundRect(drawRect, 5, 5, borderPaint);


We need to use this transparentPanel class in the xml file, where we need thetransparent layout, in the popup.xml we are using the com.popup.design.layers.TransparentPanel instead of LinearLayout, see in the code


In the popup.xml we had used the button_bar_gradient as a background. This button_bar_gradient.xml will be in drawable folder.

No comments:

Post a Comment