The document discusses key concepts for supporting multiple screen sizes in Android, including screen size, density, resolution, and density-independent pixels (dp). It outlines four generalized screen sizes (small, normal, large, xlarge) and densities (ldpi, mdpi, hdpi, xhdpi) that Android supports. Resources like layouts and images can be provided for each configuration to ensure apps look good and make efficient use of space across different devices. Providing density-independent dimensions in dp and multiple resource configurations allows apps to seamlessly adapt to any screen.
Our Android Human Interface Guidelines were born out of our own struggles with the Android platform. These guidelines are a living document and will continue to evolve with the platform.
Our Android Human Interface Guidelines were born out of our own struggles with the Android platform. These guidelines are a living document and will continue to evolve with the platform.
The presentation introduces the reader to the principles of user interaction in Android applications. First, events are introduced, together with the related concepts of callbacks and event listeners. It follows a discussion on how to handle events in a declarative fashion via the XML layout file.
Introduction to the basic aspects of application development in Android. The basic components, e.g., Activity and View, are introduced along with the different configuration files, e.g., AndroidManifest.xml.
This is a compilation of the Android Design Guidelines released by Google in early 2012. It' explains the philosophy and creative vision behind Android, and it also discusses the best practices for making a mobile and tablet app on Android.
Highly recommended for anyone who wants to start developing apps!
For more information on how to build Android apps, check out my blog at www.DIYDROID.com
The presentation introduces the reader to the principles of user interaction in Android applications. First, events are introduced, together with the related concepts of callbacks and event listeners. It follows a discussion on how to handle events in a declarative fashion via the XML layout file.
Introduction to the basic aspects of application development in Android. The basic components, e.g., Activity and View, are introduced along with the different configuration files, e.g., AndroidManifest.xml.
This is a compilation of the Android Design Guidelines released by Google in early 2012. It' explains the philosophy and creative vision behind Android, and it also discusses the best practices for making a mobile and tablet app on Android.
Highly recommended for anyone who wants to start developing apps!
For more information on how to build Android apps, check out my blog at www.DIYDROID.com
Effective UI’s Tony Hillerson and Juan Sanchez presented “Designing an App: From Idea to Market” at Android Open in October 2011. They cover best practices for desiging an Android app that offers a good user experience.
Designing an Android App: From Idea to MarketEffective
Effective UI’s Tony Hillerson and Juan Sanchez presented “Designing an App: From Idea to Market” at Android Open in October 2011. They cover best practices for desiging an Android app that offers a good user experience.
Have a idea of Mobile app development, you need to know many latest trends and updated on mobile application development and find the Guide for the Mobile application Development
Good Design Principles for App Developer (UAB) 2017Marçal P.
Keynote shown at Universitat Autònoma de Barcelona (UAB), on the Graduate Engineering Mobile Application Development, teaching the Good Design Principles for Mobile App Developers.
· Good Design Principles by Dieter Rams
· Good Design Principles & Apps
· UI – Human Interface Principles
· UX – User Experience Guidelines
· Reference Links
Interactive Design Coursework (ID Coursework)Aung Hein Htet
This is the Coursework of Interactive Design Subject that I have done for my BIT Degree and I've got the First Class Honours. Feel Free to use it as a reference for your coursework and wish you good luck for your education journey.
9 Step Guide to Create Ripple View Effect in AndroidNine Hertz
After the release of Android Lollipop, developers are highly excited to create Ripple View Effect in Android apps. Ripple View Effect really gives an amazing look to the Android applications. Hence Nine Hertz has created a 9 step guide on how to create Ripple View Effect. Original Source: http://goo.gl/SRAH6f
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
* Differences between Websites and Web Applications
* Research Techniques for Knowing Your Users
* Task Analysis
* UI/UX Design Principles for Web Applications
My Android is not an iPhone like any others (Mdevcon 2014)jeromevdl
This talk was about Android UX and design. Avoid mimic or replicate iOs screens on your Android apps, just try to respect the Google guidelines. You'll probably get better score on the Play Store, and better respect from your users.
Best Wearable App Development Services In USA, UK And India.pdfMedRecTechnologies
A wearable app refers to an app that is specifically designed to be used on a wearable device, such as a smartwatch. Wearable devices are becoming increasingly popular, and more people are using them to access information and interact with the world around them.
Each type of wearable app has its own unique set of capabilities and features that are tailored according to the device. So, it's important to tailor your app's design and functionality to match the specific platform you're targeting.
In this blog, we will discuss the technology required for developing wearable apps.
The UI consists of two parts, one for showing information to the user, the other(s) for controlling settings, selections, and so on. You can use standard UI components like labels, buttons, and so on, but additional objects are available that allow you to implement more advanced features like pickers, date-time displays, and so on.
You create the WatchKit app's interface by adding views (and optionally, controllers) to a storyboard file. A view is an object that displays information or collects input from the user. When you add a view to your storyboard, you specify its size, position, and appearance.
You can also configure how it responds when the user interacts with it. For example, you can specify how a button should behave when tapped or how a text field should autofill with previously entered values.
Essential Considerations of Wearable App Development
Wearable app development requires some special considerations, which are not obvious at first glance. These considerations include the following:
Usability: How wearable apps are used and accessed is very different from traditional software. They need to be designed for quick and easy access, preferably with a minimal number of steps to complete the desired action. Navigation should be simple and intuitive, and buttons and icons should be easily discernible.
Similar to Design for Android OS training (some technical tips) (20)
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Visual Style and Aesthetics: Basics of Visual Design
Visual Design for Enterprise Applications
Range of Visual Styles.
Mobile Interfaces:
Challenges and Opportunities of Mobile Design
Approach to Mobile Design
Patterns
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Technoblade The Legacy of a Minecraft Legend.Techno Merch
Technoblade, born Alex on June 1, 1999, was a legendary Minecraft YouTuber known for his sharp wit and exceptional PvP skills. Starting his channel in 2013, he gained nearly 11 million subscribers. His private battle with metastatic sarcoma ended in June 2022, but his enduring legacy continues to inspire millions.
33. Android Design Principles
If it looks the same, it should act the same - Help people discern
functional differences by making them visually distinct rather
than subtle
34. Android Design Principles
If it looks the same, it should act the same - Help people discern
functional differences by making them visually distinct rather
than subtle
39. Android Design Principles
Give me tricks that work everywhere - Make your app easier to
learn by leveraging visual patterns and muscle memory from
other Android apps
40. Android Design Principles
Give me tricks that work everywhere - Make your app easier to
learn by leveraging visual patterns and muscle memory from
other Android apps
51. Android Design Principles
Make important things fast - Not all actions are equal. Decide
what's most important in your app and make it easy to find and
fast to use
52. Android Design Principles
Make important things fast - Not all actions are equal. Decide
what's most important in your app and make it easy to find and
fast to use
56. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
57. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar -
58. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on
devices that don't have the traditional hardware keys
59. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on
devices that don't have the traditional hardware keys
3. Combined Bar -
60. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on
devices that don't have the traditional hardware keys
3. Combined Bar - On tablet form factors the status and navigation bars are combined into a
single bar at the bottom of the screen.
61. Notifications
Notifications are brief messages that users can access
at any time from the status bar. They provide
updates, reminders, or information that's important,
but not critical enough to warrant interrupting the
user. Open the notifications drawer by swiping down
on the status bar. Touching a notification opens the
associated app.
62. Notifications
Notifications can be expanded to uncover more details and relevant actions.
When collapsed, notifications have a one-line title and a one-line message.
The recommended layout for a notification includes two lines.
If necessary, you can add a third line.
Swiping a notification right or left removes it from the notification drawer.
66. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
67. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control -
68. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
69. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area -
70. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area - The space where the content of
your app is displayed.
71. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area - The space where the content of
your app is displayed.
4. Split Action Bar -
72. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area - The space where the content of
your app is displayed.
4. Split Action Bar - Split action bars provide a way
to distribute actions across additional bars
located below the main action bar or at the
bottom of the screen. In this example, a split
action bar moves important actions that won't fit
in the main bar to the bottom.
76. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
77. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density -
78. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
79. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation -
80. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
81. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution -
82. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution - The total number of physical pixels on a screen. When
adding support for multiple screens, applications do not work directly
with resolution; applications should be concerned only with screen size
and density
83. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution - The total number of physical pixels on a screen. When
adding support for multiple screens, applications do not work directly
with resolution; applications should be concerned only with screen size
and density
5. Density-independent pixel (dp) -
84. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution - The total number of physical pixels on a screen. When
adding support for multiple screens, applications do not work directly
with resolution; applications should be concerned only with screen size
and density
5. Density-independent pixel (dp) - A virtual pixel unit that you should use
when defining UI layout, to express layout dimensions or position in a
density-independent way. The density-independent pixel is equivalent to
one physical pixel on a 160 dpi screen, which is the baseline density
assumed by the system for a "medium" density screen. The conversion of
dp units to screen pixels is simple: px = dp * (dpi / 160)
87. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes -
88. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge
89. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge
2. Four generalized densities -
90. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge
2. Four generalized densities - ldpi (low), mdpi (medium), hdpi (high),
and xhdpi (extra high)
91. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge
2. Four generalized densities - ldpi (low), mdpi (medium), hdpi (high),
and xhdpi (extra high)
92. Overview of Screens Support
Each generalized screen size has an associated minimum resolution that's
defined by the system
1. xlarge - at least 960dp x 720dp
2. large - at least 640dp x 480dp
3. normal - at least 470dp x 320dp
4. small - at least 426dp x 320dp
94. Overview of Screens Support
Figures 1 and 2 show the difference between an application when it does not
provide density independence and when it does, respectively:
Figure 1
Figure 2
95. Overview of Screens Support
Following is a list of resource directories in an application that provides
different layout designs for different screen sizes and different bitmap
drawables for medium, high, and extra high density screens:
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
res/drawable-mdpi/my_icon.png // bitmap for medium density
res/drawable-hdpi/my_icon.png // bitmap for high density
res/drawable-xhdpi/my_icon.png // bitmap for extra high density
96. Draw 9-patch
1. Define the stretchable patches
2. Define content area (optional)
You can find this tool:
<Android SDK directory>/tools