Android Codelab- Building a Material Design App with the Android

Design Support Library

- Using ConstraintLayout to Design Your Views

+ElifBoncuk@elifbon_

+MuratCanBUR@muratcanbur

+SemihBozdemir@sembozdemir

Building a Material Design App with the Android Design Support Library

What we’ll learn?

#hacknbreak #gdg

●How to use the Android Design Support Library.●How to use the Vector Drawables.●How to apply material design to your Android app.●The following key material design components and principles:

○Themes and colors to create tangible surfaces and print-like design○App layout best practices for improved navigability○Animation and touch feedback to express meaningful motion.

What we’ll need?

#hacknbreak #gdg

●Android Studio version 2.1+ and JDK 8+●Experience developing Android Apps●A test device with Android 4.1+●A USB micro to USB cable.

* Android devices running Android 2.3.3 (Gingerbread, API Level 10) or higher may be used, however, some material design effects, such as the ripple effect, will not be visible on devices running on Android 4.4 (KitKat) or before.

What’s Material Design?

#hacknbreak #gdgMaterial is the metaphor. Bold, graphic and intentional. Motion provides meaning.

Setup:

#hacknbreak #gdg

First option https://github.com/googlecodelabs/android-design-library/archive/master.zip

Second option

Run the sample app!

Themes & Colors

#hacknbreak #gdg

Let’s create an app.

#hacknbreak #gdg

Using ConstraintLayout to Design Your Views

What we’ll learn?

#hacknbreak #gdg

●The Constraint System used by the new layout manager.●Creating constraints to build flexible and efficient layouts.●The various features of the new layout editor.

What we’ll need?

●Android Studio 2.2 preview●The sample code

Constraint

#hacknbreak #gdg

ConstraintLayout

#hacknbreak #gdg

●Unbundled Layout●Small - 100 kb●Compatible since Gingerbread(2.3) (%99.9 percent of devices)

●First Layout in conjunction with tool (Android Studio)

ConstraintLayout - Why not Relative Layout?

#hacknbreak #gdg

●ConstraintLayout is a superset●More expressive●Less nesting●Extensible

ConstraintLayout - UI Builder

#hacknbreak #gdg

●2 way editing(UI/XML)●Direct Integration in Studio●Immediate feedback●In Active Development●Material Design Guideline●Autoconnect●Clear all constraints●Infer constraints●Faster UI Design

Setup:

#hacknbreak #gdg

First option https://github.com/googlecodelabs/constraint-layout/archive/master.zip

Second option

Run the sample app!

Time to start coding.

#hacknbreak #gdg

Going forwardHelpful Links & References●https://codelabs.developers.google.com/codelabs/material-design-style/index.ht

ml?index=..%2F..%2Findex#0

●https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0

●https://codelabs.developers.google.com/codelabs/getting-ready-for-android-n/index.html?index=..%2F..%2Findex#0

●https://material.google.com/#introduction-principles ●https://medium.com/google-developers/5-tips-for-preparing-for-multi-window-in-a

ndroid-n-7bed803dda64#.urtxvdmnv

+ElifBoncuk@elifbon_

+MuratCanBur@muratcanbur

Thank You!

+SemihBozdemir@sembozdemir

#hacknbreak #gdg