Learn Python


Click to Learn Python3

Tuesday, April 5, 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 with transparent 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


TransparentPanel.java
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);
init();
}

public TransparentPanel(Context context) {
super(context);
init();
}

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

borderPaint = new Paint();
borderPaint.setARGB(255, 0, 0, 0);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
}

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

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

@Override
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);

super.dispatchDraw(canvas);
}
}


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


popup.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/white"
android:layout_width="fill_parent" android:layout_height="fill_parent">

<Button android:id="@+id/show_popup_button" android:layout_gravity="bottom"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="25px" android:text="Show Popup" />

<com.popup.design.layers.TransparentPanel
android:id="@+id/popup_window" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_gravity="bottom" android:gravity="left" android:padding="1px"
android:background="@drawable/white">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="right"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="@drawable/button_bar_gradient">

<Button android:id="@+id/hide_popup_button"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_marginTop="5px"
android:layout_marginRight="10px" android:paddingLeft="5px"
android:paddingRight="5px" style="?android:attr/buttonStyleSmall"
android:textStyle="bold" android:textColor="@drawable/white"
android:textSize="12px" android:text=" Close " android:background="@drawable/button_close"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="1px" android:layout_marginTop="5px"
android:layout_below="@+id/hide_popup_button" android:background="@drawable/white" />
</RelativeLayout>

<TextView android:id="@+id/location_name"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textSize="16px" android:textColor="@drawable/white"
android:layout_marginTop="5px" android:layout_marginLeft="5px" />

<TextView android:id="@+id/location_description"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textColor="@drawable/white" android:layout_margin="5px" />

</com.popup.design.layers.TransparentPanel>

</FrameLayout>


Customized Popup is the com.popup.design.layers.TransparentPanel, initially we will hide this layout, and on the button click will show this layout. The java code is as follows


AnimatePopup.java
package com.popup.design;

import com.popup.design.layers.TransparentPanel;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

/**
*
* @author http://www.android-codes-examples.blogspot.com/
*
*/
public class AnimatePopup extends Activity {

private Animation animShow, animHide;

@Override
public void onCreate(Bundle icicle) {

super.onCreate(icicle);

setContentView(R.layout.popup);

initPopup();
}

private void initPopup() {

final TransparentPanel popup = (TransparentPanel) findViewById(R.id.popup_window);

// Start out with the popup initially hidden.
popup.setVisibility(View.GONE);


animShow = AnimationUtils.loadAnimation( this, R.anim.popup_show);
animHide = AnimationUtils.loadAnimation( this, R.anim.popup_hide);

final Button showButton = (Button) findViewById(R.id.show_popup_button);
final Button hideButton = (Button) findViewById(R.id.hide_popup_button);
showButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
popup.setVisibility(View.VISIBLE);
popup.startAnimation( animShow );
showButton.setEnabled(false);
hideButton.setEnabled(true);
}});

hideButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
popup.startAnimation( animHide );
showButton.setEnabled(true);
hideButton.setEnabled(false);
popup.setVisibility(View.GONE);
}});


final TextView locationName = (TextView) findViewById(R.id.location_name);
final TextView locationDescription = (TextView) findViewById(R.id.location_description);

locationName.setText("Animated Popup");
locationDescription.setText("Animated popup is created by http://www.android-codes-examples.blogspot.com/"
+ " Transparent layout is used on this example, and animation xml is also used"
+ " on this example. Have a Good day guys.");
}
}


For giving gradient effect we need to use this xml file as the background for the linearlayout or button. The xml file is


button_bar_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#C0C0C0"
android:endColor="#505050"
android:angle="90"/>
<corners android:radius="2px" />
</shape>



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

You can download the full source code


Download source


Have a good day.

17 comments:

  1. For designing linear layout you can use this blog http://android-codes-examples.blogspot.com/2011/07/design-linearlayout-or-textview-and-any.html

    ReplyDelete
  2. great just what i need but how to make it slide from top to bottom (reverse it) ,,,really need this inf

    thanks

    ReplyDelete
  3. how to make animated drop pins on the map
    ???

    ReplyDelete
  4. unable to download source code please help..

    ReplyDelete
  5. unable to download source..can u send source code to my mail id pal.soman77@gmil.com

    ReplyDelete
  6. you can download it from here: http://www.mediafire.com/download/0d1ltao98fvmrpj/Popup.zip

    ReplyDelete
  7. thaaanx

    android-pop-up

    http://android-pop-up.blogspot.com/

    ReplyDelete
  8. It's interesting that many of the bloggers your tips helped to clarify a few things for me as well as giving... very specific nice content.Android Training|Android Training in chennai with placement | Android Training in velachery

    ReplyDelete
  9. Vanskeligheter( van bi ) vil passere. På samme måte som( van điện từ ) regnet utenfor( van giảm áp ) vinduet, hvor nostalgisk( van xả khí ) er det som til slutt( van cửa ) vil fjerne( van công nghiệp ) himmelen.

    ReplyDelete
  10. Vanskeligheter( van bi ) vil passere. På samme måte som( van điện từ ) regnet utenfor( van giảm áp ) vinduet, hvor nostalgisk( van xả khí ) er det som til slutt( van cửa ) vil fjerne( van công nghiệp ) himmelen.

    ReplyDelete
  11. Các dịch vụ của nội thất Đăng Khôi bao gồm: sửa đồ gỗ, làm gác xép, sửa sàn gỗ...

    ReplyDelete

  12. Thank you for sharing such important information. It will be very useful for us in future. Good keep it up and keep writing. Read more about
    Free Source Code
    Free Source code For Academic
    Academic Project Download
    Academic Project Free Download
    Freelancer In India

    ReplyDelete
  13. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
    Php projects with source code
    Online examination system in php
    Student management system in php
    Php projects for students
    Free source code for academic
    Academic projects provider in nashik
    Academic project free download

    ReplyDelete
  14. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
    Php projects with source code
    Online examination system in php
    Student management system in php
    Php projects for students
    Free source code for academic
    Academic projects provider in nashik
    Academic project free download

    ReplyDelete