Android property animation to achieve cool login interface _android

We talk about our often written login interface, this interface I believe that a lot of people have written, and there is no difficulty, but if you want to achieve a more unusual effect, it will take a little thought, first look at the effect of the project bar:

I have never known how to set the picture size in the edit box, so this picture is not how to fit the edit box, we have to do to see.

I first talk about thinking, when we enter the account and password, click Login, the input box will slowly disappear, after the disappearance, followed by the progress of the interface.

With the idea, we'll start coding:
Create a new project, and then the system generates a Mainactivity.java file and a activity_main.xml file. First in the Activity_main inside operation:
The code is as follows:

<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= "#7adfb8" tools:context= ". Mainactivity "> <include android:id=" @+id/main_title "layout=" @layout/title_layout "/> <linearla Yout android:layout_width= "match_parent" android:layout_height= wrap_content "android:layout_below=" @+id/main_ Title "android:orientation=" Vertical "> <imageview android:layout_width=" 55dip "Android:layout_

    height= "55dip" android:layout_gravity= "Center_horizontal" android:src= "@drawable/project_detail_cir"/> <textview android:layout_width= "fill_parent" android:layout_height= "Wrap_content" Android:layout_ma
      rgintop= "5dip" android:gravity= "center" android:text= "Firefly FOREST" android:textcolor= "#ffffff" Android:textsiZe= "24sp"/> <textview android:layout_width= "fill_parent" android:layout_height= "Wrap_content" android:gravity= "center" android:text= "show YOUR IDEAS" android:textcolor= "#ffffff" android:textsize= " 16sp "/> </LinearLayout> <relativelayout android:layout_width=" Match_parent "Android:layout_heigh
      t= "Wrap_content" android:layout_centerinparent= "true" > <include android:id= "@+id/input_layout" Android:layout_width= "Match_parent" android:layout_height= "130dip" layout= "@layout/input_layout"/> & Lt;include android:id= "@+id/layout_progress" android:layout_width= "Match_parent" 130dip "layout=" @layout/layout_progress "android:visibility=" Gone "/> <textview android:id=" @ +id/main_btn_login "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:lay" Out_below= "@+id/input_laYout "android:layout_centerinparent=" true "android:layout_margintop=" 15dip "android:background=" @drawabl E/TEXT_BG "android:gravity=" center "android:paddingbottom=" 2dip "android:paddingleft=" 15dip "Andro
      id:paddingright= "15dip" android:paddingtop= "2dip" android:text= "Login" android:textcolor= "#ffffff"

 Android:textsize= "20sp"/> </RelativeLayout> </RelativeLayout>

Here I refer to the outside of the three layout, plus a TextView write button, the title refers to the file:
Title_layout.xml

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android=
"http://schemas.android.com/apk" /res/android "
  android:layout_width=" match_parent "
  android:layout_height=" 50dip "
  android:gravity=" Center_vertical "
  android:padding=" 10dip ">

  <imageview
    android:layout_width=" Wrap_content "
    android:layout_height= "wrap_content"
    android:src= "@drawable/back"/>

  <textview 
    android : layout_width= "wrap_content"
    android:layout_height= "wrap_content"
    android:textcolor= "#ffffff"
    Android:layout_alignparentright= "true"
    android:layout_centervertical= "true"
    android:textsize= "20SP"
    android:text= "Sign up"
    />
</RelativeLayout>

The file that the input box refers to: Input_layout.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" wrap_content "android:orientation=" "Vertical" &

  Gt <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:layout_margi N= "20dip" android:background= "@drawable/radius_drawable_bg" android:orientation= "vertical" android:padding= "10
      Dip "> <linearlayout android:id=" @+id/input_layout_name "android:layout_width=" Match_parent "

      android:layout_height= "Wrap_content" android:gravity= "center_vertical" android:orientation= "Horizontal" > <imageview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Andro id:src= "@drawable/paw_code"/> <edittext android:layout_width= "Match_parent" Android:layout_h
       eight= "Wrap_content" android:layout_marginleft= "10dip" android:background= "#00000000" android:hint= "account/username/mailbox" Android :p adding= "5dip" android:textsize= "16sp"/> </LinearLayout> <view android:layout_width= " Match_parent "android:layout_height=" 1px "android:layout_marginbottom=" 5dip "android:layout_margintop=" 5 Dip "android:background=" #eeeeee "/> <linearlayout android:id=" @+id/input_layout_psw "Android : layout_width= "match_parent" android:layout_height= "wrap_content" android:gravity= "center_vertical" Andr oid:orientation= "Horizontal" > <imageview android:layout_width= "wrap_content" Android:layout_ height= "Wrap_content" android:src= "@drawable/paw_left"/> <edittext android:layout_width= "mat Ch_parent "android:layout_height=" wrap_content "android:layout_marginleft=" 10dip "Android:backgrou Nd= "#00000000" android:hint= "Password" android:inputtype= "Textpassword" android:padding= "5dip" android:textsize= "16SP"/

 > </LinearLayout> </LinearLayout> </LinearLayout>

There is also an interface for loading progress: layout_progress.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
  android:layout_width=" match_parent "
  android:layout_height=" wrap_content "
  android:o" rientation= "vertical" >

  <linearlayout
    android:layout_width= "wrap_content"
    android:layout_ height= "Wrap_content"
    android:layout_gravity= "center"
    android:layout_margin= "20dip"
    android: background= "@drawable/rotate_layout_bg"
    android:orientation= "vertical"
    android:padding= "10dip" >

    <progressbar
      android:id= "@+id/progressbar2"
      android:layout_width= "Wrap_content"
       Android:layout_margin= "10dip"
      android:layout_height= "wrap_content"/>
  </LinearLayout>

</LinearLayout>

Of course, I also use the drawable file: radius_drawable_bg.xml, this file is the rounded rectangle background of the input box:

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <corners android:radius=" 5dip "/>
  <solid android:color=" #ffffff "/>

</ Shape>

And the progress of the white round background: rotate_layout_bg.xml

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:shape=" Oval ">

  <corners android:radius=" 60dip "/> <solid android:color=

  " #ffffff "/>

</shape>

In addition, there is a button's stroke background text_bg.xml

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  >

  <corners android:radius=" 50dip "/>

  <stroke
    android:width=" 1dip "
    Android:color= "#ffffff"/>

</shape>

At this point, our early stage of the preparation of the interface has been completed, not difficult, it is easy to understand, the following start processing Mainactivity.java files, first look at the initialization of the operation here;

  Private TextView Mbtnlogin;

  Private View progress;

  Private View minputlayout;

  Private float mwidth, mheight;

  Private LinearLayout mname, MPSW;

  private void Initview () {
    mbtnlogin = (TextView) Findviewbyid (r.id.main_btn_login);
    progress = Findviewbyid (r.id.layout_progress);
    Minputlayout = Findviewbyid (r.id.input_layout);
    Mname = (linearlayout) Findviewbyid (r.id.input_layout_name);
    MPSW = (linearlayout) Findviewbyid (R.ID.INPUT_LAYOUT_PSW);

    Mbtnlogin.setonclicklistener (this);
  }

Here is the main load control, do not need to explain more, focus on the animation processing:

/** * Animation effect of input box * @param view * control * @param w * * @param h * High/private

    void Inputanimator (Final view view, float W, float h) {Animatorset set = new Animatorset ();
    Valueanimator animator = valueanimator.offloat (0, W); Animator.addupdatelistener (New Animatorupdatelistener () {@Override public void onanimationupdate (Valueanimat
        or animation) {Float value = (float) animation.getanimatedvalue ();
        Viewgroup.marginlayoutparams params = (marginlayoutparams) view. Getlayoutparams ();
        Params.leftmargin = (int) value;
        Params.rightmargin = (int) value;
      View.setlayoutparams (params);

    }
    });
    Objectanimator Animator2 = objectanimator.offloat (minputlayout, "ScaleX", 1f, 0.5f);
    Set.setduration (1000);
    Set.setinterpolator (New Acceleratedecelerateinterpolator ());
    Set.playtogether (animator, Animator2);
    Set.start (); Set.addlistener (New AniMatorlistener () {@Override public void Onanimationstart (animator animation) {} @Override public void Onanimationrepeat (animator animation) {} @Override public void Onanimationend (animator
        Animation) {/** * After the animation, first show the loaded animation, and then hide the input box * * * progress.setvisibility (view.visible);
        Progressanimator (progress);

      Minputlayout.setvisibility (view.invisible);

  @Override public void Onanimationcancel (animator animation) {}});

 }

There are many points of knowledge used here, such as: Property animation container, interpolation, property animation monitoring, dynamic settings control relative position; it may not be easy to understand at first, it doesn't matter, I'll talk about it in my blog later. I will say the idea here;
When we start this animation, we set the relative position, we handle the scaling in the x-axis, then we monitor the lifecycle, and at the end of the animation, hide the current layout, turn on another layout display animation, and see another animation:

/**
   * Show Progress Animation
   * 
   * @param view
  /private void Progressanimator (final view view) {
    Propertyvaluesholder animator = propertyvaluesholder.offloat ("ScaleX",
        0.5f, 1f);
    Propertyvaluesholder Animator2 = propertyvaluesholder.offloat ("ScaleY",
        0.5f, 1f);
    Objectanimator Animator3 = Objectanimator.ofpropertyvaluesholder (view,
        animator, Animator2);
    Animator3.setduration (1000);
    Animator3.setinterpolator (New Jellyinterpolator ());
    Animator3.start ();

  }

In fact, the routines here are the same, but the difference is, here I use my own interpolation device;
Jellyinterpolator.java:

public class Jellyinterpolator extends Linearinterpolator {
  private float factor;

  Public Jellyinterpolator () {
    this.factor = 0.15f;
  }

  @Override Public
  float getinterpolation (float input) {return
    (float) (Math.pow (2, -10 * input)
        * Math.sin ( INPUT-FACTOR/4) * (2 * Math.PI)/factor) + 1);
  }

Make the animation more dynamic. Below I paste all the mainactivity code;

public class Mainactivity extends activity implements Onclicklistener {private TextView mbtnlogin;

  Private View progress;

  Private View minputlayout;

  Private float mwidth, mheight;

  Private LinearLayout mname, MPSW;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Requestwindowfeature (Window.feature_no_title);

    Setcontentview (R.layout.activity_main);
  Initview ();
    private void Initview () {mbtnlogin = (TextView) Findviewbyid (R.id.main_btn_login);
    progress = Findviewbyid (r.id.layout_progress);
    Minputlayout = Findviewbyid (r.id.input_layout);
    Mname = (linearlayout) Findviewbyid (r.id.input_layout_name);

    MPSW = (linearlayout) Findviewbyid (R.ID.INPUT_LAYOUT_PSW);
  Mbtnlogin.setonclicklistener (this);
    @Override public void OnClick (View v) {///compute the height and width of the control Mwidth = Mbtnlogin.getmeasuredwidth ();
    Mheight = Mbtnlogin.getmeasuredheight (); Hide Input Box Mname.setvIsibility (view.invisible);

    Mpsw.setvisibility (view.invisible);

  Inputanimator (Minputlayout, Mwidth, mheight); /** * Animation effect of input box * @param view * control * @param w * * @param h * High/PRI

    vate void Inputanimator (final view view, float W, float h) {Animatorset set = new Animatorset ();
    Valueanimator animator = valueanimator.offloat (0, W); Animator.addupdatelistener (New Animatorupdatelistener () {@Override public void onanimationupdate (Valueanimat
        or animation) {Float value = (float) animation.getanimatedvalue ();
        Viewgroup.marginlayoutparams params = (marginlayoutparams) view. Getlayoutparams ();
        Params.leftmargin = (int) value;
        Params.rightmargin = (int) value;
      View.setlayoutparams (params);

    }
    });
    Objectanimator Animator2 = objectanimator.offloat (minputlayout, "ScaleX", 1f, 0.5f);
    Set.setduration (1000); Set.setinterpolator (New Acceleratedecelerateinterpolator ());
    Set.playtogether (animator, Animator2);
    Set.start ();

      Set.addlistener (New Animatorlistener () {@Override public void Onanimationstart (animator animation) { @Override public void Onanimationrepeat (animator animation) {} @Override public void O Nanimationend (animator animation) {/** * After the animation, first show the loaded animation, and then hide the input box * * Progress.setvisibil
        ity (view.visible);
        Progressanimator (progress);

      Minputlayout.setvisibility (view.invisible);

  @Override public void Onanimationcancel (animator animation) {}}); /** * Show Progress Animation * * @param view/private void Progressanimator (final view view) {Propertyvalueshol
    Der Animator = Propertyvaluesholder.offloat ("ScaleX", 0.5f, 1f);
    Propertyvaluesholder Animator2 = propertyvaluesholder.offloat ("ScaleY", 0.5f, 1f); Objectanimator Animator3 =Objectanimator.ofpropertyvaluesholder (view, animator, Animator2);
    Animator3.setduration (1000);
    Animator3.setinterpolator (New Jellyinterpolator ());

  Animator3.start ();

 }
}

At this point, all the operations have been completed, run the project and click the Login button, you can see the effect.

SOURCE Download: Http://xiazai.jb51.net/201607/yuanma/LoginProject (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.