Skip to content

Latest commit

 

History

History
105 lines (72 loc) · 3.29 KB

README.md

File metadata and controls

105 lines (72 loc) · 3.29 KB
Raw

UberUX

Project that demonstrates the entire animation stack present in the Uber app (android)

Demo

Demo

Libraries

  1. FabProgressCircle
  2. Retrofit
  3. RxAndroid
  4. ButterKnife

Concepts

Transitions - For sharing elements between activities

void startTransition() {

       Intent intent = new Intent(LoginActivity.this, LoginWithPhone.class);

       Pair<View, String> p1 = Pair.create((View) ivBack, getString(R.string.transition_arrow));
       Pair<View, String> p2 = Pair.create((View) ivFlag, getString(R.string.transition_ivFlag));
       Pair<View, String> p3 = Pair.create((View) tvCode, getString(R.string.transition_tvCode));
       Pair<View, String> p4 = Pair.create((View) tvPhoneNo, getString(R.string.transition_tvPhoneNo));
       Pair<View, String> p5 = Pair.create((View) llphone, getString(R.string.transition_llPhone));

       ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, p1, p2, p3, p4, p5);
       startActivity(intent, options.toBundle());


   }

ViewPagerTransformer - For performing animations when ViewPager is swiped

ViewPager.PageTransformer pageTransformer = new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {


            if (position < -1) { 


            } else if (position <= 1) { 

                   // animate here
        
                }

            }
        }
    };

Overlays - For creating overlays on map

 public void addOverlay(LatLng place) {

        GroundOverlay groundOverlay = mMap.addGroundOverlay(new
                GroundOverlayOptions()
                .position(place, 100)
                .transparency(0.5f)
                .zIndex(3)
                .image(BitmapDescriptorFactory.fromBitmap(drawableToBitmap(getDrawable(R.drawable.map_overlay)))));

    }

ValueAnimator - For animating overlays and polylines

ValueAnimator tAnimator = ValueAnimator.ofFloat(0, 1);
       tAnimator.setRepeatCount(ValueAnimator.INFINITE);
       tAnimator.setRepeatMode(ValueAnimator.RESTART);
       tAnimator.setInterpolator(new LinearInterpolator());
       tAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator valueAnimator) {
              // animate here
           }
       });

PolyLines - For drawing lines on map

 PolylineOptions greyOptions = new PolylineOptions();
        greyOptions.width(10);
        greyOptions.color(Color.GRAY);
        greyOptions.startCap(new SquareCap());
        greyOptions.endCap(new SquareCap());
        greyOptions.jointType(ROUND);
        greyPolyLine = mMap.addPolyline(greyOptions);

How to use this project

Add your GoogleMaps and GooglePlaces key to google_maps_api.xml and turn on direction api from developer console -> You are good to go !