android - How to change button background with circular reveal animation? -


i have explored vectors myself, , want following example animation button: 1]

the circles , tick have slight easeinout , tick becomes little bigger before moving in final position.

i have made animation in after effects , found cool tool export right android json file: https://github.com/airbnb/lottie-android

but method use plugin in app, animation take more space vector drawable use , vector more scale-able imported animation think?

so possible such animation vector drawables? or going fine lottie plugin..?

edit

so i've come following, not satisfying solution:

youtube screen recording

i've made pngs it's adaptable vectors, it's really tinkered. code:

java:

public class testactivity extends appcompatactivity {  @override protected void oncreate(bundle savedinstancestate) {     super.oncreate(savedinstancestate);     setcontentview(r.layout.activity_test);  //the light-green transition between 2 buttons:      final button imageview = (button) findviewbyid(r.id.imageview);  //imageview won't on button in xml   //the green button tick:      final button button_ok = (button) findviewbyid(r.id.button_ok);  //the yellow button:      final button button = (button) findviewbyid(r.id.button);       button.setontouchlistener(new view.ontouchlistener() {         @override         public boolean ontouch(view view, motionevent motionevent) {              show(button_ok, imageview,button, motionevent);             return false;         }     });     button_ok.setontouchlistener(new view.ontouchlistener() {         @override         public boolean ontouch(view view, motionevent motionevent) {              show(button, null,button_ok, motionevent);             return false;         }     });   }  // reveal invisible view using effect: private void show(final view view, final view circle, final view tobegone, final motionevent me) {      final button imageview = (button) findviewbyid(r.id.imageview);      if (circle==null){           // final radius clipping circle         int finalradius = math.max(view.getwidth(), view.getheight());          // create animator view (the start radius zero)         animator anim = viewanimationutils.createcircularreveal(view, (int) me.getx(), (int) me.gety(),                 0, finalradius);         anim.setduration(100);         anim.setinterpolator(new fastoutslowininterpolator());          // make view invisible when animation done         anim.addlistener(new animatorlisteneradapter() {             @override             public void onanimationend(animator animation) {                 super.onanimationend(animation);                 imageview.setvisibility(view.invisible);                 tobegone.setvisibility(view.invisible);             }         });          // make view visible , start animation         view.setvisibility(view.visible);         anim.start();          return;     }       // final radius clipping circle     int finalradiuscircle = math.max(view.getwidth(), view.getheight());      // create animator view (the start radius zero)     animator animcircle = viewanimationutils.createcircularreveal(circle, (int) me.getx(), (int) me.gety(),             0, finalradiuscircle);     animcircle.setduration(500);     animcircle.setinterpolator(new fastoutslowininterpolator());      // make view visible , start animation     circle.setvisibility(view.visible);     animcircle.start();        // final radius clipping circle     int finalradius = math.max(view.getwidth(), view.getheight());      // create animator view (the start radius zero)     animator anim = viewanimationutils.createcircularreveal(view, (int) me.getx(), (int) me.gety(),             0, finalradius);     anim.setduration(1000);     anim.setinterpolator(new fastoutslowininterpolator());      // make view invisible when animation done     anim.addlistener(new animatorlisteneradapter() {         @override         public void onanimationend(animator animation) {             super.onanimationend(animation);             tobegone.setvisibility(view.invisible);         }     });      // make view visible , start animation     view.setvisibility(view.visible);     anim.start();        handler handler = new handler();      final runnable r = new runnable() {         public void run() {           }     };      handler.postdelayed(r, 200);  } }

xml:

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.constraintlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#39000000" tools:layout_editor_absolutey="81dp" tools:layout_editor_absolutex="0dp">  <button     android:id="@+id/button"     android:layout_width="300dp"     android:layout_height="75dp"     android:background="@mipmap/add_button_v2"     tools:layout_editor_absolutex="42dp"     tools:layout_editor_absolutey="420dp" />  <button     android:id="@+id/imageview"     android:layout_width="300dp"     android:layout_height="75dp"     android:background="@mipmap/add_button_v2"     android:backgroundtint="#974caf50"     android:backgroundtintmode="src_over"     tools:layout_editor_absolutex="42dp"     tools:layout_editor_absolutey="420dp" />  <button     android:id="@+id/button_ok"     android:layout_width="300dp"     android:layout_height="75dp"     android:background="@mipmap/ok_button"     tools:layout_editor_absolutex="42dp"     tools:layout_editor_absolutey="420dp" />

could there better solution? or can roll this?


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more