Date post: | 28-Jul-2015 |
Category: |
Design |
Upload: | saul-diaz-gonzalez |
View: | 400 times |
Download: | 4 times |
Saul DiazAndroid Dev @ Chicisimo.com
@sefford [email protected]
MATERIAL EN 30 MINUTOS
O LE DEVOLVEMOS SU DINERO*
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!
■ 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?