Add zoom in zoom out button on webview in android

Build app with Zoom in zoom Out plus Minus(+,-) button controls on WebView in android.

Zoom in , zoom out buttons are used to zoom on webView screen because there are so much websites on internet contain small content, images, so with the help of zoom in and zoom out controls application user can easily read them by tapping on + button on screen. So here is the complete step by step tutorial for Add zoom in zoom out button on webview in android

android-project-download-code-button

Note: Add internet permission on AndroidManifest.xml file.

<uses-permission android:name=”android.permission.INTERNET” /> 

How to Add zoom in zoom out button on webview in android.

Code for MainActivity.java file.

 package com.android_examples.com.webviewzoominoutbutton;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;


public class MainActivity extends Activity 
{
 WebView Webview;
 @Override
 protected void onCreate(Bundle savedInstanceState) 
 {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 Webview = (WebView)findViewById(R.id.webView1);
 WebSettings webSetting = Webview.getSettings();
 
 //This function enable Zoom in Zoom out Feature on WebView
 webSetting.setBuiltInZoomControls(true);

 
 Webview.setWebViewClient(new WebViewClient());
 Webview.loadUrl("https://google.com");
 }

 private class WebViewClient extends android.webkit.WebViewClient
 {
 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) 
 {
 return super.shouldOverrideUrlLoading(view, url);
 }
 }
 
}

Code for activity_main.xml layout file.

 <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:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.android_examples.com.webviewzoominoutbutton.MainActivity" >

 <WebView
 android:id="@+id/webView1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true" />

</RelativeLayout>

Code for AndroidManifest.xml file.

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.android_examples.com.webviewzoominoutbutton"
 android:versionCode="1"
 android:versionName="1.0" >

 <uses-sdk
 android:minSdkVersion="8"
 android:targetSdkVersion="21" />

 <uses-permission android:name="android.permission.INTERNET" />
 <application
 android:allowBackup="true"
 android:icon="@drawable/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>

Screenshots:

open google in webview Add zoom in zoom out button on webview in androidClick Here To Download Add zoom in zoom out button on webview in android project.

Leave a Reply

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