How to Convert Custom Website Design by Using Bootstrap into Android Application
http://www.viralandroid.com/2015/09/convert-custom-website-design-by-using-bootstrap-into-android-app.html
In this tutorial, I will show you a quick guide to convert a custom website designed by using bootstrap into android application. Converting a custom website into android app is very easy. If you have the good knowledge about web design then you can easily convert that webpage into android app. In this tutorial, I have used android studio as coding environment.
If you already have your own custom bootstrap website, you can use that, If you don’t have then you can download bootstrap website from here which I have used in this tutorial. After completion of download unzip car file and place it in your folder.
Related:
Implementing Navigation Back Feature to Android webview Application
How to Embed YouTube Video in Android webview
How to Load HTML Data/String on Android webview Application
Let’s start by creating a new android project to convert custom bootstrap website into android application with following information.
Application Name: Bootstrap to Android App
Company Domain: viralandroid.com
Package Name: com.viralandroid.bootstraptoandroidapp
Minimum SDK: Android 2.2 (API 8 Froyo)
First you have to add WebView in your xml activity file and give an id to it. After adding WebView in your xml file, activity_main.xml file looks like this:
res/activity_main.xml
To add website file, first you have to create assets folder in your app/src/main directory and copy and paste your custom bootstrap website or website that you downloaded in assets folder. Look at below screenshot.
Now, you have to load website file inside WebView. To load website from assets folder, you have to use loadUrl() method and enable JavaScript, which look like this:
src/MainActivity.java
You have done all things. Now, run your application by just clicking run button then you see your website as android app.
Congratulation! you have made your android app using bootstrap.
Create or Download a Bootstrap Website
If you already have your own custom bootstrap website, you can use that, If you don’t have then you can download bootstrap website from here which I have used in this tutorial. After completion of download unzip car file and place it in your folder.
Related:
Implementing Navigation Back Feature to Android webview Application
How to Embed YouTube Video in Android webview
How to Load HTML Data/String on Android webview Application
Create a new Android Project
Let’s start by creating a new android project to convert custom bootstrap website into android application with following information.
Application Name: Bootstrap to Android App
Company Domain: viralandroid.com
Package Name: com.viralandroid.bootstraptoandroidapp
Minimum SDK: Android 2.2 (API 8 Froyo)
Add WebView in XML Activity File
First you have to add WebView in your xml activity file and give an id to it. After adding WebView in your xml file, activity_main.xml file looks like this:
res/activity_main.xml
Add Website File inside Assets Folder
To add website file, first you have to create assets folder in your app/src/main directory and copy and paste your custom bootstrap website or website that you downloaded in assets folder. Look at below screenshot.
Load Website File in WebView
Now, you have to load website file inside WebView. To load website from assets folder, you have to use loadUrl() method and enable JavaScript, which look like this:
src/MainActivity.java
You have done all things. Now, run your application by just clicking run button then you see your website as android app.
Congratulation! you have made your android app using bootstrap.