Lollipop introduced material design principles to Android, including interactive UI elements like ripple feedback and floating action buttons (FAB). RecyclerView improved on ListView with more flexibility. Activity and fragment transitions allow shared element animations when switching between screens using a common transition name.

1. Embracing the Lollipop
Sonja Kesic - PSTech

2. • PSTech
• We develop core apps on top of Vanilla
implementation
• Lollipop - the greatest update of them all
Why am I here?

4. • Define custom colors using theme
attributes to brand the application:
colorPrimary,
colorPrimaryDark,
colorAccent
• Reduced color palette comprised
of bold vibrant colors
• Use opacity for text, icons and
dividers
@android:style/Theme.Material

5. http://www.materialpalette.com/

6. @android:style/Theme.Material
• Ripple effect as default touch feedback for buttons
• To apply ripple feedback for other views set view
background to
?android:attr/selectableItemBackground
• Using RippleDrawable from XML:
<ripple android:color=“@color/ripple_dark" >
<item android:drawable=“@drawable/my_drawable”
</ripple>

7. @android:style/Theme.Material

8. FAB

9. <FrameLayout
android:id="@+id/dialpad_floating_action_button_container"
android:layout_width="@dimen/floating_action_button_width"
android:layout_height="@dimen/floating_action_button_height"
android:layout_above="@id/dialpad_floating_action_button_margin_bottom"
android:layout_centerHorizontal="true"
android:background="@drawable/fab_green" >
<ImageButton
android:id="@+id/dialpad_floating_action_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/floating_action_button"
android:contentDescription="@string/description_dial_button"
android:src="@drawable/fab_ic_call" />
</FrameLayout>
FAB example implementation

10. Cards
• Display multiple heterogeneous data types
(mixed images, text, video...)
• It’s not a replacement for a list or a grid
• Cards content can be dismissible and user
could interact with it (like, comment, etc)
• FrameLayout
android.support.v7.widget.CardView
with built-in elevation and rounded corners

11. • Advanced ListView created with flexibility in mind
• RecyclerView.Adapter is required to supply the data. There is
no default implementation for CursorAdapter
• RecyclerView.ViewHolder enforces the use of view holder
• Need for supplying layout manager implementation. There is a
default implementation of RecyclerView.LayoutManager for
both vertical and horizontal linear layout
• Touch handling: RecyclerView.OnItemTouchListener
• RecyclerView.ItemAnimator responsible for animations
RecyclerView

12. public class DroidconRecyclerAdapter extends
RecyclerView.Adapter<DroidconRecyclerAdapter.DroidconViewHolder> {
…
}
public class DroidconViewHolder extends RecyclerView.ViewHolder {
public TextView text;
public DroidconViewHolder(View itemView) {
super(itemView);
text= itemView.findViewById(R.id.text);
}
}
RecyclerView example

13. public class DroidconRecyclerAdapter extends
RecyclerView.Adapter<DroidconRecyclerAdapter.DroidconViewHolder> {
…
@Override
public DroidconViewHolder onCreateViewHolder(ViewGroup parent, int
viewType) {
…
}
@Override
public void onBindViewHolder(DroidconViewHolder holder, int
position) {
…
}
}
RecyclerView example

14. public class DroidconRecyclerAdapter extends
RecyclerView.Adapter<DroidconRecyclerAdapter.DroidconViewHolder> {
…
@Override
public DroidconViewHolder onCreateViewHolder(ViewGroup parent, int
viewType) {
View v = mInflater.inflate(R.layout.item, parent, false);
return new DroidconViewHolder(v);
}
@Override
public void onBindViewHolder(DroidconViewHolder holder, int
position) {
holder.text.setText(mItems.get(position));
}
RecyclerView example

15. public class DroidconViewHolder extends RecyclerView.ViewHolder {
…
public DroidconViewHolder(View itemView) {
super(itemView);
…
itemView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// Do something
}
});
}
RecyclerView

16. recyclerView = (RecyclerView)findViewById(R.id.horizontal_list);
recyclerView.setAdapter(new DroidconRecyclerAdapter(mDroidconItems));
recyclerView.setLayoutManager(new LinearLayoutManager(this,
LinearLayoutManager.HORIZONTAL, false));
recyclerView.setItemAnimator(new DefaultItemAnimator());
…
RecyclerView

17. • Transition framework since KitKat
• Key concepts: Scene and Transition
• What’s new in the API?
• Support for animations when switching between
activities and fragments
• Shared element animations
Activity and Fragment Transitions

18. Content and shared element transitions

19. • Supported content transitions: Fade, Slide, Explode
• Howto do it?
• Setit in thetheme:
<!-- specify enter and exit transitions -->
<item name="android:windowEnterTransition">@transition/explode</item>
<item name="android:windowExitTransition">@transition/explode</item>
• Requestitin the code:
getWindow().setExitTransition(new Explode());
• Call correspondingFragment methodsorset it in FragmentXML:
<android:fragmentEnterTransition=“@transition/explode” />
ContentTransitions

20. • Supportedcontenttransitions:ChangeBounds, ChangeTransform, ChangeClipBounds, ChangeImageTransform
• Howtodoit?
1. Specify shared element transition in theme:
<!-- specify shared element transitions -->
<item name="android:windowSharedElementEnterTransition">@transition/image_transform</item>
2. Definetransitionin XML:
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
</transitionSet>
SharedElement Transitions

21. 3. Assign a common name for the shared views in both layouts by using
android:transitionName attribute.
4. Start the activity with a Bundle holding transitions and shared views:
// create the transition animation - the images in the layouts
// of both activities are defined with android:transitionName=“user_photos"
ActivityOptions options = ActivityOptions
.makeSceneTransitionAnimation(this, userPhotoView, “user_photos");
// start the new activity
startActivity(intent, options.toBundle());
5. To reverse the scene transition animation when you finish the second activity call the
finishAfterTransition()
SharedElement Transitions

22. • http://www.google.com/design/
• http://developer.android.com
• http://android-developers.blogspot.com
Sources