Bootstrap UI & supertooltips Demo

Transcription

1 Bootstrap UI & supertooltips Demo By St2654@nyu.edu Funky icons above are not swag, it s for educational purpose and would be used heavily in this chapter.

2 This chapter is designed to understand new UI trends which makes mobile application more intuitive and give user an amazing & rich UI experience. If you think you are geek and write amazing code, do implement great functionalities and UI doesn t seems an important skill for app development then you are advised to read this chapter to get insights how UI can change your app success ratio. And if you love UI you are welcome wholeheartedly. Is UI IMPORTANT? OFCOURSE, It adds beauty Optimize screen use Structure the content Engages user(most Important ) What will you learn in this chapter? We will go through two open source UI libraries 1) Android-Bootstrap 2) SuperToolTips Android-Bootstrap library is not an official library from Twitter. This project has been started by GitHub user bearded-hen and free to use utility even commercially. Yippee. Even you can fork the project and contribute to the project. This project as the name suggest provides Bootstrap like Button, EditText field, Fontawesome Text(with animation) and Thumbnails(need API level higher than or equal to 22) and many more to come. SuperToolTip is also open source discontinued project, is used for tooltip in project. Font Awesome As the name say it s an awesome open source font consist of customizable vector based icons. We will be heavily using this in our demo. I personally feel this as the best font to use for icons because they are just text and fast to load then png icons. (Font Awesome says their icons load 10x times faster than image icon).

3 Website Built with Bootstrap UI The above screenshot is a Bootstrap website template, which uses bootstrap intuitively. Gaze your concentration on symbols and menu which are highlighted with red box. The Revenue symbol with $ gives user more sense about the context. This is also true for the overflow menu. Lets see Whatsapp WhatsApp is simple and fast to use because it doesn t use image icons instead it uses its own icon font same as FontAwesome. FontAwesome is more powerful as it contains 519 icons.

4 Let s begin the tutorial Overview In this tutorial we will be building a Sign up form using Android-Bootstrap, SuperToolTip and Font Awesome Text. Below images are screenshot of the UI which we will be designing in this tutorial. Step 1: Create a new project with blank activity. Add the following library to build.gradle(app) compile 'com.beardedhen:androidbootstrap:+' //For Android-Bootstrap compile 'com.nhaarman.supertooltips:library:3.0.+' //For SuperToolTips and sync the dependencies.

5 Step 2 Open activity_main.xml and replace RelativeLayout with ScrollView as we are creating a form with many objects we need it for different screen size devices. Add below namespaces to ScrollView for resolving Bootstrap UI. xmlns:bootstrapui=" xmlns:fontawesometext=" xmlns:bootstrapbutton=" First, start with the form a) Under ScrollView, create a LinearLayout(Vertical). We will be working inside LinearLayout b) Now insert 4 EditText Field for Firstname, Lastname, and Password. c) Replace EditText with com.beardedhen.androidbootstrap.bootstrapedittext d) Now add a button and change Button type to com.beardedhen.androidbootstrap.bootstrapbutton e) Add bootstrapbutton:bb_icon_left="fa-user bootstrapbutton:bb_type="primary" to the Button

6 bootstrapbutton:bb_icon_left="fa-user provides an icon to the left side of the Button. fa-user is key for. To find more click on this link. [ bootstrapbutton:bb_type="primary" decides what type of color scheme would be applied to Button. You can try using default, primary, success, info, warning, danger, inverse in this field. [More information available from the Android-Bootstrap code. You can fork it on your machine.] Our form has been designed now with bootstrap UI. Step 3: On the top of Textfields inside the LinearLayout place a TextView. Now replace TextView with com.beardedhen.androidbootstrap.fontawesometext. This will help us put the FontAwesomeIcon. Now our app looks like this. Step 4: Putting SuperToolTip Place Tool Tip Frame at the top of the all objects inside LinearLayout. <com.nhaarman.supertooltips.tooltiprelativelayout android:id="@+id/activity_main_tooltipframelayout" android:layout_width="match_parent" android:layout_height="match_parent" />

7 Step 4: Replace ActionBarActivity with Activity. Again go to acton_main.xml and inside LinearLayout(vertical) add LinearLayout(Horizontal) to create customized ActionBar. a) Now add FontAwesomeText for the Logo b) TextView for Application Name c) Create an inner LinearLayout with gravity left and add three different FontAwesome icons. d) It should look like this. Step 5: Now let s do some coding. Open MainActivity.java class a) Implement View.OnClickListener and override onclick() method I have one onclick() method for all Fontawesome icon on action bar which invoke Toast message. Set this method to all the fontawesome icon or you can implement your own functionality. b) Add two method for ToolTip addtooltipview and welcometooltipview() welcometooltipview() method invokes ToolTip for 2 seconds. Call this method when app starts. addtooltipview() is general method which shows input text on given color background. On clicking the tooltip it disappears [implement setontooltipviewclicklistener method]. c) Now write a seprate onclick() method for SignUp button Where you do form validation and when form field is invalid just change its color by the below method. firstname.setstate(bootstrapedittext.textstate.danger); d) If form is invalid then call addtooltip with a warning message else with success message.

8 e) If Form is valid change the success button icon and color by below method. Now your program would be up and running with awesome Bootstrap UI and supertooltip. For more information on Bootstrap UI you can download the Sample code they provide and refer it. They also provide animations on your Fontawesome text. And if you want to build such UI framework then you can refer both SuperToolTip & Bootstrap UI sourcecode. Extendibility I like the icon button which can be used to extend the feature and reduce the pain of using png images. Issues Found a. There would be as many tool tip generated as many times you click on signup button. This can be fixed but due to time constraints didn t looked into it. You can give a try. b. When Fontawesome icon has animation they don t respond to onclick event. c. Issues can be reported on Github. If you like the tutorial then share it with your friend and community or you can write to me on st2654@nyu.edu

9 References