Android Design Fundamentals
Physical and Density Independent Pixels
Screen Resolutions — there are different resolutions for different devices so as your app can run on alot of devices with different screen sizes(tv, phone, tablets, watch etc) there will be need to adapt your screens UI depending on the devices screen size. EG One devive may be (800*1280)pixels while another may be (1280*800)pixels both have the same resolution but they are different screen sizes
Solution: Density Independent Pixels(dp)
Helps to design screens that appear the same no matter the density or resolution of the target device. Therefore you only design one layout for all screen resolutions and they scale as needed.
NB:
When designing an interface design for smaller screens first. Why? The UI will still be usable on a tablet screen (thou with lots of white spaces but it will work dfine) if you design for a phone first. However if you design for a tablet the touch targets may be really small for phone screens.
Density Buckets
Each device gets assigned a density bucket depending on its screen’s pixel density instead of using devices exact pixel density which may vary a bit. E.G LDPI,MDPI,HDPI,XHDPI,XXHDPI,XXXHDPI. thats what will be used in the scaling of your graphical assets e.g. icons and the designer therefore doesn’t have to create multiple icons for each and every screen density.
We use the Android Assets Studio to get the different density buckets for assets in Android Studio.
VECTOR vs BITMAP
Raster Graphics (Bitmaps) they look crisp when scaled down but they become blurry when scalled up.
Vector Assets allow for the images to be scaled up and down without any loss of quality. (Recommended)
State List — where your graphic elements can change depending on state e.g. when pressed change the color of asset or even focused or even when its both checked and pressed .
USER INTERFACE
Layouts — Made up of view hierachy from root view (e.g. Constraint Layout, ScrollView, Linear or Relative layout) all the way to leaf layouts (e.g. Textview, Button etc). It is preferred to use XML rather than declaration of views in the code.
Padding- use when you want space to be part of your object e.g. add space between your views and the enclosing view( like CardView) and use margin when you want space around the object.
FrameLayout - Arranges views on top of each other where a view can stretch to fill the width of the framelayout or even have a weight assigned to it. Use: when you want overlapping content.
RelativeLayout - Child views are arranged relative to each other or o its bounds.
LinearLayout - Its children are arranged in a single direction either vertically or horizontally.
GridLayout - children arranged in a grid in any direction depending on their weight.
ScrollView - holds only one child view and allows you to scroll up or down.
ListView, RecyclerView - displays a list of items
ViewPager - allows you to scroll horizontally page through individual items e.g. when adding an intro slider.
How to create a layout with an overlaying toolbar.
ImageView is the first child since we want it to be behind the toolbar and its centerCropped so it always covers the entire barner area.
For scrollview, it is offset by adding 200dp padding(the height of the ImageView) but on scrolling the image will then be obscured by the listview.
The last child is the ToolBar which will sit on top of everything else with a transparent background.
Themes and Styles.
Creates a customized the look and feel of your app . Themes are used to add a collection of styles to an application’s element or even your whole application while a style is used to changes the appearance of a single UI element e.g. color and font.
