I have a TabLayout which it's height is 50dp. each tab inside it contains both icon and title inside itself. But as this article says If I use both icon and title inside a tab, TabLayout height should be 72dp. now my question is :
if I set 50dp for my TabLayout's height, Will go out my design from Material Design? Thanks
sorry about my English.
All sizes mentioned in Material.io are required to respect Material Design Guideline.
Well, Material Design is just a set of guidelines based on some research. It suggests good practices and consistent solutions. Material Design guidelines used to be pretty strict, for example when it comes to shapes of buttons, because they wanted to make users used to some concepts. With Material Design 2 the guidelines relaxed a lot.
Minimal size is meant to keep items distinguishable and accessible, but still not too big. I wouldn't make tabs much smaller, because it may look squashed. It won't affect the usability though as minimal size for clickable items is 40dp, I guess. You would probably need to reduce spacings and sizes of other items in your app in order to make it look consistent with shorter tabs.
Changing font is fine as long as it was designed for on-screen reading. The size can be any as well as long as text is large enough to be readable.
If your design is consistent, items are distinguishable, easy to use and aligned well, then you're good. Take a look at Material Studies on material.io - these designs show how far you can go without breaking anything.
Related
Why most of the time if we have to create a margin, padding or anything inside xml we use multiples of 8 or 4?
I was trying to know what is the possible reason for this? Why isn't it an odd number mostly ?
Spacing methods and layout grids define structure, hierarchy, and rhythm in your design. When correctly used, they reduce decision-making and help establish a rational approach to type scales, positioning, sizing, and spacing.
Base Unit
The base unit defines what every measurement will be a multiple of.
This keeps designs consistent, improves communication with developers, and reduces the number of decisions a designer has to make.
The most recommended base unit is 8px because it makes scaling for a wide variety of devices easy and consistent.
This is because most screen sizes are divisible by 8 and because 8 is itself an easily divisible number (8/2=4, 8/4=2).
On other hand, as Material Design (is a design system – backed by open-source code – that helps teams build high-quality digital experiences.) explained,
All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
Icons, type, and some elements within components can align to a 4dp grid.
Refer to these articles for more details,
Everything you need to know as a UI designer about spacing & layout grids
8pt Material Design GUI Templates
When trying to pick padding and width and margin for UI elements, I see that some default values pop up in the XML. This makes me think --> Is there a standard set of measurements that I can use for material design instead of trying to guess what looks right?
Like in the picture below, where specifically in the documentation can i find the list of all dimensions available?
Android specifies certain widths and heights that you should use for your application. For example the horizontal and vertical activity margins, the padding in TextView or EditText. See https://material.google.com/layout/metrics-keylines.html for the guidelines.
First situation
Let's say I have a screen with several buttons placed in vertical order.
I distributed available space between them using weights.
So, on a large screen buttons get bigger. That's what I want.
But how I make the text look bigger to?
Okay, I took a class from here Auto-fit TextView for Android.
But is that normal that android does not have a standard approach for this and we have to use a custom class?
That's weird. How do developers deal with it?
Second situation
Let's say it's okay to use this custom class.
I have a ListView
I want the items to increase their height as the height of screen increases.
How do I do that? I found a difficult way to do that, but it all seems like lots of troubles.
How do developers usually do such things?
Or maybe developers don't resize list items at all?
Maybe it's okay if they are set in dp and look quite small on big tabs?
I'm adding this as answer because I did a lot of typing.
If you're using Eclipse, you'll see that there are a number of folders in Drawables. They are essentially for sm, md, lg, xglg, etc... All screens fit into one of those categories. What people normally do is design a layout for each. And, yes, there are hundreds of individual sizes. And yes, it's a pain to create for all of them. But many developers do exactly that. And don't forget about landscape and portrait. Need layouts for those too.
Hello, I would like to develop android app that have many categories to show.
And I would like to support multi-screen size. Now, I decide to show with gridview like the sample image.
Question 1:
Is this UI is suitable or not for this application? If this UI is not good for this app, please give me some advice. :)
Question 2:
Is it possible to implement it? Bcz I'm a newbie to Android. I have no idea how to show grid item count according to screen size. Please help.
Question 3:
I would like to learn and create app that support multi-screen size and responsive layout. Is there any good ref: source to learn?
Thank you.
Question 1: I think that is ok layout with some careful implementation. You can follow the material design guideline: https://www.google.com/design/spec/components/grid-lists.html#grid-lists-behavior
One of the point in the guideline for responsive design:
Responsive design
Full-screen grid lists should use fluid image ratios with minimum and
maximum widths, derived using the Ratio keylines. They should retain
fixed heights, margins, and padding.
Centered grid lists have fluid margins with a minimum width. They
maintain fixed image widths, heights, and padding.
Question 2: you can try the solution in this answer: How to set Staggered grid layout in different screen dimensions.?
Question 3: I find android site is a good source: http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/basics/fragments/index.html
Try this
That worked well for me
I'm having a lot of problems in adapting a design with ActionBarSherlock.
And I can not find much information.
I share a couple of screenshots of the original design and the result I get.
How I can increase the size of ActionBarSherlock?
How I can add a logo centered and custom size?
And, why the "logo Transparent" appears with white background??
regards and thanks,
Screenshots example:
http://i.stack.imgur.com/jJNmc.png
http://i.stack.imgur.com/evb42.png