The concept here is webview. We look at various webview examples and libraries.
Android WebView
Share
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
The concept here is webview. We look at various webview examples and libraries.
Oclemy
Android WebView
Android WebView Tutorial and Examples.
This is an android WebView tutorial and Examples.
A WebView is a view that displays web pages.
What is a WebView?
A WebView, as we’ve said, is a WebView is a view that displays web pages.
It is represented by the
WebViewclass. This class is much more powerful than you might think. Yet it is very easy and straighforward to use and provides you abstractions you build upon.It is this class that is the basis upon which you can create your own web browser or simply display some online content within your Activity. WebView makes use of the WebKit rendering engine to display web pages and includes methods t:
WebView is very powerful as it provides you with a way to write applications in languages like Javascript and the HTML markup. There are so many frameworks that make use of this capability, thus allowing you write your app in HTML5 technologies. You can even turn your website, like say a wordpress website into an android app.
WebView API Definition
WebViewis a concrete class residing in theandroid.webkitpackage. It derives from theandroid.widget.AbsoluteLayoutclass and implements several interfaces as shown below:Here’s it’s inheritance hierarchy:
java.lang.Object ↳ android.view.View ↳ android.view.ViewGroup ↳ android.widget.AbsoluteLayout ↳ android.webkit.WebViewWhy Webview?
WebView is probably one of the most practical, easy to use yet underused classes in android. This is because it basically allows you to create an android app using HTML, CSS and Javascript. I would understand if it wasn’t used so much if it couldn’t execute Javascript or render CSS. However it does all those.
This then provides with powerful capabilities as HTML, CSS and Javascript are easy to use, popular technologies powering the user interfaces of almost every web app or website you have ever visited. Moreover there are hundreds of frameworks/libraries for these technologies that provide powerful widgets and abstractions. These include jQuery, Vue.js, Angular, React.js, Bootstrap, materializecss, UIKit etc.
You can easiliy create a simple client-side web app that can interact with server side technologies like Node.js and PHP then place in your assets folder. Then use WebView to load it. You have to ensure Javascript is enabled however. This, I understand is not as powerful as having a full Java application written in Java or Kotlin or C#, however, for beginners, you would quickly bootstrap your first app that you can show friends as you continue your education.
Using WebView
Most of the time you will want to render online content in your webview. So in order for your Activity to access the Internet and load web pages in a WebView, you must add the
INTERNETpermissions to your Android Manifest file:Then in your layout add a
<WebView>in your layout, or set the entire Activity window as a WebView during onCreate():Once you’ve done that then you can load you webpage via the
loadUrl()method:// Simplest usage: note that an exception will NOT be thrown // if there is an error loading this page (see below). webview.loadUrl("http://camposha.info/");loadurl()will load our website from the url we supply. This is the most commonly used way.You can also load from an HTML string:
This basically means you write your HTML code inside a string. Then load it via the
loadData()method. This is suitable for loading websites with simple DOM(Document Object Model) structure.Quick WebView Examples and HowTo’s
Let’s look at quick howTos for our webview class. Then later on we will see how to write a full app.
1. Commonly used WebView settings
Here are some comminly used WebView settings. Let’s encapsulate them in a simple static method that we can then easily re-use.
// Commonly used WebViewSetting public static void initWebSetting(WebView webView) { WebSettings setting = webView.getSettings(); setting.setJavaScriptEnabled(true); setting.setAllowFileAccess(true); setting.setAllowFileAccessFromFileURLs(true); setting.setAllowUniversalAccessFromFileURLs(true); setting.setAppCacheEnabled(true); setting.setDatabaseEnabled(true); setting.setDomStorageEnabled(true); setting.setCacheMode(WebSettings.LOAD_DEFAULT); setting.setAppCachePath(webView.getContext().getCacheDir().getAbsolutePath()); setting.setUseWideViewPort(true); setting.setLoadWithOverviewMode(true); setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { setting.setAllowFileAccessFromFileURLs(true); } }That method is taking a
WebViewobject. We first obtain the webview settings via thegetSettingsmethod of theWebViewclass. Then we enable javascript via thesetJavaScriptEnabled()method. Most of these settings methods take in a boolean value to either enable or disable various settings.2. How to Create a Custom WebView
We want to create a custom webview that can be used in a NestedScrollView.
import android.content.Context; import android.support.v4.view.MotionEventCompat; import android.util.AttributeSet; import android.view.MotionEvent; import android.webkit.WebView; public class MyWebView extends WebView { public MyWebView(Context context) { super(context); } public MyWebView(Context context, AttributeSet attrs) { super(context, attrs); } public MyWebView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override public boolean onTouchEvent(MotionEvent event) { //Check pointer index to avoid -1 (error) if (MotionEventCompat.findPointerIndex(event, 0) == -1) { return super.onTouchEvent(event); } if (event.getPointerCount() >= 1) { requestDisallowInterceptTouchEvent(true); } else { requestDisallowInterceptTouchEvent(false); } return super.onTouchEvent(event); } @Override protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) { super.onOverScrolled(scrollX, scrollY, clampedX, clampedY); requestDisallowInterceptTouchEvent(true); } }1. Android WebView – Load From URL, Strings and Asset Folder
[center] Android WebView – Load From URL, Strings and Asset Folder [/center]
WebView is actually one of those classes that have existed in android since the beginning.
Added in API level 1, it resides in android.webkit package. It is used to display web content right within the activity. This makes it very powerful and can be used to build even a basic browser that works. It is still a view so we can simply drag it over from the pallete to our layout. It renders web pages using webkit rendering engine. In this example we use a webview to render web content from :
To load from url, you must android internet permission in the androidmanifest.xml. You can find more details about WebView here.
Screenshot
Android WebView Example
Common Questions this example explores
Tools Used
This example was written with the following tools:
No third party library was used in this project.
Lets jump directly to the source code.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest package="com.tutorials.hp.webviewer"> <uses-permission android_name="android.permission.INTERNET"/> ... </manifest>Build.Gradle
dependencies { implementation 'com.android.support:appcompat-v7:26.+' implementation 'com.android.support.constraint:constraint-layout:1.0.0-alpha7' implementation 'com.android.support:design:26.+' testImplementation 'junit:junit:4.12' }MainActivity.java
package com.tutorials.hp.webviewer; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); webView= (WebView) findViewById(R.id.myWebview); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { } }); } /* LOAD WEBSITE */ @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.urlID) { //LOAD FROM URL webView.loadUrl("http://camposha.info"); return true; }else if (id == R.id.assetsID) { //LOAD FROM ASSETS webView.loadUrl("file:///android_asset/Campo.html"); return true; }else if (id == R.id.stringID) { //LOAD FROM STRING String html="<html><title></title><body>" + "<h1><u>Programming Languages</u></h1>" + "Below are some languages check them out: " + "<ol>" + "<li>Java</li><li>C#</li><li>C++</li><li>Python</li><li>PHP</li><li>Perl</li>" + "</ol>" + "</body></html>"; webView.loadData(html,"text/html","UTF-8"); return true; } return super.onOptionsItemSelected(item); } }ActivityMain.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android_layout_width="match_parent" android_layout_height="match_parent" tools_context="com.tutorials.hp.webviewer.MainActivity"> <android.support.design.widget.AppBarLayout android_layout_width="match_parent" android_layout_height="wrap_content" android_theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android_id="@+id/toolbar" android_layout_width="match_parent" android_layout_height="?attr/actionBarSize" android_background="?attr/colorPrimary" app_popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> <android.support.design.widget.FloatingActionButton android_id="@+id/fab" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_gravity="bottom|end" android_layout_margin="@dimen/fab_margin" app_srcCompat="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>ContentMain.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout android_layout_width="match_parent" android_layout_height="match_parent" app_layout_behavior="@string/appbar_scrolling_view_behavior" tools_context="com.tutorials.hp.webviewer.MainActivity" tools_showIn="@layout/activity_main"> <WebView android_id="@+id/myWebview" android_layout_width="match_parent" android_layout_height="match_parent" android_layout_centerHorizontal="true" /> </android.support.constraint.ConstraintLayout>menu_main.xml”
<menu tools_context="com.tutorials.hp.webviewer.MainActivity"> <item android_id="@+id/action_settings" android_orderInCategory="100" android_title="@string/action_settings" app_showAsAction="never" /> <item android_id="@+id/urlID" android_title="URL" app_showAsAction="never" /> <item android_id="@+id/assetsID" android_title="Assets" app_showAsAction="never" /> <item android_id="@+id/stringID" android_title="String" app_showAsAction="never" /> </menu>Download
Conclusion.
We saw a simple android webview example. How to load webpages from online via url, from assets folder and from string data.