Build Web Application WebView Android Studio – Android Developer

Please log in or register to like posts.
News

Build Web Application WebView Android Studio – Android Developer

WebView Android Studio

WebView Android Studio

Hi android developers welcome, in this post i’m going to show you how to make a web based android app using Web View. you can read more android development tutorials from android studio. If you want to deliver a web application (or just a web page) as a part of a client application, you can do it using WebView.  The android class web view allow you extension to output a website self. it’s look like a android browser apps. here you can make new activity for each layout of your website output also. android activity is the great solutions for making valuable and important layout.

WebView is a view that display web pages inside your application. You can also specify HTML string and can show it inside your application. WebView makes turns your application to a web application.

In order to add WebView to your application, you have to add <WebView> element to your xml layout file. Its syntax is as follows −

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/webview"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
/>

you can make a webview class reference of this view in Java file. android xml file also running with the .java files. if you edit a java file with the right code, it will be working. to get a reference, create an object of the class WebView.

WebView browser = (WebView) findViewById(R.id.webview);

you can use the LoadURL for your website address like this below code.

browser.loadUrl("http://www.howtrick.com");

In order to load a web url into the WebView, you need to call a method loadUrl(String url) of the Web View class, specifying the required url. if you click any link from this web view clients it can’t working, because of we need to configure our own client loading inside in the webpage by following this below code.

private class MyBrowser extends WebViewClient {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      view.loadUrl(url);
      return true;
   }
}

if your application provides data to the user that always requires an Internet connection to retrieve data, such as email. In this case, you might find that it’s easier to build a Web View in your Android application that shows a web page with all the user data, rather than performing a network request, then parsing the data and rendering it in an Android layout.when you create a new application with name anything of your choice, you need to modify your src/MainActivity.java file with the code below. read this code and use it on your application.

package com.howtrick.android-studio.webview;
import android.app.Activity;
import android.os.Bundle;

import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;


public class MainActivity extends Activity  {
   Button b1;
   EditText ed1;

   private WebView wv1;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      b1=(Button)findViewById(R.id.button);
      ed1=(EditText)findViewById(R.id.editText);

      wv1=(WebView)findViewById(R.id.webView);
      wv1.setWebViewClient(new MyBrowser());

      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            String url = ed1.getText().toString();

            wv1.getSettings().setLoadsImagesAutomatically(true);
            wv1.getSettings().setJavaScriptEnabled(true);
            wv1.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
            wv1.loadUrl(url);
         }
      });
   }

   private class MyBrowser extends WebViewClient {
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
         view.loadUrl(url);
         return true;
      }
   }
}

above code you need to ignore some code from to below example.

package com.example.sairamkrishna.myapplication;
import android.app.Activity;
import android.os.Bundle;

now open res/layout/activity_main.xml from your android studio and past or modify this below code.

<?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" android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   <TextView android:text="WebView" android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/textview"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="HoTrick.Com"
      android:id="@+id/textView"
      android:layout_below="@+id/textview"
      android:layout_centerHorizontal="true"
      android:textColor="#ff7aff24"
      android:textSize="35dp" />
      
   <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/editText"
      android:hint="Enter Text"
      android:focusable="true"
      android:textColorHighlight="#ff7eff15"
      android:textColorHint="#ffff25e6"
      android:layout_marginTop="46dp"
      android:layout_below="@+id/imageView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_alignRight="@+id/imageView"
      android:layout_alignEnd="@+id/imageView" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Enter"
      android:id="@+id/button"
      android:layout_alignTop="@+id/editText"
      android:layout_toRightOf="@+id/imageView"
      android:layout_toEndOf="@+id/imageView" />
      
   <WebView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/webView"
      android:layout_below="@+id/button"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:layout_alignParentBottom="true" />
      
</RelativeLayout>

you can add images or button editing the @id of image or button.after you done, go to res/values/string.xml file and open it via webview android studio then copy past the below code.

<resources>
   <string name="app_name">My Application</string>
</resources>

Following is the content of AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.howtrick.android-studio.webview" >
   <uses-permission android:name="android.permission.INTERNET" />
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
         
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      
      </activity>
      
   </application>
</manifest>

congratulations…! you are done now. you can visit any website from your webview android studio application that was created before sometimes ago. now run this app and test it’s working or not.

 

Note: This Source Code Required Editing From Your Configurations. Each Computer Input and Text Can’t Be Match, So You Need To Edit Some Of Code.

Nobody liked ?

Leave a Reply

Your email address will not be published. Required fields are marked *