Android animation The bottom of the screen pop-up popupwindow_android

Source: Internet
Author: User

An Android animation of the actual content, from the bottom of the screen slide pop-up Popupwindow. Believe that this effect you have encountered in many apps, such as the need to take photos or from the SD card to choose pictures, such as the need to share something, most will adopt such an effect:

How can this effect be achieved?
Let's write an example of this effect:

1 We first define the page layout component of the pop-up window: Take_photo_pop.xml

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Fill_parent "android:layout_height=" wrap_content "android:gravity=" Center_horizont Al "android:orientation=" vertical "> <linearlayout android:id=" @+id/pop_layout "Android:layout_widt H= "Fill_parent" android:layout_height= "wrap_content" android:background= "#ffffff" Android:layout_alignparen 
      Tbottom= "true" android:gravity= "Center_horizontal" android:orientation= "vertical" > <textview Android:layout_width= "Fill_parent" android:layout_height= "Wrap_content" android:clickable= "false" an 
 
    droid:gravity= "Center" android:text= "Change Avatar" android:textcolor= "#8a8a8a" android:textsize= "15sp"/> <view android:layout_width= "fill_parent" android:layout_height= "0.1DP" Android:layout_margi nleft= "10DP" Android:layout_marginright= "10DP" android:background= "#00c7c0"/> <button android:id= "@+id/btn_take_photo "Android:layout_width=" fill_parent "android:layout_height=" wrap_content "android:text=" Photo "an 
      Droid:textcolor= "#0e61aa" android:textsize= "18sp"/> <button android:id= "@+id/btn_pick_photo" Android:layout_width= "Fill_parent" android:layout_height= "wrap_content" android:text= "Select from album" An 
      Droid:textcolor= "#0e61aa" android:textsize= "18sp"/> <button android:id= "@+id/btn_cancel" Android:layout_width= "Fill_parent" android:layout_height= "wrap_content" android:layout_marginbottom= "15dip "Android:layout_margintop=" 15dip "android:text=" Cancel "android:textcolor=" #0e61aa "android:texts 
 Ize= "18SP" android:textstyle= "bold"/> </LinearLayout> </RelativeLayout>

2 now define the animation, you know that when the Popupwindow appears from the bottom of the page to slide up, disappear from the top slide disappear, so we need to define two animation files:
Exit Animation Pop_exit_anim.xml

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android= 
"http://schemas.android.com/apk/res/" Android "> 
  <translate 
    android:duration=" 
    android:fromydelta= "0" 
    android:toydelta= "50% P "/> 
  <alpha 
    android:duration=" 
    android:fromalpha= "1.0" android:toalpha= "0.0 
    "/> 
</set> 
Display animation pop_enter_anim.xml
<?xml version= "1.0" encoding= "Utf-8"?> 
<set Xmlns:android= "Http://schemas.android.com/apk/res/android" > 
 
  <translate 
    android:duration= "200" 
    android:fromydelta= "100%p" 
    android:toydelta= "0"/> 
  <alpha android:duration= 
    "200" 
    android:fromalpha= "0.0" 
    android:toalpha= "1.0"/> 
</set> 

About these two animations, no more parsing here, read my blog before I should know, very simple, if you can not understand? Please click on the link above this article to learn.
3 Custom Pop-up box Popupwindow:

Import Android.content.Context; 
Import android.graphics.drawable.ColorDrawable; 
Import Android.view.LayoutInflater; 
Import android.view.MotionEvent; 
Import Android.view.View; 
Import Android.widget.Button; 
Import Android.widget.PopupWindow; 
 
Import Android.widget.RelativeLayout; 
 
  public class Takephotopopwin extends Popupwindow {private context mcontext; 
 
  Private view view; 
 
 
  Private Button Btn_take_photo, Btn_pick_photo, Btn_cancel; Public Takephotopopwin (Context Mcontext, View.onclicklistener itemsonclick) {This.view = Layoutinflater.from (mCont 
 
    EXT). Inflate (R.layout.take_photo_pop, NULL); 
    Btn_take_photo = (Button) View.findviewbyid (R.id.btn_take_photo); 
    Btn_pick_photo = (Button) View.findviewbyid (R.id.btn_pick_photo); 
    Btn_cancel = (Button) View.findviewbyid (r.id.btn_cancel);  Cancel button Btn_cancel.setonclicklistener (new View.onclicklistener () {public void OnClick (View v) {// 
     Destroy pop-up box dismiss (); } 
    }); 
    Set button to monitor Btn_pick_photo.setonclicklistener (Itemsonclick); 
 
    Btn_take_photo.setonclicklistener (Itemsonclick); 
    Set external clickable this.setoutsidetouchable (true); 
 
      Mmenuview Add Ontouchlistener Monitor to get touch position if you are outside the selection box, destroy the pop-up This.view.setOnTouchListener (new View.ontouchlistener () { public boolean Ontouch (View V, motionevent event) {int height = View.findviewbyid (r.id.pop_layout). GetTop ( 
 
        ); 
        int y = (int) event.gety (); 
          if (event.getaction () = = motionevent.action_up) {if (Y < height) {dismiss (); 
      } return true; 
 
 
    } 
    }); 
    /* Set pop-up window features//Set view This.setcontentview (This.view); 
    Sets the width and height this.setheight (RelativeLayout.LayoutParams.MATCH_PARENT) of the pop-up form; 
 
    This.setwidth (RelativeLayout.LayoutParams.MATCH_PARENT); 
 
    Set pop-up form to click This.setfocusable (TRUE); Instantiate a colordrawable color for semitransparent colordrawable DW = new ColordrawAble (0xb0000000); 
 
    Set the background this.setbackgrounddrawable (DW) of the pop-up form; 
 
  Set pop-up form display animation, pop-up This.setanimationstyle (R.style.take_photo_anim) from the bottom up; 
 } 
}

Define the component to be ejected Takephotopopwin, it inherits from Popupwindow, how concretely realizes, I note the information is very detailed. One place to remind is that the last to set the pop-up form of the display animation, This.setanimationstyle (R.style.take_photo_anim); This is essential, only add it, in order to apply the animation effect!
Look at the definition of Take_photo_anim style:

<style name= "Take_photo_anim" parent= "android:animation" > 
    <item name= "Android:windowenteranimation" > @anim/pop_enter_anim</item> 
    <item name= "android:windowexitanimation" > @anim/pop_exit_anim </item> 
</style> 

Just a few steps, a component that slides from the bottom of the screen

public void Showpopformbottom (view view) { 
  Takephotopopwin Takephotopopwin = new Takephotopopwin (This, Onclicklistener); 
  Showatlocation (View parent, int gravity, int x, int y) 
  takephotopopwin.showatlocation (Findviewbyid (r.id.main_ View), Gravity.center, 0, 0); 
 
Private View.onclicklistener Onclicklistener = new View.onclicklistener () { 
  @Override public 
  void OnClick (View V) { 
 
    switch (V.getid ()) {case 
      R.id.btn_take_photo: 
        System.out.println ("Btn_take_photo"); 
        break; 
      Case R.id.btn_pick_photo: 
        System.out.println ("Btn_pick_photo"); 
        break; 
    } 
  } 
; 

This, the effect and I began to pass the picture Consistent! There are wood have learned it!?

Expand:
People who have played apps know that when you go into a new page or sign up for something, a waiting box pops up, indicating that you need to be patient in a network request, such as a micro-letter waiting for a request frame effect as follows:

    There is also a place to use the animation, that is the rotation of the small icon, its practical is to rotate the animation!
    about how to implement such a rotating wait box, I have written an article before, can see: Android Custom ProgressDialog progress waiting box

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.