UberUX

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

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 !