Embracing the Lollipop

Embracing the Lollipop
Sonja Kesic - PSTech

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

• 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

http://www.materialpalette.com/

@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>

<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

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

• 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

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

…
@Override
public DroidconViewHolder onCreateViewHolder(ViewGroup parent, int
viewType) {
…
}
@Override
public void onBindViewHolder(DroidconViewHolder holder, int
position) {
…
}
}

…
@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));
}

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

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

• 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

Content and shared element transitions

• Supported content transitions: Fade, Slide, Explode
• Howto do it?
• Setit in thetheme:

<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

• Supportedcontenttransitions:ChangeBounds, ChangeTransform, ChangeClipBounds, ChangeImageTransform
• Howtodoit?
1. Specify shared element transition in theme:

<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

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

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

Embracing the Lollipop

More Related Content

Similar to Embracing the Lollipop (20)

Recently uploaded (20)

Embracing the Lollipop