MockApp. Design Time
https://play.google.com/store/apps/details?id=com.crane.mockapp
Motivation
Traditionaly UI prototypes are created using great tools like zeplin, figma etc. Developer takes that assets and trying to recreate UI using Android layout XML. If something changed cycle has to be repeated. So we have two bunches of assets: produced by designing tool and Androdi XML that needs to be in keep sync. As we all know that the shorter the dev cycle the better.
So why we couldn’t experimenting with UI right in Android UI terms (Views)? When design assets become a real app assets, not just a nice pictures!
The challenge of this tool is to have one bunch of assets for design and production code.
Basics
There are 2 types of projects: local and internal
Local projects are created by you and stored in the file system of your device on path /sdcard/Documents/MockApp
Internal projects are used mainly for demonstration purposes. They are packed into application’s assets resource folder. You cannot change it. But able to copy-paste some views from internal project into your local project.
You can put your layouts into your application’s assets folder, inflate it and use them to build your UI. You can know how in the next article.
To create a layout it is the best if you have some knowledge about how Android Views are works.
Using Layout Editor
- one finger to rotate layout
- two finger (or two tap) to pan layout
- copy view from any layout and paste it into selected view container (highlighted with the yellow frame)
- use undo to dismiss lat operation
- view hierarchy: grey is the parent view, light-blue is sibling view, blue is the current selected view, sky-blue are child views
- select a view and set it’s properties
- add view to the selected view’s nearest parent container (highlighted with the yellow frame)
Basic containers
The key properties for any layout that has influence on how view will be positioned is:
- Size
- Gravity
- Margins & Padding
all samples below are here: basic_sample.zipFrameLayout
FrameLayout lay out its child views in a stack, with the most recently added child on top.
LinearLayout
If you want child view do not overlap each other use LinearLayout
LinearLayout could be: horizontal or vertical
Set child’s props width/height/weight to achieve desired position
Toolbar
Simple use is toolbar with menu items
…or you can add some other views
RecyclerView
Use RecyclerView to make a list of items
Set Items Padding props to control padding between items
Set spans count to make multi columns.
You can get verical or horizontal scroll
ViewPager & TabLayout
You can use ViewPager and TabLayout separately or bind it together
ScrollView (HorizontalScrollView)
ScrollView (or HorizontalScrollView) should have only one direct child. In general it would be LinearLayout with its height (or width) set to WRAP_CONTENT
How to use themes and colors
Colors can be static one you select from the palette or dynamic one depending on selected theme (theme colors).
Theme colors can be: primary (P50, P100, P200, …) or accent (A100, A200, …)
When you change theme on your Layout colors with prefix P… or A… are changed on every view automatically.
Special color codes such as TEXT_PRIMARY, TEXT_SECONDARY, DIVIDER, ICON_ACTIVE, ICON_INACTIVE will be changed as well based on parent’s background color. System will select light or dark version of the color.
How to make round corners & elevation
To make round corners set outline -> outline enabled=true, outline -> clip to outline=true and outline -> radius=8dp
To elevate view set its back color and set some value to elevation prop
How to make Ripple back
To hightlight user’s click on view assign RIPPLE to back color
How to tile background with image
You can assign image to backdround and optionally tile background with it
How to make a gradient background
You can get vertical or horizontal gradient
How to use nine-patch background
Nine patch is a png image with special markup for padding and stretching regions
You can create youw own nine patch using this great tool https://romannurik.github.io/AndroidAssetStudio/nine-patches.html
File name should be siffixed with *.9.png (i.e. myimage.9.png)
How to use BottomSheet as menu
Of couse you can use BottomSheet not only as menu (see internal project BottomSheet to see more examples). But this is a common case so it worth to be shown.
Step 1. Create a menu item
Step 2. Create bottom sheet (menu)
Step 3. Assign bottom sheet to main layout
You can control the height of the bottom sheet:
- set BS Layout -> Full screen=true to expand bottom sheet to full window. Set BS Size -> Top Margin=56dp to leave some space above
- set BS Layout -> Full scree=false. In this case bottom sheet will wrap its content (WRAP_CONTENT)
How to use AppBarLayout
CollapsingToolbarLayout is coming soon
How to make layout full screen and change colors of the status bar
Select Root element and set its Other -> Full Screen=true
Play with its StatusBar properties to set desired status bar appearance.
Note. When entire layout is full screen you still able to make individual views be placed below status bar. Select desired view and set its Other -> FitSystemWindow=true and this view will not be overlapped with status bar
How to reuse layouts
You can include layout you created in other layouts. Some kind of layout reusing. For instance, you can create some general purpose layout such as title or menu item etc. and use it everywhere.
You can change property of the included layout in place, but you cannot change its view hierarchy (add or remove views).
If you modify included layout that modifications will be applied to every layout that use it. Except properties that has already been modified.
Or you can just copy-paste from other layouts. In that case there will be no connection between them.
Thank you for reading. Your feedback is precious.
In the next article (MockApp. Code Time)will be described how to use it all in your own Android Studio project!
Take a look at the app created with MockApp. Entire UI designed in the MockApp. It brings good separation between business logic and UI.
