The coolest Android, Material Design

Transcript

1. The coolest Android, Material Design
2. Hello! I AM OSCAR CABALLERO Follow me at: ◦ @oscar_pozas ◦ +OscarCaballeroPozas96 ◦ oscar@caballero.xyz
3. What is Material Design? 1
4. 3 PRINCIPLES Material is the metaphor Bold, graphic, intentional Motion provides meaning
6. Place your screenshot here The result
7. Resources, resources everywhere https://www.materialup.com https://dribbble.com https://www.google.com/design/spec/material-design
8. “ compile 'com.melnykov:floatingactionbutton: 1.3.0' compile 'com.melnykov: floatingactionbutton:1.3.0' compile 'com.github.navasmdc:MaterialDesign:1.5@aar' ...
9. “ compile 'com.melnykov:floatingactionbutton: 1.3.0' compile 'com.melnykov: floatingactionbutton:1.3.0' compile 'com.github.navasmdc:MaterialDesign:1.5@aar' ...
10. “ compile ‘com.android.support:design:23.x.x’
11. Place your screenshot here Place your screenshot here FloatingActionButton NavigationView
12. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- your content layout --> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> Show me the code
13. <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_1" android:checked="true" android:icon="@drawable/ic_android1" android:title="@string/title_section1"/> <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_android2" android:title="@string/title_section2"/> </group> </menu> Show me the code
14. Place your screenshot here TextView Snackbar
15. Snackbar snackbar = Snackbar.make(MyParentView, CharTitle, Duration); snackbar.setAction("Cerrar", new View.OnClickListener() { @Override public void onClick(View v) { Log.d("Holo", "Me pulsaste wey"); } }); snackbar.show(); //Oh puedo ver mi snackBar Show me the code (Snackbar)
16. CollapsingToolbarLayout Place your screenshot here
17. <android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="192dp" android:layout_width="match_parent"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> Show me the code
18. CoordinatorLayout Place your screenshot here
19. <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_height="192dp" android:layout_width="match_parent"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- Your content --> </android.support.design.widget.CoordinatorLayout>
20. <android.support.v4.widget.NestedScrollView android:id="@+id/scroll" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v4.widget.NestedScrollView> Show me the code
21. TabLayout
22. <android.support.design.widget.CoordinatorLayout > <android.support.design.widget.AppBarLayout > <android.support.v7.widget.Toolbar /> <!-- The Tab rests directly below the Toolbar, attached below it --> <android.support.design.widget.TabLayout /> </android.support.design.widget.AppBarLayout> <!-- Helps handing the Fragments to load for each Tab --> <android.support.v4.view.ViewPager /> </android.support.design.widget.CoordinatorLayout> Show me the code
23. tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); Show me the code
24. References? http://developer.android.com/reference/packages.html
25. Thanks! ANY QUESTIONS? You can find me at @oscar_pozas +OscarCaballeroPozas96 oscar@caballero.xyz