Material in 30 minutes

Saul DiazAndroid Dev @ Chicisimo.com

@sefford sefford@gmail.com

MATERIAL EN 30 MINUTOS

O LE DEVOLVEMOS SU DINERO*

A Holo App

Tint with it

colorPrimaryDark

colorPrimary

windowBackground

navigationBarColor

textColorPrimary

<style name="Material30.Theme" parent="Theme.AppCompat.Light"> <item name="android:windowBackground">@android:color/white</item> <!-- Main theme colors for branding purposes --> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_dark</item> <!-- Theme UI controls like checkboxes and text fields --> <item name="colorAccent">@color/primary_accented</item> <item name="colorControlHighlight">@color/primary_pressed</item> <item name="android:textColorPrimary">@android:color/primary_text_light</item></style>

compile "com.android.support:appcompat-v7:22.0.+"

https://gist.github.com/seanKenkeremath/c945c39cdf92af138395

■ AppCompatAutoCompleteTextView

■ AppCompatButton

■ AppCompatCheckBox

■ AppCompatCheckedTextView

■ AppCompatEditText

■ AppCompatMultiAutoCompleteTextVie

w

■ AppCompatRadioButton

■ AppCompatRatingBar

■ AppCompatSpinner

■ AppCompatTextView

<android.support.v7.widget.Toolbar android:id="@+id/tb_main" style="@style/Material30.ActionBar" android:layout_height="wrap_content" android:layout_width="match_parent" app:theme="@style/Material30.ActionBar" android:elevation="2dp"/>

"- No; pero me gustaría verlos”

¿Ha visto usté a mis Ripples?

BUTTONRipple Child Drawable

Ripple Mask (if applicable)

BUTTON

Ripple Hotspot

Ripple Color

Ripple overlay

Unbounded Ripple

<ripple android:color="?attr/colorAccent"/>

Bounded Ripple <ripple android:color="?attr/colorAccent"> <item android:drawable="@drawable/primary_background_normal"/></ripple>

Bounded Ripple with Mask<ripple android:color="?attr/colorAccent"> <item android:id="@android:id/mask" android:drawable="@drawable/primary_background_normal"/></ripple>

Release the RecyclerView!

AdapterView

Layout+

Container

Data

Container

RecyclerView

LayoutData

AdapterView RecyclerView

OnItemClick/OnItemLongClick Delegates clicks to ViewHolders

Each View has their own item layoutThere are different layout strategies through

LayoutManager

ListView has headers and footers supportGridView needs to be extended

RecyclerView makes no distinction

GridView columns are fixed and only one element per position

GridLayoutManger has flexible spans

Adapters notify all elements at onceAdapters can be notified of changes with single-item

granularity

Dividers No dividers

Scrolls per visible item Scrolls per delta

compile "com.android.support:recyclerview-v7:22.0.+"

ItemDecoration

ItemAnimator

■ Dividers

■ StickyHeaders

■ Android Focus Tutorials

■ D’oh...

■ NotifyInsert/Delete/Change

■ One per Adapter

Beyond ValueAnimator

Circular Reveal Effect

targetView.setVisibility(View.VISIBLE);

ViewAnimationUtils.createCircularReveal(targetView, cx,

cy,

0, finalRadius)

.start();

<style name="Material30.Theme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Enable window content transitions --> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <!-- Specify enter and exit transitions --> <item name="android:windowEnterTransition">@android:transition/explode</item> <item name="android:windowExitTransition">@android:transition/explode</item>

<!-- Specify shared element transitions --> <item name="android:windowSharedElementEnterTransition"> @android:transition/move </item> <item name="android:windowSharedElementExitTransition"> @android:transition/move </item></style>

startActivity(intent, ActivityOptionsCompat.makeSceneTransitionAnimation(context, ivAvatar,“avatar”).toBundle());

<ImageView android:id="@+id/iv_cover" android:layout_width="match_parent" android:layout_height="304dp" android:layout_below="@+id/tb_main" android:transitionName="avatar" android:scaleType="centerCrop"/>

House of M

compile "com.android.support:design:22.0.+"

NavigationViewFAB CoordinatorLayout

<CoordinatorLayout>

<AppBarLayout>

<Toolbar app:layout_scrollFlags="scroll|enterAlways"/>

</AppBarLayout>

<RecyclerView app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</CoordinatorLayout>

Movable Header

Scrolling element

<CoordinatorLayout>

<AppBarLayout>

<CollapsingToolbarLayout app:contentScrim="@color/primary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:collapsedTitleTextAppearance="@style/Material30.TextAppearance" app:expandedTitleTextAppearance="@style/Material30.TextAppearance">

<ImageView app:layout_collapseMode="parallax"/>

<Toolbar app:layout_collapseMode="pin"/>

</CollapsingToolbarLayout>

</AppBarLayout>

<RecyclerView app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

Movable Header

Scrolling element

Dragons Ahead!

A Material App

■ Help your users by following guidelines

■ Follow guidelines, but keep your identity

■ Provide compatibility through XML as much as possible

Material in 30 in minutes

https://github.com/Sefford/material-in-30-minutes

Cheesesquare

https://github.com/chrisbanes/cheesesquare

Material for oldschoolers

https://www.youtube.com/watch?v=tSFrYWvh71I

http://www.slideshare.net/flipper83/material-old-school

Questions?

Thanks for playing!Saul Diaz@sefford

sefford@gmail.com