Loading...
Loading...
Loading...
Loading...

An Experience about Using Webview in Android Studio 3.0

View: 207    Dowload: 0   Comment: 0   Post by: admin   Category: Android   Fields: Other

Introduction

I am blogging on ngocminhtran.com (using WordPress platform). Like most websites, I want to write an Android application to help viewers have a lot of great experiences with my blog.

Background

I have used Android Studio 3.0 and referred to Android documents.  Layout of my blog can look like this:

Using the Code

If I want to hide HeaderNavigation and Footer, I just use a little bit of JavaScript:

document.getElementsByClassName('header')[0].style.display='none';
document.getElementsByClassName('navigation')[0].style.display='none';      
document.getElementById('footer').style.display='none';

I have used Webview to display my blog on Android devices. The following code will enable JavaScript for Webview and JavaScript code will run when Webview totally loaded:

final WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url)
            {
                 view.loadUrl("javascript:(function() { " +
                         "document.getElementsByClassName('header')[0].style.display='none'; "+
                         "document.getElementsByClassName('navigation')[0].style.display='none'; " +
                         "document.getElementById('footer').style.display='none'; " +
                        "})()");
            }
        });

After hiding some parts of blog’s layout, I want my blog to display on Android devices as follows:

To do this, I have added an ActionBar object:

final ActionBar actionBar = getSupportActionBar();
actionBar.setTitle("ngocminhtran.com");
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#333333")));

 And I have also added an XML file named menuapp.xml in menu folder contained in res folder.

menuapp.xml can look like this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/blog"

        android:title="@string/Blog"

        app:showAsAction="ifRoom"

        android:orderInCategory="1"

        />
    <item android:id="@+id/ebooks"

        android:title="@string/EBooks"

        app:showAsAction="ifRoom"

        android:orderInCategory="2"/>
</menu>

Overriding onCreateOptionsMenu method to add menu on ActionBar:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menuapp, menu);
    return true;
}

So far, if viewers select the Blog item, Webview will load all posts from Blog category:

If viewers select the Ebooks item, Webview will load ebooks from Ebooks category:

You notice that text color of selected item has changed from white to gray. These features can be archived by overriding onOptionsItemSelected method:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    final ActionBar actionBar = getSupportActionBar();
    final WebView myWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    View view = findViewById(item.getItemId());
    if (view != null && view instanceof TextView) {
        ((TextView) view).setTextColor( Color.DKGRAY );
    }
    switch (item.getItemId()) {
        case R.id.blog:

            myWebView.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url)
                {
                    view.loadUrl("javascript:(function() { " +
                            "document.getElementsByClassName('header')[0].style.display='none'; "+
                            "document.getElementsByClassName('navigation')[0].style.display='none'; " +
                            "document.getElementById('footer').style.display='none'; " +
                            "})()");
                }
            });

            myWebView.loadUrl("http://ngocminhtran.com/category/blog");
            actionBar.setDisplayHomeAsUpEnabled(false);
            view = findViewById(R.id.ebooks);
            if (view != null && view instanceof TextView) {
                ((TextView) view).setTextColor( Color.WHITE );
            }
            return true;

        case R.id.ebooks:

            myWebView.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url)
                {
                    view.loadUrl("javascript:(function() { " +
                            "document.getElementsByClassName('header')[0].style.display='none'; "+
                            "document.getElementsByClassName('navigation')[0].style.display='none'; " +
                            "document.getElementById('footer').style.display='none'; " +
                            "})()");
                }

            });
            myWebView.loadUrl(" http://ngocminhtran.com/category/ebooks");
            actionBar.setDisplayHomeAsUpEnabled(false);
            view = findViewById(R.id.ebooks);
            view = findViewById(R.id.blog);
            if (view != null && view instanceof TextView) {
                ((TextView) view).setTextColor( Color.WHITE );
            }
            return true;

        default:
            return super.onOptionsItemSelected(item);
    }
}

If viewers select either a post or an ebook, a X sign will occur at left side of ngocminhtran.com title:

To do this, we must respond to touch event by using setOnTouchListener method of Webview:

myWebView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.ic_close_white_24dp);
        return false;
    }
});

If the Ebooks item is selected, when viewers click the X sign, Webview will go back to the Ebooks category. If the Blog item is selected, when viewers click the X sign, Webview will go back to the Blog category. The features of the X sign can be archived by overriding onSupportNavigateUp method:

@Override
public boolean onSupportNavigateUp() {
    String url="" ;
    WebView myWebView = (WebView) findViewById(R.id.webview);
    WebBackForwardList mWebBackForwardList = myWebView.copyBackForwardList();
    int i =  mWebBackForwardList.getSize();
    while (i > 0){

        url = mWebBackForwardList.getItemAtIndex(i-1).getUrl();
        if (url.equals("https://ngocminhtran.com/category/blog/")||
                url.equals("https://ngocminhtran.com/category/ebooks/"))
        {
            ActionBar actionBar = getSupportActionBar();
            actionBar.setDisplayHomeAsUpEnabled(false);
            break;
        }

       i = i - 1;
    }
    myWebView.loadUrl(url);
    return true;
}

Points of Interest

If you have had Web developer skills before and you are working with Android programming skills now, Webviewis a connector to combine two skill sets together. I hope my article is helpful. You can download my code here.

An Experience about Using Webview in Android Studio 3.0

I am blogging on ngocminhtran.com (using WordPress platform). Like most websites, I want to write an Android application to help viewers have a lot of great experiences with my blog.

Posted on 17-04-2018 

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
File suggestion for you
File suggestion for you
File suggestion for you
Loading...
Loading...
Loading...
Loading...
File top downloads
File top downloads
File top downloads
File top downloads
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd