How I coded the iOS app UI for NativeScript Uplabs competition using Vue Js
The idea behind this post is to share my experience coding the Finances App UI for NativeScript Uplabs Competition, in addition to sharing my experience I have made it also as a guide for people new to NativeScript to try coding an UI and see how simple and easy is to build a Pure Native App for iOS and Android, using almost the same code base and with technology that you already know HTM/XML, CSS, and JS.
Click here to check out the Finances App submission that made it to the finalist Finance NativeScript Vue App — Uplabs
First thing, as you are aware NativeScript apps are built using web technologies CSS, JS and XML not HTML.
Note: I’ve used Vue JS but you can have the same UI built for NativeScript using JavaScript, TypeScript, and Angular.
The UI we would be building is based on the awesome Finances iOS app design by Alex Soi. I had to use a different font Quicksand as the one originally used by Alex was paid font :-)
As you can see Alex has laid out the UI components in a Perfect Grid, and I made use of NativeScript GridLayout and DockLayout to code Finances App UI.
Recommend LEARN {N} LAYOUTS to learn basic NativeScript Layouts. This should put some sense on how the NativeScript layouts works compared to the CSS layouts and grid. Any Twitter bootstrap fans here?
And the amazing Jen Looper blog post Demystifying NativeScript Layouts will set you in the right path, from here it’s on you Padawan practice by coding your own UI or hacking UI samples from NativeScript Marketplace. Myself I did both :-)
So let’s get started
Download the UI Design files from Uplabs here, you would need Sketch App to view and export images and icons used in the app. I have also uploaded the Icons, images and fonts in a zip file, for those who don’t have Sketch App.
Click here to download the assets in zip file.
Head to NativeScript Playground an awesome tool to get started without the need to install any additional development software or SDK for developing this iOS app. Recommend that you Login so that you can save your work, and each time you save, a new version is created, so it makes easy to revisit earlier builds, think of it as a mini git versioning, I find it very helpful.
Note: And I have added the link to the NativeScript Playground below each of the code block. Just click and follow instructions to preview on your Mobile.
Once you are there Select from any of the four [Angular, Vue.js, Plain TypeScript or Plain JavaScript] I selected Vue.js. From here on all the code example will be NativeScript-Vue based.
Let revisit the UI now with Grid overlays, it makes things slightly easy to understand and how we are going to plan our layout in code and what NativeScript components to use.
As you can see on a high level the app consists of 3 sections, top, middle and bottom docked all the way to the absolute bottom of the screen.
What’s up DockLayout
We could just stack them all in order of appearance and have the last item child horizontalAlignment set to bottom.
But NativeScript provides with DockLayout which serves our exact purpose so I went with it. The whole layout is wrapped inside <DockLayout>, think of this as the main wrapper we use in HTML like <section>.
Copy and paste the below code in your HelloWorld.vue template section.
Hit Save and click Preview. The app should look like the below screenshot, and congratulations you have just built your first pure native app with NativeScript.
This was my first step towards building the rest of the app. The most important part was figuring what NativeScript layout components to use and the grids, the number of rows and columns. Once I figured this out the rest of the code was less overwhelming to write. Remember from here on it’s going to be all CSS and JS that you already know from the web development.
The Dark Theme
Because he’s the hero Gotham deserves, but not the one it needs…
The Dark Knight
Alright now that we have the base layout figured out, let’s continue with adding a dark theme for our app. Again NativeScript have this already figured out we simply have to make use of the awesome dark scheme.
In your NativeScript Playground open and edit app.css, around line #13 update code to make use of dark CSS file.
The preview app will refresh to show the text in white color (previously black color text) this confirms that black theme is applied successfully.
The Navigator
For our app, we will not be using the NativeScript ActionBar, instead a simple 3 columns grid with icons to navigate between screens. Why? our app does not have features to navigate back and forth between parent and child screens. So we don’t need back buttons, titles, custom ActionBar and Status Bar color that you normally see on 90% of the apps.
With reference to our Grid overlay diagram, we need 1 row with 3 columns to place our 3 navigation icons. I have already sliced and diced the icons (download them here). Let’s upload them to our Playground by creating a “images” folder inside of the “app” folder.
To upload select the “images” folder, click the icon that looks like 3 vertical dots and click “Upload resources” follow the instructions to upload all 3 icon image files. Copy and paste the below code in your HelloWorld.vue template section to include the navigation icons.
Explaining the above code.
- We added a
GridLayoutwith 1 row and 3 columns where the first and last column width set to75and the middle column denoted with*makes use of the remaining space. - The grid has a class
.p-20set, this is nothing but a CSS helper class that sets padding 20 on all sides. Much like the helper class in Bootstrap 4. - In the Image we set the row and column properties to have them placed in the required order. Rows and columns order is 0 indexes based, meaning it starts with 0 just like in javascript / jQuery. So Icon one col is set to 0, Icon two col set to 1 and Icon three col set to 2.
- Even though we are not using the NativeScript ActionBar component we are using the CSS class
.action-barand.action-itemto style our navigation section. To learn more about this click here. - Image stretch property allows us to describe how content is resized to fill its allocated space, read more about stretching.
- Width and Opacity are CSS properties supported by NativeScript. Please note they don’t have measurement unit postfixed.
At the end of this step, our app should look like this.
Custom color, custom font, custom everything!
Now that we have the dark theme and navigation setup. Let’s continue adding the custom dark blue shade Cloud Burst background color and the custom Quicksand font download here if not already downloaded.
Let us quickly complete the following steps to set this up and move on to scrolling Transactions list.
Upload the font files by creating a “fonts” folder inside of “app” folder in your NativeScript playground. Select the “fonts” folder and upload the 2 font files.
Copy and paste the following CSS code in your HelloWorld.vue file replacing the current CSS styles.
These are simple and straightforward CSS properties, here are all the NativeScript Supported CSS properties.
Update the StackLayouts inside the <template>, what we have done is removed the backgroundColor property so that we can see the newly applied background color. And applied the CSS class .large and .medium to the <Label>. Save and Preview you should see something like this.
Tips: Did you notice how the font is declared, it’s to support both iOS and Android. You can learn more about it here Using Custom Fonts in a NativeScript App.
Today’s Spending
Continuing with the next section the one below the navigation, I am calling it spending because I can :-).
It’s a simple 2 rows and 2 columns NativeScript GridLayout with generous margin and padding. Nothing new that you have not already done before in web design. So let’s get the code for this.
Copy and paste the below code in your HelloWorld.vue template section to include the summary section.
The newly added section is between the <!-- Spending --> comment block. So what have we done here?
We have added a GridLayout with 2 rows and 2 columns, the columns have * “star” == greedy (takes all the space it can), this makes sure our columns width is adjusted as per the needs of the content. Neat right?
Next, the <Label/> has the relevant row and column set, remember rows and columns order is 0 indexes based. CSS class .large and .small to customize the font size and the Color property to set the relevant color as per UI Design. We have used a mix of CSS class and inline property.
CSS class .body and .text-right are NativeScript Text utility CSS class from the dark theme.
Note: We have added horizontalAlignment property to the navigation icons so that they are aligned left and right to the Spending section.
Save and hit Preview, your app should look like this
Fortune Tips not cookies
We will complete the Tip’s section first and then move on to the Scrollable Transactions section, the most important and challenging section in this UI, also remember its place as the last child item inside the <DockLayout>.
As always, let’s start with the code. Copy and paste this in your HelloWorld.vue template section.
So here’s what we have added to the code.
The Tips section is very simple 1 row and 2 columns layout, positioned at bottom of the <DockLayout>. This section has it’s own slightly darker version of the background color.
The left column has the “tip-chart-icon.png” image. Download it from here, and upload to the “images” folder.
Rest all it’s self-explanatory if you think otherwise please let me know in comments.
Save and Preview and your app should like this.
Finally, it’s all about Transactions honey!
Now to the final and most important section Transactions we will be using NativeScript scrollable ListView using JSON as the data source. So without much ado let’s get cracking.
Here is the completed XML <template> code, copy and paste this in your HelloWorld.vue template section.
And the javascript code with JSON data.
Do not fret it looks like a lot but it is not, the JavaScript just holds the JSON data and we have imported the RadListView a NativeScript Pro UI component.
Inside the RadListView Vue JS for loop is the actual template part that we will be focusing. It’s a NativeScript GridLayout with 3 rows and 2 columns. The first column with a fixed width of 100 and second * “Star” to fill the remaining space.
In the 1st row we have the “amount” in column 1 and the “name” in column 2. Each of these <Lablel> has their own style and CSS class applied.
The 2nd row has the relative human “date” in column 1 and the location “address” in column 2 and again each of these has their own style and CSS class applied to match the UI design.
The 3rd row is wrapped in Vue JS if else statement to add the bottom divider for all items in the list except the last item. Also, the border starts from column 2 leaving column 1 empty resulting in a nice looking iOS style list separator.
On second thought this is not so complicated, it’s again a simple GridLayout placed inside the ListView which loops through all the items in JSON data.
Phew, we have come to end of this article. Hit Save and Preview and this is how your screen should look like now.
Also, did you notice how smooth the scroll is, this is the Native app for you baby, not something you see in PhoneGap apps.
Thank you for reading, and I sincerely hope this has been somewhat helpful in getting you started with NativeScript.
Here is the link to the HelloWorld.vue file with completed code.
Also, I am planning to continue a part 2 and 3 of this articles that would cover the remaining 2 screens submitted for the NativeScript Uplabs Competition. Let me know if you would like to see them. The next two screens look like this.
Watch out for the links to the follow-up articles in this space.
Thanks again and Happy Coding, and remember the awesome and active NativeScript community is always there to help.
Thanks to excellent articles from Jen Looper, TJ Van Toll which helped me a lot when I was getting started. And also the YouTube Channel and webcasts.
