Instagram UI Design with Nativescript (part 1)
NativeScript is an awesome framework to build truly mobile native app using Javascript, TypeScript, Angular2 or Vuejs.
You can find out more about the benefits of using Nativscript for your new killer app on their website.
In this post I will show you how to use NativeScript’s UI components with the power of CSS to build awesome user interface for your next Android or IOS app.
Objective
Clone Instagram using Nativescript UI components.
Folder Stucture
your-project/
├── app
└── assets
├── images
├── css
└── components
├── // all app components
└── modules
├── app.module.ts
└── pages
├── // all app pages
└── routes
├── app.routing.ts
Let’s Get started
tns create nativescript-instagram-clone --ng
You can use your preferred IDE or Text Editor(WebStorm, visual studio code, sublime, atom…) to edit files of this project, My choice is sublime.
Create a Login Screen as the Default Application Screen
The first screen your user is going to see when they sign into their application will be a screen asking them to sign in. This should give us a starting point for things to come.
If you’re on a Mac or Linux computer, execute the following commands:
touch app/components/login.component.ts
touch app/pages/login.html
touch app/assets/css/login.css
The above commands will create the essentials for the login component. If you’re on a Windows machine, create those files and directory however you see fit.
We’re going to start developing this component by working with our TypeScript logic. Open the project’s app/components/login.component.ts file and include the following code:
import { Page } from "ui/page"
import { Component } from "@angular/core";
@Component({
selector: "ns-app",
templateUrl: './pages/login.html',
styleUrls: ['./assets/css/login.css']
})
export class LoginComponent {
constructor
(
private page: Page
)
{
this.page.actionBarHidden = true;
}
}
Now let’s look at the HTML that goes with our TypeScript logic. Open the project’s app/components/pages/login.html and app/assets/css/login.css files and include the following markup receptively:
<GridLayout class="login-page" columns="*" rows="30,*,60">
<StackLayout col="0" row="0" class="login-page-language-con">
<!-- <Label text="Label 1"></Label> -->
</StackLayout>
<StackLayout col="0" row="1" class="login-page-input-con">
<Image class="page-logo" src="~/assets/images/logo.png"></Image>
<GridLayout class="form-component" columns="*" rows="80,80,80, *, 80">
<StackLayout class="form-component-input-con" text="Label 1" col="0" row="0">
<TextField class="form-component-input-con-input" hint="Phone number, email, username"></TextField>
</StackLayout>
<StackLayout class="form-component-input-con" text="Label 1" col="0" row="1">
<TextField class="form-component-input-con-input" secure="true" hint="Password"></TextField>
</StackLayout>
<Button class="form-component-input-con-button" col="0" row="2" text="Log In"></Button>
<StackLayout class="form-component-input-con-no-boder" col="0" row="3">
<StackLayout class="form-component-input-con-forget-login-con">
<Label class="form-component-input-con-forget-login-con-lable" text="Forget your login details? "></Label>
<Label class="form-component-input-con-forget-login-con-lable-bold" text="Get help siging in."></Label>
</StackLayout>
<GridLayout columns="*, 50, *" rows="*" class="line-con">
<Label col="0" row="0" text="" class="line-con-line"></Label>
<Label col="1" row="0" text="OR" class="line-con-text"></Label>
<Label col="2" row="0" text="" class="line-con-line"></Label>
</GridLayout>
</StackLayout>
<GridLayout columns="70, *" rows="*" col="0" row="4" class="button-type-con">
<Image col="0" row="0" class="button-type-con-image" src="~/assets/images/fb-logo.png"></Image>
<Label col="1" row="1" text="Log in as @dev_emeka" class="button-type-con-text"></Label>
</GridLayout>
</GridLayout>
</StackLayout>
<StackLayout col="0" row="2" class="login-page-footer">
<Label horizontalAlignment="center" class="login-page-footer-lable" text="Don't have an account? "></Label>
<Label class="login-page-footer-lable-bold" text="Sign Up"></Label>
</StackLayout>
</GridLayout>
Open the project’s app/assets/css/login.html
.login-page {
background-color: #fff;
}
.login-page-input-con {
}
.page-logo {
width: 200;
margin-top: 30;
}
.form-component {
padding: 30;
}
.form-component-input-con{
border-radius: 5;
border-style: solid;
border-width: 1;
border-color: #c0c0c0;
margin-bottom: 18;
background-color: #fafafa;
}
.form-component-input-con-no-boder{
margin-bottom: 18;
}
.form-component-input-con-input{
border-style: solid;
background-color: transparent;
margin-top: 7;
margin-left: 15;
border-color: transparent;
}
.form-component-input-con-button {
background-color: transparent;
border-color: #3E99ED;
border-style: solid;
color: #3E99ED;
border-width: 1;
margin-bottom: 18;
border-radius: 5;
}
.form-component-input-con-forget-login-con {
orientation: horizontal;
padding-left: 15;
font-size: 16;
}
.form-component-input-con-forget-login-con-lable-bold {
font-weight: bold;
}
.line-con {
margin-top: 10;
}
.line-con-line {
border-width: 0;
border-style: solid;
height: 1;
background-color: gray;
}
.line-con-text {
text-align: center;
font-size: 20;
margin-top: 10;
font-weight: bold;
}
.button-type-con {
background-color: #3E99ED;
margin-bottom: 18;
border-radius: 5;
orientation: horizontal;
}
.button-type-con-image {
margin-left: 100;
width: 30;
}
.button-type-con-text{
margin-left: 40;
margin-top: 17;
font-weight: bold;
font-size: 20;
color: #fff;
}
.login-page-footer {
border-color: gray;
border-width: 1;
border-style: solid;
border-right-color: transparent;
text-align: center;
orientation: horizontal;
font-size: 17;
}
.login-page-footer-lable {
vertical-align: center;
horizontal-align: center;
margin-left: 80;
}
.login-page-footer-lable-bold {
vertical-align: center;
horizontal-align: center;
font-weight: bold;
}
Clone this repo to run the above app yourself.
Would love to hear your feedback and thoughts here below and in the example repo.
Hope you’ll find this useful!
