In the first part, we learned how to set up a cordova project. In this tutorial, we will learn to develop a Hybrid Android Mobile App from scratch, using Framework7.

We would be using the material theme of Framework7, supported for Android. Before we start, download the Kitchen Sink Material App from Github. Go through the files to get more clarity.

To start off, lets edit the content of index.html file. The reason for doing this is because Framework 7 provides two different templates; one for iOS and one for Android; since the default is iOS so we have to change the index.html file to Android theme. To do that, go to Apps Layout section and copy the code written under Basic Android/Material App Layout and paste it in the index.html file, while ensuring the previously written code is deleted entirely. The index.html should now look like this:

Once done, delete all other existing html files from www folder.  The files inside the www folder should look like this:

For starters, the index file is the starting point of any application and all the necessary JS and CSS files are loaded from here. Next, we will reference all JS and CSS files in our index.html. Search for <link rel=”stylesheet” href=”path/to/ and change path/to to css, and make sure that every CSS declaration looks like this <link rel=”stylesheet” href=”css/framework7.material.min.css”>. Similarly for JS, search for <script type=”text/javascript” src=”path/to and change path/to to js, and make sure that every JS declaration looks like this <script type=”text/javascript” src=”js/framework7.min.js”></script>. Post these changes the index.html should look like this:

Run Index.html to see the output. If all goes well we should see something like this. For development, I personally prefer Google Chrome, one can use any other browser of their choice. If you’re using Chrome, press F12 button to go to developer console.

We are all set to implement our design, For me I want my app to look like this. You can design your app in any way you want, all it takes is your vivid imagination.

The Navbar (short for Navigation bar) at the top of the screen and Toolbar at the bottom of the screen are two things which should be consistent throughout the app. For setting up the Toolbar and navbar visit toolbar docs and navbar docs section.

Let’s edit the navbar section, in the index file. Navbar in android material theme has three sections: navbar left, navbar right and navbar center. Since as per our design we would only be showing the title so we will change the value of navbar div=”center” to Maths Easy.

Now let’s edit the toolbar. By default, the toolbar for material design is displayed at the top, but our requirement is to display it at the bottom, so in order to achieve that, we have to add a pre-defined class to the toolbar div; toolbar-bottom. After that, we will add three titles just like we see in our design; Lessons, About and Contact. Also change the app title to Maths Easy. Post changes the index.html should look like this:

Run the app and it shoud look like this:

Lets put some icons in the toolbar alongside texts. For icons, visit the Framework7 icons section. To get started, we need to download two files from here, one is framework7-icons.css and the other is the entire fonts folder with 4 files inside it. Keep the css file inside www/css folder and fonts folder with its content inside www folder. Refrence the framework7-icons.css file inside the index.html file like  <link rel=”stylesheet” href=”css/framework7-icons.css”>. For icons, the title divs insde the toolbar should be like this

For icons, the title divs insde the toolbar should be like this <a href=”#” class=”link”><i class=”f7-icons size-22″>collection</i>Lessons</a>. For displaying icons framework7 gives a predefined class called f7-icons, apart from that we have another class called size-22, which keeps the size of the icons to 22 px. It is advisable to explore icons display section for more clarity. For lessons we have used the collection icon, similarly we can do this for others. Post changes, the index.html file should look like this:

Run the app:

As per our design, we would be displaying each lesson on different pages and would be accessing those pages via buttons from the index. For buttons visit Button docs section, and write the button codes inside the page-content div. Before writing the button codes remove other contents mentioned inside page-content div. Post the changes the HTML file should like this:

Run the app to see the changes:

As we can see the buttons are not properly aligned in the home screen, to fix that we will use custom CSS. Using the inspect element function in chrome developer console (Box and arrow icon) we can inspect the element we want to change and accordingly apply custom CSS. It is always advisable to use a separate class for making the changes rather than applying it on any predefined classes. Lets create a class homebuttons and write it  in every button’s div. As a good practice, the custom css should always be written in my-app.css file. Write the following css in www/css/my-app.css file:

Post changes the HTML file should look like this:

Lets run the app after applying custom css:

The buttons are now properly aligned, but still there are other elements that can be changed or enhanced via custom css but for now lets keep it as it is. Next is to create separate html pages for each of the lessons as well as for about and contact. The index page will be our Lessons page and we will link the respective pages to the respective buttons using a href tag. Post page creation the folder structure should look like this:

and the index.html like this:

To display mathematical expressions we would be using Mathjax. Mathjax is a javascript engine which displays Mathematical expressions in webpages. For Mathjax to work we have to import MathJax.js into our Index.html file, using <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML”></script>. We can get more details on this from their Docs section. To create the Maths expression, I used Hostmaths and wrote the maths expression like $$MathsExp$$ in the html page.

Let’s create any one lessons page and similarly we can create others. First, copy from <div data-page=index class=”page”>  up till its div closure from index.html and copy it to numbersystem.html. Make sure to change the value of data-page value to numbersystem, as it corresponds to page name and should be unique for every page. In the navigation bar of numbersystem a back button should be displayed. clicking on it will bring us back to the previous screen. <div class=”left”><a href=”index.html” class=”link”><i class=”f7-icons size-22″>chevron_left</i></a></div> inside navbar-inner class will do the job, rest all will be same for Navbar. No changes for Toolbar, it will be as it is. Inside the page-content section, we will be using cards to display our data. To know more, visit Card Docs section. We will be using Card Header and Card content . In the subpages we don’t have to call JS and CSS again, as this is taken care by Framework7. Post all the changes the numbersystem.html file should look like this:

Run the app and click on Number system:

The contents of the Header are not properly aligned and that is because we haven’t initialized the App with material specific behavior. With Framework7, we can pass parameters on app initialization which gives us hassle-free customization throughout the app. Visit Initialize App docs section for more info. For material specific behavior we will pass material parameter on app initialization. The material is of type boolean so we will write var myApp = new Framework7({material: true,}); in my-app.js file.

The second issue that we are facing is that the maths expressions are not getting loaded on the page. For that we have to visit the Mathsjax docs again. In the “Modifying Math on the page” section, it is mentioned that we have to initialize MathJax.Hub.Typeset() class on page initialization for dynamic web pages. I personally faced lots of challenges resolving this issue. So to make the change, again we will write myApp.onPageInit(‘*’, function () {MathJax.Hub.Typeset();}); in my-app.js file. We have given * because we will have Maths content on each page, so instead of initializing separately for every page, we did it once for all. So post these two changes, my-app.js file should look like this:

Run the App and the Numbersystem page should look like this:

Since we have successfully created one lesson, we can now copy the html code to other Lesson pages and change the content we want to display along with the data-page name.

Next we will create about and contact pages. These are different from our lessons page, so we will not be using cards here. Same as earlier, from numbersystem.html copy from page-content div to its closure to contact.html and under page-content div write the content under content-block div. We won’t be needing the back button on About and Contact pages, so make sure to remove that. Post the changes contact page should look like this:

On running the app, the contact page should look like this:

Similarly, create about page. Our app is nearly finished. Cross verify that all the buttons are pointing to right pages. Check the contents on each page and check for spelling mistakes. Once that’s done, we will create an apk file and run it on an Android device to check whether everything is working as expected.

To create the build, first of all, we need to install the latest versions of Java JDK and JRE. It’s available on official java website. After a successful install, save the paths for JDK and JRE bin folders in the system environment variables. Google, in case you have doubts regarding setting environment variables or post your queries here.

Next, we would be requiring Android SDK. There are two ways to install Android SDK. One, we can download it separately and secondly we can download and install it along with Android Studio. I personally prefer the second option as I have faced issues with the first option. Once SDK is downloaded, update its path to the environment variables. Google, if you’re facing any issues or post your queries here.

Once we are done with Java and Android SDK setup, add the Android platform to the project. Open CMD, go to the project Root folder and type in the command cordova platform add android.

To build the APK, run the command cordova build android and if everything goes well, we can see our apk file at \platforms\android\build\outputs\apk.

Copy the debug apk file on your android phone. Click on it to install. That’s it you’re done. Congratulations! You’ve created your first Android App.

For reference, I have uploaded the entire Project on Github. You can download it from here. In case you are getting stuck somewhere or have any doubts you can post them here. Hope you’ve liked this tutorial. Let me know in the comments on how you’re building your Android app.

-> For Help: https://muut.com/letsbuild/

-> Click Here to go the1st part of the tutorial.

-> Note: At the time of creating this tutorial, there was only one version of framework7. But few days before Framework7 v2 was launched. So to avoid any confusion let me clarify that this tutorial is based on Framework7 v1.

-> Recently My App Cool Websites got Published in Framework7 Showcase. Please install it and let me know if you liked it or not.

-> Update Logs:

• Update1[16 Jan 2018] – Updated all the links as per Framework7 v1.
• Update2[22 July 2018] – Added Framework7 Showcase Link.
• Update3[01 Apr 2019] – Updated Code Snippets.