Material Design Android - Rodrigo Garcete
-
Upload
gdgfoz -
Category
Technology
-
view
134 -
download
2
Transcript of Material Design Android - Rodrigo Garcete
![Page 1: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/1.jpg)
Material Design Android
Rodrigo Garcete
Software Developer
Manager GDG Ciudad del Este
![Page 2: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/2.jpg)
Que es Material Design
![Page 3: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/3.jpg)
Que es Material Design
![Page 4: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/4.jpg)
Material Palette
http://www.materialpalette.com
![Page 5: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/5.jpg)
Add dependency
archivo build.gradle
dependencies {compile fileTree(include: ['*.jar'], dir: 'libs')compile ‘com.android.support:appcompat-v7:21.0.3’
}
![Page 6: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/6.jpg)
Set your primary colors
archivo colors.xml
<resources> <color name="primary_color">#F44336</color> <color name="primary_dark_color">#D32F2F</color> <color name="accent_color">#FFC107</color></resources>
![Page 7: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/7.jpg)
Make you theme extend AppCompat
archivo styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@colors/primary_color</item> <item name="colorPrimaryDark">@colors/primary_dark_color</item> <item name="colorAccent">@colors/accent_color</item></style>
![Page 8: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/8.jpg)
Toolbar
https://material.google.com/layout/structure.html#structure-toolbars
![Page 9: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/9.jpg)
Add Toolbar to layouts
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/primary_color" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
![Page 10: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/10.jpg)
App Bar
![Page 11: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/11.jpg)
TabLayout
<android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" />
tabMode - This sets the mode to use for the TabLayout. This can either be fixed (all tabs are shown concurrently) or scrollable (show a subset of tabs that can be scrolled through)
tabGravity: - This sets the Gravity of the tabs, which can be either fill(distribute all available space between individual tabs) or centre(position tabs in the center of the TabLayout)
setText(): This method is used to set the text to be displayed on the tab
setIcon(): This method is used to set the icon to be displayed on the tab
![Page 12: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/12.jpg)
Floating Action Buttons
<android.support.design.widget.FloatingActionButton android:id=”@+id/fab_normal” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@drawable/ic_plus” app:fabSize=”normal” />
![Page 13: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/13.jpg)
Navigation View
The new NavigationView component can simply be placed within our DrawerLayout (see code example below) and display our navigation items from the referenced menu resource.
![Page 14: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/14.jpg)
Navigation View Metricas
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">
<FrameLayout android:id="@+id/main_content_frame" android:layout_width="match_parent" android:layout_height="match_parent" />
<android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/navigation_header" app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>
![Page 15: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/15.jpg)
EditText Floating Label
<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content">
<EditText android:id="@+id/edit_text_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:hint="@string/hint_email" />
</android.support.design.widget.TextInputLayout>
setErrorEnabled(true);setError(getString(R.string.text_error_message));
![Page 16: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/16.jpg)
SnackBar
Snackbar.make(mDrawerLayout, "YOUR MESSAGE", Snackbar.LENGTH_SHORT) .setAction(getString(R.string.text_undo), this) .show();
![Page 17: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/17.jpg)
Coordinator Layout
The CoordinatorLayout builds on-top of the motion effects already provided by adding the ability to transition views based on the motion of others
archivo build.gradle
dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') compile ‘com.android.support:appcompat-v7:21.0.3’ compile ‘com.android.support:design:21.0.3’
}
![Page 18: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/18.jpg)
Coordinator Layout with Collapsing Toolbar
<android.support.design.widget.CoordinatorLayoutandroid:id="@+id/main_content">
<!-- Your other views --!>
<android.support.design.widget.FloatingActionButton
android:id=”@+id/fab_normal” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@drawable/ic_plus” android:layout_gravity="bottom|right" app:fabSize=”normal” />
</android.support.design.widget.CoordinatorLayout>
![Page 19: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/19.jpg)
RecyclerView
archivo build.gradle
dependencies {compile fileTree(include: ['*.jar'], dir: 'libs')compile ‘com.android.support:appcompat-
v7:21.0.3’
compile ‘com.android.support:recyclerview-v7:21.0.3’}
![Page 20: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/20.jpg)
CardView
archivo build.gradle
dependencies {compile fileTree(include: ['*.jar'], dir: 'libs')compile ‘com.android.support:appcompat-
v7:21.0.3’
compile ‘com.android.support:cardview-v7:21.0.3’}
![Page 21: Material Design Android - Rodrigo Garcete](https://reader031.fdocuments.us/reader031/viewer/2022020314/589bc6b11a28ab082b8b6329/html5/thumbnails/21.jpg)
Resources
https://material.google.com
http://www.materialup.com/
https://labs.ribot.co.uk/exploring-the-new-android-design-support-library-b7cda56d2c32#.ss90ney07
http://antonioleiva.com/materialize-app/
http://www.materialpalette.com/