SlideShare a Scribd company logo
1 of 40
Download to read offline
Material Design Android
AGENDA 
• Material theme 
• Styles 
• Layouts 
• Elevation 
• Widgets 
• Animations
MATERIAL THEME 
The new material theme provides: 
• System widgets that let you set their color palette 
• Touch feedback animations for the system widgets 
• Activity transition animations
The material theme is defined as: 
• @android:style/Theme.Material (dark version) 
• @android:style/Theme.Material.Light (light version) 
• @android:style/Theme.Material.Light.DarkActionBar
STYLE 
<resources> 
<!-- inherit from the material theme --> 
<style name="AppTheme" parent="android:Theme.Material"> 
<!-- Main theme colors --> 
<!-- your app's branding color (for the app bar) --> 
<item name="android:colorPrimary">@color/primary</item> 
<!-- darker variant of colorPrimary (for status bar, contextual 
app bars) --> 
<item 
name="android:colorPrimaryDark">@color/primary_dark</item 
> 
<!-- theme UI controls like checkboxes and text fields --> 
<item name="android:colorAccent">@color/accent</item> 
</style> 
</resources>
Material Design Android
LAYOUTS 
Layouts should conform to the material design guidelines 
• Baseline grids 
• Keylines 
• Spacing 
• Touch target size 
• Layout structure
ELEVATIONS 
Views can cast shadows, and the elevation value of a view determines 
the size of its shadow and its drawing order. 
<TextView 
android:id="@+id/my_textview" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/next" 
android:background="@color/white" 
android:elevation="5dp" />
Material Design Android
THE Z VALUE 
Z = elevation + translationZ 
To set the elevation of a view: 
In a layout definition, use the android:elevation attribute. 
In the code of an activity, use the View.setElevation method. 
To set the translation of a view, use the View.setTranslationZ method. 
The 
new ViewPropertyAnimator.z and ViewPropertyAnimator.translat 
ionZ 
methods enable you to easily animate the elevation of views.
SHADOWS AND OUTLINES 
The bounds of a view's background drawable determine the default 
shape 
of its shadow 
Outlines represent the outer shape of a graphics object and define the 
ripple area for touch feedback.
<TextView 
android:id="@+id/myview" 
... 
android:elevation="2dp" 
android:background="@drawable/myrect" /> 
<!-- res/drawable/myrect.xml --> 
<shape 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
<solid android:color="#42000000" /> 
<corners android:radius="5dp" /> 
</shape>
You can also create outlines in your code using the methods in 
the Outline class, and you can assign them to views with 
the View.setOutline method. 
To prevent a view from casting a shadow, set its outline to null.
CLIPPING VIEWS 
Clip a view to its outline area using the View.setClipToOutline method. 
Only 
rectangle, circle, and round rectangle outlines support clipping, as 
determined by the Outline.canClip method. 
To clip a view to the shape of a drawable, set the drawable as the 
background of the view (as shown above) and call 
the View.setClipToOutline method. 
Because clipping views is an expensive operation, don't animate the 
shape 
you use to clip a view. To achieve this effect, use a Reveal 
Effect animation.
UI WIDGETS 
Two new widgets 
• RecyclerView 
• CardView 
Available in Android support library
RECYCLERVIEW 
• 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: 
1. A layout manager for positioning items 
2. Default animations for common item operations
Material Design Android
Material Design Android
Material Design Android
Material Design Android
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.
Material Design Android
ANIMATIONS 
• Touch feedback 
• Reveal effect 
• Activity transitions 
• Curved motion 
• View state changes
TOUCH FEEDBACK 
The default touch feedback animations for buttons use the 
new RippleDrawable class, which transitions between different states with a 
ripple 
effect. 
android:attr/selectableItemBackground 
android:attr/selectableItemBackgroundBorderless 
RippleDrawable and set it as the background of your view 
RippleDrawable as an XML resource using the ripple element 
android:colorControlHighlight(style of material theme)
REVEAL EFFECT 
ViewAnimationUtils.createCircularReveal
To reveal a previously invisible view using this effect:
To hide a previously visible view using this effect:
ACTIVITY TRANSITIONS 
• enter transition 
• exit transition 
• shared elements transition 
The Android L Developer Preview supports these enter and exit transitions: 
• explode - Moves views in or out from the center of the scene. 
• slide - Moves views in or out from one of the edges of the scene. 
• fade - Moves views in or out of the scene.
The Android L Developer Preview also supports these shared elements 
transitions: 
• changeBounds - Animates the changes in layout bounds of target views. 
• changeClipBounds - Animates the changes in clip bounds of target views. 
• changeTransform - Animates the changes in scale and rotation of target 
views. 
• moveImage - Animates changes in size and scale type for an image view.
Material Design Android
SPECIFY CUSTOM TRANSITIONS
The move_image transition in this example is defined as follows:
To enable window content transitions in your code instead, call the 
Window.requestFeature method:
To specify transitions in your code, call these methods with a Transition 
object: 
• Window.setEnterTransition 
• Window.setExitTransition 
• Window.setSharedElementEnterTransition 
• Window.setSharedElementExitTransition 
The transition is activated when you launch another activity with 
the startActivity method.
SHARED ELEMENTS TRANSITIONS 
To make a screen transition animation between two activities that have a shared 
element: 
• Enable window content transitions in your style. 
• Specify a shared elements transition in your style. 
• Define your transition as an XML resource. 
• Assign a common name to the shared elements in both layouts with 
the android:viewName attribute. 
• Use the ActivityOptions.makeSceneTransitionAnimation method.
Material Design Android
ANIMATING VIEW STATE CHANGES 
The new StateListAnimator class lets you define animators that run when the 
state of 
a view changes. The following example shows how to define an 
StateListAnimator as 
an XML resource
The new StateListAnimator class lets you define animators that run when the state of 
a view changes. The following example shows how to define an StateListAnimator 
as an XML resource:
EXTRACTING PROMINENT COLORS FROM AN IMAGE 
The Android L Developer Preview Support Library includes the Palette 
class 
This class extracts the following prominent colors: 
• Vibrant 
• Vibrant dark 
• Vibrant light 
• Muted 
• Muted dark 
• Muted light 
Palette.generate 
Palette.generateAsync 
Palette.getVibrantColor
REFERENCES 
https://developer.android.com/preview/material/index.html 
http://www.google.com/design/spec/material-design/introduction.html

More Related Content

What's hot

Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti Smash Tech
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)Google
 
User Interface customization for AEM 6
User Interface customization for AEM 6User Interface customization for AEM 6
User Interface customization for AEM 6Damien Antipa
 
Adapter and cache technique
Adapter and cache techniqueAdapter and cache technique
Adapter and cache techniqueHoang Vy Nguyen
 
Android Layout 3分クッキング
Android Layout 3分クッキングAndroid Layout 3分クッキング
Android Layout 3分クッキングYuki Anzai
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile WidgetsJose Palazon
 
Android Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and PatternsAndroid Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and PatternsAdham Enaya
 
UI Customization in AEM 6.0
UI Customization in AEM 6.0UI Customization in AEM 6.0
UI Customization in AEM 6.0Gilles Knobloch
 
User interface customization for aem6 circuit
User interface customization for aem6 circuitUser interface customization for aem6 circuit
User interface customization for aem6 circuitDamien Antipa
 
AEM 6.1 User Interface Customization
AEM 6.1 User Interface CustomizationAEM 6.1 User Interface Customization
AEM 6.1 User Interface CustomizationChristian Meyer
 
Android app development lesson 1
Android app development lesson 1Android app development lesson 1
Android app development lesson 1Kalluri Vinay Reddy
 
CIRCUIT 2015 - UI Customization in AEM 6.1
CIRCUIT 2015 - UI Customization in AEM 6.1CIRCUIT 2015 - UI Customization in AEM 6.1
CIRCUIT 2015 - UI Customization in AEM 6.1ICF CIRCUIT
 
Chapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action barChapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action barKalluri Vinay Reddy
 
Chapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barChapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barKalluri Vinay Reddy
 
CIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesCIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesICF CIRCUIT
 

What's hot (20)

Android Materials Design
Android Materials Design Android Materials Design
Android Materials Design
 
Android Ui
Android UiAndroid Ui
Android Ui
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 
Android UI System
Android UI SystemAndroid UI System
Android UI System
 
09 material design
09 material design09 material design
09 material design
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)
 
User Interface customization for AEM 6
User Interface customization for AEM 6User Interface customization for AEM 6
User Interface customization for AEM 6
 
Adapter and cache technique
Adapter and cache techniqueAdapter and cache technique
Adapter and cache technique
 
Android Layout 3分クッキング
Android Layout 3分クッキングAndroid Layout 3分クッキング
Android Layout 3分クッキング
 
BluePrint Mobile Framework
BluePrint Mobile FrameworkBluePrint Mobile Framework
BluePrint Mobile Framework
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
 
Android Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and PatternsAndroid Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and Patterns
 
UI Customization in AEM 6.0
UI Customization in AEM 6.0UI Customization in AEM 6.0
UI Customization in AEM 6.0
 
User interface customization for aem6 circuit
User interface customization for aem6 circuitUser interface customization for aem6 circuit
User interface customization for aem6 circuit
 
AEM 6.1 User Interface Customization
AEM 6.1 User Interface CustomizationAEM 6.1 User Interface Customization
AEM 6.1 User Interface Customization
 
Android app development lesson 1
Android app development lesson 1Android app development lesson 1
Android app development lesson 1
 
CIRCUIT 2015 - UI Customization in AEM 6.1
CIRCUIT 2015 - UI Customization in AEM 6.1CIRCUIT 2015 - UI Customization in AEM 6.1
CIRCUIT 2015 - UI Customization in AEM 6.1
 
Chapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action barChapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action bar
 
Chapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barChapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action bar
 
CIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesCIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM Sites
 

Viewers also liked

Material Design: Google's New Design Language
Material Design: Google's New Design LanguageMaterial Design: Google's New Design Language
Material Design: Google's New Design LanguageRaveesh Bhalla
 
Material design full topics_animation
Material design full topics_animationMaterial design full topics_animation
Material design full topics_animationAnup Majumder
 
Google Material design
Google Material designGoogle Material design
Google Material designDan Vitoriano
 
Material design - AndroidosDay 2015
Material design - AndroidosDay 2015Material design - AndroidosDay 2015
Material design - AndroidosDay 2015rlecheta
 
Design guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by BetaglideDesign guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by BetaglideManan Shah
 
Esp chap 4 materials design (finished)
Esp chap 4   materials design (finished)Esp chap 4   materials design (finished)
Esp chap 4 materials design (finished)Nik Nor Nabillah Anis
 
Google material-design
Google material-designGoogle material-design
Google material-designHarrison Weber
 
How much does it cost to build a mobile app?
How much does it cost to build a mobile app?How much does it cost to build a mobile app?
How much does it cost to build a mobile app?Jurgis Kirsakmens
 
Everything about-mobile-app-development
Everything about-mobile-app-developmentEverything about-mobile-app-development
Everything about-mobile-app-developmentNine Hertz
 
Basic Android Animation
Basic Android Animation Basic Android Animation
Basic Android Animation Shilu Shrestha
 
Android animation
Android animationAndroid animation
Android animationKrazy Koder
 
School Management System in Android
School Management System in AndroidSchool Management System in Android
School Management System in AndroidTeam Codingparks
 
Java eclipse-y-android-studio
Java eclipse-y-android-studioJava eclipse-y-android-studio
Java eclipse-y-android-studioDies Irae
 
Introduction to Android Animations
Introduction to Android AnimationsIntroduction to Android Animations
Introduction to Android AnimationsXamarin
 

Viewers also liked (20)

Material Design: Google's New Design Language
Material Design: Google's New Design LanguageMaterial Design: Google's New Design Language
Material Design: Google's New Design Language
 
Android Material Design
Android Material DesignAndroid Material Design
Android Material Design
 
Material design full topics_animation
Material design full topics_animationMaterial design full topics_animation
Material design full topics_animation
 
Google Material design
Google Material designGoogle Material design
Google Material design
 
Material design - AndroidosDay 2015
Material design - AndroidosDay 2015Material design - AndroidosDay 2015
Material design - AndroidosDay 2015
 
Design guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by BetaglideDesign guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by Betaglide
 
Materials design
Materials designMaterials design
Materials design
 
Esp chap 4 materials design (finished)
Esp chap 4   materials design (finished)Esp chap 4   materials design (finished)
Esp chap 4 materials design (finished)
 
Material design
Material designMaterial design
Material design
 
Google material-design
Google material-designGoogle material-design
Google material-design
 
Material design
Material designMaterial design
Material design
 
How much does it cost to build a mobile app?
How much does it cost to build a mobile app?How much does it cost to build a mobile app?
How much does it cost to build a mobile app?
 
Everything about-mobile-app-development
Everything about-mobile-app-developmentEverything about-mobile-app-development
Everything about-mobile-app-development
 
Basic Android Animation
Basic Android Animation Basic Android Animation
Basic Android Animation
 
Android animation
Android animationAndroid animation
Android animation
 
School Management System in Android
School Management System in AndroidSchool Management System in Android
School Management System in Android
 
Android animation theory
Android animation theoryAndroid animation theory
Android animation theory
 
Java eclipse-y-android-studio
Java eclipse-y-android-studioJava eclipse-y-android-studio
Java eclipse-y-android-studio
 
Introduction to Android Animations
Introduction to Android AnimationsIntroduction to Android Animations
Introduction to Android Animations
 
Material design
Material designMaterial design
Material design
 

Similar to Material Design Android

Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROIDMaterial Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROIDJordan Open Source Association
 
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...Akira Hatsune
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkJussi Pohjolainen
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsTop Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsMotorola Mobility - MOTODEV
 
viWave Study Group - Introduction to Google Android Development - Chapter 23 ...
viWave Study Group - Introduction to Google Android Development - Chapter 23 ...viWave Study Group - Introduction to Google Android Development - Chapter 23 ...
viWave Study Group - Introduction to Google Android Development - Chapter 23 ...Ted Chien
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular jsAayush Shrestha
 
iOS Development (Part 3) - Additional GUI Components
iOS Development (Part 3) - Additional GUI ComponentsiOS Development (Part 3) - Additional GUI Components
iOS Development (Part 3) - Additional GUI ComponentsAsim Rais Siddiqui
 
Android App Development - 04 Views and layouts
Android App Development - 04 Views and layoutsAndroid App Development - 04 Views and layouts
Android App Development - 04 Views and layoutsDiego Grancini
 
Printing photos-html-using-android
Printing photos-html-using-androidPrinting photos-html-using-android
Printing photos-html-using-androidKetan Raval
 
Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101Fernando Gallego
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJSFestUA
 
Android app material design from dev's perspective
Android app material design from dev's perspectiveAndroid app material design from dev's perspective
Android app material design from dev's perspectiveDeSmart Agile Software House
 
Civil 3D Visualization
Civil 3D VisualizationCivil 3D Visualization
Civil 3D VisualizationLarry Young
 
ADF Mobile - an intro for Developers
ADF Mobile - an intro for DevelopersADF Mobile - an intro for Developers
ADF Mobile - an intro for DevelopersLuc Bors
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
 
Android webinar class_4
Android webinar class_4Android webinar class_4
Android webinar class_4Edureka!
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxGevitaChinnaiah
 

Similar to Material Design Android (20)

Day seven
Day sevenDay seven
Day seven
 
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROIDMaterial Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
 
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...MVP Community Camp 2014 - How to useenhanced features of Windows 8.1 Store ...
MVP Community Camp 2014 - How to use enhanced features of Windows 8.1 Store ...
 
Modern android development
Modern android developmentModern android development
Modern android development
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsTop Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
 
viWave Study Group - Introduction to Google Android Development - Chapter 23 ...
viWave Study Group - Introduction to Google Android Development - Chapter 23 ...viWave Study Group - Introduction to Google Android Development - Chapter 23 ...
viWave Study Group - Introduction to Google Android Development - Chapter 23 ...
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
iOS Development (Part 3) - Additional GUI Components
iOS Development (Part 3) - Additional GUI ComponentsiOS Development (Part 3) - Additional GUI Components
iOS Development (Part 3) - Additional GUI Components
 
Android App Development - 04 Views and layouts
Android App Development - 04 Views and layoutsAndroid App Development - 04 Views and layouts
Android App Development - 04 Views and layouts
 
Printing photos-html-using-android
Printing photos-html-using-androidPrinting photos-html-using-android
Printing photos-html-using-android
 
Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-Native
 
Supercharge your ui
Supercharge your uiSupercharge your ui
Supercharge your ui
 
Android app material design from dev's perspective
Android app material design from dev's perspectiveAndroid app material design from dev's perspective
Android app material design from dev's perspective
 
Civil 3D Visualization
Civil 3D VisualizationCivil 3D Visualization
Civil 3D Visualization
 
ADF Mobile - an intro for Developers
ADF Mobile - an intro for DevelopersADF Mobile - an intro for Developers
ADF Mobile - an intro for Developers
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Android webinar class_4
Android webinar class_4Android webinar class_4
Android webinar class_4
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptx
 

Recently uploaded

ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 

Recently uploaded (20)

ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 

Material Design Android

  • 2. AGENDA • Material theme • Styles • Layouts • Elevation • Widgets • Animations
  • 3. MATERIAL THEME The new material theme provides: • System widgets that let you set their color palette • Touch feedback animations for the system widgets • Activity transition animations
  • 4. The material theme is defined as: • @android:style/Theme.Material (dark version) • @android:style/Theme.Material.Light (light version) • @android:style/Theme.Material.Light.DarkActionBar
  • 5. STYLE <resources> <!-- inherit from the material theme --> <style name="AppTheme" parent="android:Theme.Material"> <!-- Main theme colors --> <!-- your app's branding color (for the app bar) --> <item name="android:colorPrimary">@color/primary</item> <!-- darker variant of colorPrimary (for status bar, contextual app bars) --> <item name="android:colorPrimaryDark">@color/primary_dark</item > <!-- theme UI controls like checkboxes and text fields --> <item name="android:colorAccent">@color/accent</item> </style> </resources>
  • 7. LAYOUTS Layouts should conform to the material design guidelines • Baseline grids • Keylines • Spacing • Touch target size • Layout structure
  • 8. ELEVATIONS Views can cast shadows, and the elevation value of a view determines the size of its shadow and its drawing order. <TextView android:id="@+id/my_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/next" android:background="@color/white" android:elevation="5dp" />
  • 10. THE Z VALUE Z = elevation + translationZ To set the elevation of a view: In a layout definition, use the android:elevation attribute. In the code of an activity, use the View.setElevation method. To set the translation of a view, use the View.setTranslationZ method. The new ViewPropertyAnimator.z and ViewPropertyAnimator.translat ionZ methods enable you to easily animate the elevation of views.
  • 11. SHADOWS AND OUTLINES The bounds of a view's background drawable determine the default shape of its shadow Outlines represent the outer shape of a graphics object and define the ripple area for touch feedback.
  • 12. <TextView android:id="@+id/myview" ... android:elevation="2dp" android:background="@drawable/myrect" /> <!-- res/drawable/myrect.xml --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#42000000" /> <corners android:radius="5dp" /> </shape>
  • 13. You can also create outlines in your code using the methods in the Outline class, and you can assign them to views with the View.setOutline method. To prevent a view from casting a shadow, set its outline to null.
  • 14. CLIPPING VIEWS Clip a view to its outline area using the View.setClipToOutline method. Only rectangle, circle, and round rectangle outlines support clipping, as determined by the Outline.canClip method. To clip a view to the shape of a drawable, set the drawable as the background of the view (as shown above) and call the View.setClipToOutline method. Because clipping views is an expensive operation, don't animate the shape you use to clip a view. To achieve this effect, use a Reveal Effect animation.
  • 15. UI WIDGETS Two new widgets • RecyclerView • CardView Available in Android support library
  • 16. RECYCLERVIEW • 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: 1. A layout manager for positioning items 2. Default animations for common item operations
  • 21. 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.
  • 23. ANIMATIONS • Touch feedback • Reveal effect • Activity transitions • Curved motion • View state changes
  • 24. TOUCH FEEDBACK The default touch feedback animations for buttons use the new RippleDrawable class, which transitions between different states with a ripple effect. android:attr/selectableItemBackground android:attr/selectableItemBackgroundBorderless RippleDrawable and set it as the background of your view RippleDrawable as an XML resource using the ripple element android:colorControlHighlight(style of material theme)
  • 26. To reveal a previously invisible view using this effect:
  • 27. To hide a previously visible view using this effect:
  • 28. ACTIVITY TRANSITIONS • enter transition • exit transition • shared elements transition The Android L Developer Preview supports these enter and exit transitions: • explode - Moves views in or out from the center of the scene. • slide - Moves views in or out from one of the edges of the scene. • fade - Moves views in or out of the scene.
  • 29. The Android L Developer Preview also supports these shared elements transitions: • changeBounds - Animates the changes in layout bounds of target views. • changeClipBounds - Animates the changes in clip bounds of target views. • changeTransform - Animates the changes in scale and rotation of target views. • moveImage - Animates changes in size and scale type for an image view.
  • 32. The move_image transition in this example is defined as follows:
  • 33. To enable window content transitions in your code instead, call the Window.requestFeature method:
  • 34. To specify transitions in your code, call these methods with a Transition object: • Window.setEnterTransition • Window.setExitTransition • Window.setSharedElementEnterTransition • Window.setSharedElementExitTransition The transition is activated when you launch another activity with the startActivity method.
  • 35. SHARED ELEMENTS TRANSITIONS To make a screen transition animation between two activities that have a shared element: • Enable window content transitions in your style. • Specify a shared elements transition in your style. • Define your transition as an XML resource. • Assign a common name to the shared elements in both layouts with the android:viewName attribute. • Use the ActivityOptions.makeSceneTransitionAnimation method.
  • 37. ANIMATING VIEW STATE CHANGES The new StateListAnimator class lets you define animators that run when the state of a view changes. The following example shows how to define an StateListAnimator as an XML resource
  • 38. The new StateListAnimator class lets you define animators that run when the state of a view changes. The following example shows how to define an StateListAnimator as an XML resource:
  • 39. EXTRACTING PROMINENT COLORS FROM AN IMAGE The Android L Developer Preview Support Library includes the Palette class This class extracts the following prominent colors: • Vibrant • Vibrant dark • Vibrant light • Muted • Muted dark • Muted light Palette.generate Palette.generateAsync Palette.getVibrantColor