Modern Android UI, or not by Action Bar alone

•Descargar como PPTX, PDF•

2 recomendaciones•2,774 vistas

Android 4+ interface guidelines, core concepts, some tips for programmers and designers. Originally created for Mobile Optimized 2013 conference.

Tecnología

Modern Android UI,
or
not by Action Bar alone
Anton Rutkevich,
CTO at Boolba Labs

State of platform
Android 2.3 still valid (~40%),
but will disappear in 0.5 .. 1 year
Android 3x skipped
Android 4 finally has design guidelines

Holo theme
Gives overall style
Backport: HoloEverywhere

Action Bar
Must be used for actions
Up button
Backport: ActionBarSherlock,
ActionBarCompat (soon)

ViewPager
Lateral navigation
Group of similar screens
Backport: android-support-
library, ViewPagerIndicator

NavigationDrawer
Dashboard pattern
replacement
Navigation between app
sections

Animation
Makes UI more dynamic
Many animations already included
Backport: NineOldAndroids

Ideas
Divide content into Fragments
Use different layouts

Alternative master-detail layouts
Hide Expand/Collapse
Sliding Pane

Coding
Use 9-patch and .xml drawables
Use sw<N>dp, w<N>dp
to detect large screens (ex.
sw600dp, w720dp)
Define common settings in
style.xml, themes.xml
Define dp values in dimens.xml
(padding, text size, line spacing, …)

Tools
Show GPU overdraw Show layout bounds

3rd party libraries
Staggered Grid View Showcase ViewParallax Scroll View

developer.android.com/design
Android has more than one screen size
Ideas behind the visual representation
Good Holo style description
Ready to use assets

Android Asset Studio
Android Holo Colors Action Bar Style Generator

Android Asset Studio
Device Frame Generator

Links
http://developer.android.com/design
http://android-ui-
utils.googlecode.com/hg/asset-
studio/dist/index.html
Google I/O 2013 - Android Design for UI
Developers (some illustrations are taken from
there)
http://www.androidviews.net/

Thank you for your attention
Questions?
anton.rutkevich@boolbalabs.com
Anton Rutkevich at Google+
http://www.linkedin.com/in/antonrutkevic

Más contenido relacionado

Similar a Modern Android UI, or not by Action Bar alone

Android UI PatternsPeter Pascale

Applico Android Info Session at Columbia UniversityApplico

SwiftLarry Ball

Flutter vs ReactNativeSumit Sahoo

Marakana Android User InterfaceMarko Gargenta

What's new in android 4.4 - Romain Guy & Chet HaaseParis Android User Group

[PBO] Pertemuan 12 - Pemrograman Androidrizki adam kurniawan

Programming with JavaFXFulvio Corno

Android design and Custom views Lars Vogel

Vb6.0 IntroductionTennyson

Build Community Android Distribution and Ensure the QualityNational Cheng Kung University

Drupal 7 UX – Roy Scholten

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Steven Faulkner

Multi-Dimensional Context-Aware Adaptation of Service Front-endsJean Vanderdonckt

Droidcon2014 - Android UXPiervincenzo Madeo

TopMod3d - Texas Open Source SymposiumDavid Morris

Android Apps Training - Day Four (Design)Anjan Shrestha

Android UI Design TipsAndroid Developers

Tell Me Quando - Implementing Feature FlagsJorge Ortiz

Spsmi13 chartsDerek Gusoff

Similar a Modern Android UI, or not by Action Bar alone (20)

Android UI Patterns

Applico Android Info Session at Columbia University

Swift

Flutter vs ReactNative

Marakana Android User Interface

What's new in android 4.4 - Romain Guy & Chet Haase

[PBO] Pertemuan 12 - Pemrograman Android

Programming with JavaFX

Android design and Custom views

Vb6.0 Introduction

Build Community Android Distribution and Ensure the Quality

Drupal 7 UX –

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012

Multi-Dimensional Context-Aware Adaptation of Service Front-ends

Droidcon2014 - Android UX

TopMod3d - Texas Open Source Symposium

Android Apps Training - Day Four (Design)

Android UI Design Tips

Tell Me Quando - Implementing Feature Flags

Spsmi13 charts

Último

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

Slack Application Development 101 Slidespraypatel2

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Understanding the Laravel MVC ArchitecturePixlogix Infotech

Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren

[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

A Call to Action for Generative AI in 2024Results

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh

Histor y of HAM Radio presentation slidevu2urc

Modern Android UI, or not by Action Bar alone

1. Modern Android UI, or not by Action Bar alone Anton Rutkevich, CTO at Boolba Labs

2. Intro

3. State of platform Android 2.3 still valid (~40%), but will disappear in 0.5 .. 1 year Android 3x skipped Android 4 finally has design guidelines

4. Modern UI principles

5. Holo theme Gives overall style Backport: HoloEverywhere

6. Action Bar Must be used for actions Up button Backport: ActionBarSherlock, ActionBarCompat (soon)

7. ViewPager Lateral navigation Group of similar screens Backport: android-support- library, ViewPagerIndicator

8. NavigationDrawer Dashboard pattern replacement Navigation between app sections

9. Animation Makes UI more dynamic Many animations already included Backport: NineOldAndroids

10. Responsive design

11. Problems Unbalanced UI

12. Ideas Divide content into Fragments Use different layouts

13. Master-detail view

14. Alternative master-detail layouts Hide Expand/Collapse Sliding Pane

15. Macro reflow

16. Limit width

17. List to Grid

18. Programmer tips

19. Coding Use 9-patch and .xml drawables Use sw<N>dp, w<N>dp to detect large screens (ex. sw600dp, w720dp) Define common settings in style.xml, themes.xml Define dp values in dimens.xml (padding, text size, line spacing, …)

20. Tools Show GPU overdraw Show layout bounds

21. Tools Multi-screen preview

22. 3rd party libraries Staggered Grid View Showcase ViewParallax Scroll View

23. Designer tips

24. developer.android.com/design Android has more than one screen size Ideas behind the visual representation Good Holo style description Ready to use assets

25. Android Asset Studio Android Holo Colors Action Bar Style Generator

26. Android Asset Studio Device Frame Generator

27. Links http://developer.android.com/design http://android-ui- utils.googlecode.com/hg/asset- studio/dist/index.html Google I/O 2013 - Android Design for UI Developers (some illustrations are taken from there) http://www.androidviews.net/

28. Thank you for your attention Questions? anton.rutkevich@boolbalabs.com Anton Rutkevich at Google+ http://www.linkedin.com/in/antonrutkevic

Modern Android UI, or not by Action Bar alone

Recomendados

Recomendados

Más contenido relacionado

Similar a Modern Android UI, or not by Action Bar alone

Similar a Modern Android UI, or not by Action Bar alone (20)

Último

Último (20)

Modern Android UI, or not by Action Bar alone