Ads

How to convert a website into android app inside Android studio | part 2/3

In the part I of this tutorial, we made a simple android webview app that launches a website. In this part we are going to add 3 buttons(goback,refresh and go-forward buttons) to our android app. then users can visit all webpages of our website as they want. here is the screenshot of what we are going to develop.

ok, let us add some buttons to our layout file. open activity_main.xml and add this code just below Webview tag. then re-arrange views to make them more clear and responsive.

<Button
    android:id="@+id/back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:text="back"
    android:onClick="goback"/>

<Button
    android:id="@+id/refresh"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="refresh"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:onClick="refresh"/>

<Button
    android:id="@+id/forward"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/refresh"
    android:text="forward"
    android:onClick="goforward"/>

here we are using onClick attribute to set the eventHandler for each buttons. the values we are passing are the names of our methods to be called when the button is clicked. we gonna create these methods inside MainActivity.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.webviewapp.MainActivity">

    <WebView
        android:id="@+id/mywebview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_above="@+id/back"
        android:layout_alignParentTop="true" />

    <Button
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:text="back"
        android:onClick="goback"/>

    <Button
        android:id="@+id/refresh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="refresh"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:onClick="refresh"/>

    <Button
        android:id="@+id/forward"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/refresh"
        android:text="forward"
        android:onClick="goforward"/>

</RelativeLayout>

then go to MainActivity.java and write methods for all 3 buttons.

1. for refresh button:
public void refresh(View v){
    webview.reload();
}
2. for gobackbutton:
public void goback(View v){
    if (webview.canGoBack()){
        webview.goBack();    }
}
3. for go forward button:
public void goforward(View v){
    if (webview.canGoForward()){
        webview.goForward();    
    }
}

since we have go-back button, we don't need if else conditions inside onBackPressed() method. Now, we are about to implement simple alert dialog when a user tries to close the app by pressing back key. this is what we are going to create...

the code
    public void onBackPressed(){
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("are you sure?");
        builder.setMessage("do you wanna close the app?");
        builder.setCancelable(false);
        builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        finish();
                    }
                });
        builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        dialog.cancel();
                    }
                });
        AlertDialog alert = builder.create();
        alert.show();
    }

build alert dialog.
set title and message of alertdialog
set to not be canceled by clicking anywhere outside the dialogbox.
if a user chooses yes, close/finish the app. else cancel the alertDialog.
here is the full source code of MainActivity.java

2. MainActivity.java


package com.example.webviewapp;

import android.content.DialogInterface;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webview = (WebView) findViewById (R.id.mywebview);
        webview.setWebViewClient(new WebViewClient());
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("https://orosoftblog.blogspot.com/");

    }

    public void refresh(View v){
        webview.reload();
    }
    public void goback(View v){
        if (webview.canGoBack()){
            webview.goBack();
        }
    }
    public void goforward(View v){
        if (webview.canGoForward()){
            webview.goForward();
        }
    }

    @Override
    public void onBackPressed(){
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("are you sure?");
        builder.setMessage("do you wanna close the app?");
        builder.setCancelable(false);
        builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        finish();
                    }
                });
        builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        dialog.cancel();
                    }
                });
        AlertDialog alert = builder.create();
        alert.show();
    }

}


this is it. in the next part we will add some new features to the app. and we'll redesign the layout. you can grab the source code from github using this link. github.com/fuadfmb

Post a Comment

0 Comments