{"id":90,"date":"2017-02-02T06:28:40","date_gmt":"2017-02-02T06:28:40","guid":{"rendered":"http:\/\/abhiandroid.com\/createandroidapp\/?page_id=90"},"modified":"2021-08-21T04:26:40","modified_gmt":"2021-08-21T04:26:40","slug":"webview-android-app","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/createandroidapp\/webview-android-app","title":{"rendered":"WebView Android App: Convert Website Into App Tutorial In Android Studio"},"content":{"rendered":"

Have you ever tried converting any website into Android App? If not then let me tell you it is very easy and you will need to use WebView for doing that.<\/p>\n

You\u00a0just need the follow the tutorial step by step and application will be ready to go. An element used for that is Webview<\/strong>, add this element to your XML(layout) file or you can also add it in java class.<\/p>\n

Also for the good reader we have added Bonus Tip at the end of tutorial to improve look of your WebView App.<\/em><\/p>\n

[cp_modal id=”cp_id_b0a5f”]\"Download-Code\"[\/cp_modal]
\n\"Application
\nStep 1:<\/strong><\/span> The first step is to take a responsive website that you want to convert in android app important point to note is that it should be a responsive(mobile friendly) website. Here we are using our own\u00a0 Abhiandroid.com<\/a> to convert into android application using WebView which is Mobile responsive site.<\/p>\n

Step 2:<\/strong><\/span> Create a new project in Android Studio and name it WebViewApp.<\/p>\n

Step 3:<\/strong><\/span> Open res -> layout -> activity_main.xml (or) main.xml, create the application interface and add webview element to it.<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_main\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n   android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"com.example.webviewapp.MainActivity\">\r\n \r\n <WebView\r\n        android:id=\"@+id\/webview\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\" \/>\r\n<\/RelativeLayout>\r\n<\/pre>\n
Step 4:<\/strong> <\/span> Open src -> package -> MainActivity.java. Here firstly declare a webview variable, make JavaScript enable and load the URL of the website. See the whole code below.<\/p>\n
Important Note:<\/strong><\/span> You can replace our url in below code with any other url you want to convert it into Android App.<\/p>\n
package com.example.webviewapp;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n        import android.webkit.WebSettings;\r\n        import android.webkit.WebView;\r\n        import android.webkit.WebViewClient;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n    private WebView mywebView;\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        mywebView = (WebView) findViewById(R.id.webview);\r\n        WebSettings webSettings= mywebView.getSettings();\r\n        webSettings.setJavaScriptEnabled(true);\r\n        mywebView.loadUrl(\"https:\/\/abhiandroid.com\/\");\r\n    }\r\n}\r\n<\/pre>\n
Step 5:<\/strong> <\/span> Open AndroidManifest.xml file<\/strong> and add internet permission to it just after the package name. It is required because the App will load data directly from the website.<\/p>\n
<uses-permission android:name=\"android.permission.INTERNET\"><\/uses-permission><\/pre>\n
\"Adding
\nStep 6:<\/strong><\/span> After adding the permissions the application is complete but when you run you will find that it will open the links in browser not in application itself. Solution for this is add this line of code in your MainActivity.java<\/strong> class.<\/p>\n
 mywebView.setWebViewClient(new WebViewClient());<\/pre>\n
Step 7:<\/strong> <\/span>Now to add back buttons to the application to need to add following code to your MainActivity.java<\/strong> class.<\/p>\n
    public void onBackPressed() {\r\n        if(mywebView.canGoBack())\r\n        {\r\n            mywebView.goBack();\r\n        }\r\n\r\n        else{\r\n            super.onBackPressed();\r\n        }\r\n    }\r\n<\/pre>\n
Step 8:<\/strong> <\/span>Further if you want to remove the additional padding in the app, open activity_main.xml and in the layouts remove the padding(bottom, top, right, left). Here’s the final code.
\nactivity_main.xml<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_main\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"com.example.webviewapp.MainActivity\">\r\n\r\n\/\/ WebView Element\r\n    <WebView\r\n        android:id=\"@+id\/webview\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\" \/>\r\n<\/RelativeLayout>\r\n<\/pre>\n
MainActivity.java complete code:<\/strong><\/p>\n
package com.example.webviewapp;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.webkit.WebSettings;\r\nimport android.webkit.WebView;\r\nimport android.webkit.WebViewClient;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n    private WebView mywebView;\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        mywebView = (WebView) findViewById(R.id.webview);\r\n        WebSettings webSettings= mywebView.getSettings();\r\n        webSettings.setJavaScriptEnabled(true);\r\n        mywebView.loadUrl(\"https:\/\/abhiandroid.com\/\");\r\n        \/\/ Line of Code for opening links in app\r\n        mywebView.setWebViewClient(new WebViewClient());\r\n    }\r\n    \r\n\/\/Code For Back Button\r\n@Override\r\n    public void onBackPressed() {\r\n        if(mywebView.canGoBack())\r\n        {\r\n            mywebView.goBack();\r\n        }\r\n\r\n        else\r\n        {\r\n            super.onBackPressed();\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
Bonus Tip For WebView App:<\/strong><\/span> In addition if you want to remove the default action bar, see in image the blue top header. You just need to make a little change in styles.xml<\/strong> file.
\n\"Action
\napp -> res -> values -> styles.xml<\/strong><\/span>
\nJust change theme as NoActionBar. Below code will do<\/p>\n
 <style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\"><\/pre>\n
\n
Output:<\/strong><\/h4>\n
Now run the App and you will see WebView App of AbhiAndroid website. You can simply replace the url with any website url you want to convert into Android App.<\/p>\n
How to add progressBar in webview & convert website into advance android app<\/strong><\/h4>\n