Webinar onIntroduction to Material Design

New Design Language for Android by Google

Presented By

Akhilesh, ACADGILD Mentor

© copyright ACADGILD

Brief Intro About ACADGILD: CEO – Vinod Dham, Father of Pentium

• AcadGild is a technology education start-up which provides online courses in latest technologies.

• AcadGild was started by IIT/IIM alumni.

• Our aim is to provide millions of high school graduates, college graduates and working professionals, skills to make them ready for jobs.

2Introduction to Material Design

© copyright ACADGILD

Agenda

Introduction to Material Design

Sl No Agenda Title

1 Introduction to Android

2 Android Project Initial Folder Structure

3 Android Core Concept – Building Blocks

4 Introduction to Material Design

5 Creating Lists and Cards

6 ToolBar

Sl No Agenda Title

7 Floating Action Buttons

8 RecyclerView

9 CardView

10 Palette

11 Adding Dependencies

12 Application Outcome

13 Q & A

3

© copyright ACADGILD

Introduction to Android

What is Android? It’s Development Environment

• Android is a mobile operating system (OS) based on the Linux kernel and currently developed by Google.

• Android is an Open source software platform.

• A complete stack – OS, Middleware, Applications

• Fast application development using Java

Introduction to Material Design 4

© copyright ACADGILD

Android Project

1. Android Java source code.

2. Image resources used by the application.

3. XML layout files that define the structure /design of UI

components.

4. Dimensions, strings and other values that you might

not want to hard-code in your application.

5. The manifest file defines what's included in the

application: activities, permissions and so on.

Introduction to Material Design

Initial Folder Structure

5

© copyright ACADGILD

Android Core Concept

Building Blocks

• Activity - Provides a screen with which users can interact in order to do something.

• Content Provider - Supplies data from one application to others on request.

• Broadcast Receiver - Simply respond to broadcast messages from other applicationsor from the system itself. These messages are sometime called events or intents.

• Service - A Service is an application component that can perform long-runningoperations in the background and does not provide a user interface

• Intent - An intent is an abstract description of an operation to be performed. It canbe used with startActivity to launch an Activity , broadcastIntent to send it to anyinterested BroadcastReceiver components, and startService(Intent) orbindService(Intent, ServiceConnection, int) to communicate with a backgroundService .

Introduction to Material Design 6

© copyright ACADGILD

Introduction to Material Design

• Material Design. What it is not.

Material Design != Flat Design

• Principles

Introduction to Material Design 7

© copyright ACADGILD

Creating Lists and Cards

• To create complex lists and cards with material design styles in your apps, you

can use the RecyclerView and CardView widgets.

Introduction to Material Design 8

© copyright ACADGILD

ToolBar

• The new android ToolBar can sit in the same application with the ActionBar. The android Toolbar is very flexible because its sizes, color and position can be easily changed.

• The ToolBar can be place anywhere in an app and it can also server as a standalone view. The android ToolBar is a ViewGroup which can contain other View controls.

• The recent android AppCompat support libraries V7, supports android API level 7 and up

Introduction to Material Design 9

© copyright ACADGILD

Floating Action Buttons

• Floating action buttons are used for a special type of promoted action.

• They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching and transferring anchor point.

• Floating action buttons come in two sizes: default and mini.

• The size can be controlled with the fabSize attribute.• As this class descends from ImageView, you can control

the icon which is displayed via setImageDrawable(Drawable).

• The background color of this view defaults to the your theme's colorAccent.

• If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

Introduction to Material Design 10

© copyright ACADGILD

RecyclerView

• Is advanced version of ListView.

• Item Views are recycled and can be scrolled efficiently.

• Should be used with dynamically changing datasets.

• RecyclerView is easy to use, because it provides:

• A layout manager for positioning items

• Default animations for common item operations

Introduction to Material Design 11

© copyright ACADGILD

CardView

• CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look on any app.

• CardView widgets can have shadows and rounded corners.

• Here's how to specify properties of CardView:

– To set the corner radius in your layouts, the card_view:cardCornerRadius attribute.

– To set the corner radius in your code, use the CardView.setRadius method.

– To set the background color of a card, use the card_view:cardBackgroundColor attribute.

Introduction to Material Design 12

© copyright ACADGILD

Palette

Introduction to Material Design 13

© copyright ACADGILD

Palette (Contd.)

private void getPhoto() {

Bitmap photo = BitmapFactory.decodeResource(getResources(),R.drawable.ic_action_delete); colorize(photo); }

private void colorize(Bitmap photo) {

mPalette = Palette.generate(photo);

applyPalette(); }

private void applyPalette() {

getWindow().setBackgroundDrawable(

new ColorDrawable(mPalette.getDarkMutedColor(defaultColor)));

mRecyclerView.setBackgroundColor(mPalette.getLightVibrantColor(defaultColor));

toolbar.setBackgroundColor(mPalette.getLightVibrantColor(defaultColor));fab.setBackgroundTintList(ColorStateList.valueOf(mPalette.getLightVibrantColor(

defaultColor))); }

Introduction to Material Design 14

© copyright ACADGILD

Adding Dependencies

dependencies {compile fileTree(include: ['*.jar'], dir: 'libs')testCompile 'junit:junit:4.12'compile 'com.android.support:appcompat-v7:23.1.1'compile 'com.android.support:design:23.1.1'compile 'com.android.support:cardview-v7:23.1.1'compile 'com.android.support:recyclerview-v7:23.1.1'compile 'com.android.support:palette-v7:23.1.1'

}

Introduction to Material Design 15

© copyright ACADGILD

Application Outcome

Introduction to Material Design 16

© copyright ACADGILD

Any Questions ?

Introduction to Material Design 17

Contact Info:

oWebsite : http://www.acadgild.com

oLinkedIn : https://www.linkedin.com/company/acadgild

oFacebook : https://www.facebook.com/acadgild

oSupport: support@acadgild.com

© copyright ACADGILD18Introduction to Material Design

© copyright ACADGILD

Thank You

19Introduction to Material Design