Android Studio - WebView: barra di caricamento orizzontale

In questo articolo vedremo come aggiungere la barra di caricamento orizzontale nella parte alta della pagina web.

Per prima cosa occorre creare la ProgressBar (barra di caricamento) seguendo questi semplici passaggi:

1. Aprire la cartella res
2. Cliccare con il tasto destro sulla cartella drawable
3. Selezionare New
4. Selezionare Drawable resource file

5. Dare un nome al file ad esempio custom_progress
6. Cliccare sul pulsante OK per confermare

Una volta aperto il file custom_progress.xml inserire le seguenti righe di codice:

	<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/secondaryProgress">
	<clip>
	<shape>
	<corners android:radius="3dp"/>
	<solid android:color="@color/colorAccent"/>
	</shape>
	</clip>
	</item>
	<item android:id="@+id/progress">
	<clip>
	<shape>
	<corners android:radius="3dp"/>
	<solid android:color="@color/colorAccent"/>
	</shape>
	</clip>
	</item>
	</layer-list>

view raw custom_progress.xml hosted with ❤ by GitHub

Alla riga 9 e alla riga 18 è possibile selezionare qualsiasi colore definito nel file colors.xml oppure inserire direttamente un colore in formato esadecimale.
Una volta definito l'aspetto della ProgressBar bisogna creare il layout della nostra app inserendo queste righe di codice all'interno del file activity_main.xml

	<ProgressBar
	android:id="@+id/progressBar"
	style="@style/Widget.AppCompat.ProgressBar.Horizontal"
	android:layout_width="match_parent"
	android:layout_height="6dp"
	android:background="@android:color/transparent"
	android:max="100"
	android:progressDrawable="@drawable/custom_progress" />

view raw activity_main_cph1.xml hosted with ❤ by GitHub

Notare che alla riga 8 è stato assegnato il file drawable creato in precedenza

Ecco come si presenta il file activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	app:layout_behavior="@string/appbar_scrolling_view_behavior"
	tools:context=".MainActivity"
	tools:showIn="@layout/activity_main">
	<ProgressBar
	android:id="@+id/progressBar"
	style="@style/Widget.AppCompat.ProgressBar.Horizontal"
	android:layout_width="match_parent"
	android:layout_height="6dp"
	android:background="@android:color/transparent"
	android:max="100"
	android:progressDrawable="@drawable/custom_progress" />
	<WebView
	android:id="@+id/myweb"
	android:layout_width="match_parent"
	android:layout_height="match_parent" />
	</LinearLayout>

view raw activity_main_cph2.xml hosted with ❤ by GitHub

Ora bisogna passare alla scrittura del codice per gestire la ProgressBar e questo qui sotto è il codice da inserire nel file MainActivity.kt.

	// visualizzazione ProgressBar orizzontale all'avvio
	webview!!.webChromeClient = object : WebChromeClient() {
	//quando il Progress cambia
	override fun onProgressChanged(view: WebView?, newProgress: Int) {
	progressBar.progress = newProgress
	//quando il Progress arriva a 100 nascondi la ProgressBar
	if (newProgress == 100) {
	progressBar.visibility = View.INVISIBLE
	}
	super.onProgressChanged(view, newProgress)
	}
	}
	//resetta la ProgressBar
	progressBar.progress = 0
	// visualizzazione ProgressBar orizzontale durante la navigazione
	if(webview != null)
	{
	webview!!.webViewClient = object: WebViewClient(){
	override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
	progressBar.visibility = View.VISIBLE
	super.onPageStarted(view, url, favicon)
	}
	}
	}

view raw MainActivity_cph1.kt hosted with ❤ by GitHub

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialwebview11
	import android.graphics.Bitmap
	import android.os.Bundle
	import android.support.v7.app.AppCompatActivity
	import android.view.Menu
	import android.view.MenuItem
	import android.view.View
	import android.webkit.WebChromeClient
	import android.webkit.WebView
	import android.webkit.WebViewClient
	import kotlinx.android.synthetic.main.activity_main.*
	import kotlinx.android.synthetic.main.content_main.*
	class MainActivity : AppCompatActivity() {
	var webview: WebView? = null
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	setSupportActionBar(toolbar)
	webview = findViewById(R.id.myweb)
	webview!!.webViewClient = WebViewClient()
	webview!!.settings.javaScriptEnabled = true
	webview!!.webChromeClient = WebChromeClient()
	webview!!.settings.domStorageEnabled = true
	webview!!.settings.builtInZoomControls = true
	webview!!.settings.setSupportZoom(true)
	webview!!.overScrollMode = WebView.OVER_SCROLL_NEVER
	webview!!.settings.useWideViewPort = true
	webview!!.setInitialScale(1)
	webview!!.loadUrl("https://davidetech.blogspot.com")
	// visualizzazione ProgressBar orizzontale all'avvio
	webview!!.webChromeClient = object : WebChromeClient() {
	//quando il Progress cambia
	override fun onProgressChanged(view: WebView?, newProgress: Int) {
	progressBar.progress = newProgress
	//quando il Progress arriva a 100 nascondi la ProgressBar
	if (newProgress == 100) {
	progressBar.visibility = View.INVISIBLE
	}
	super.onProgressChanged(view, newProgress)
	}
	}
	//resetta la ProgressBar
	progressBar.progress = 0
	// visualizzazione ProgressBar orizzontale durante la navigazione
	if(webview != null)
	{
	webview!!.webViewClient = object: WebViewClient(){
	override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
	progressBar.visibility = View.VISIBLE
	super.onPageStarted(view, url, favicon)
	}
	}
	}
	}
	override fun onCreateOptionsMenu(menu: Menu): Boolean {
	// Inflate the menu; questo aggiunge elementi alla barra delle azioni se è presente.
	menuInflater.inflate(R.menu.menu_main, menu)
	return true
	}
	override fun onOptionsItemSelected(item: MenuItem): Boolean {
	// Gestisci i clic degli elementi della barra delle azioni qui.
	// La barra delle azioni gestirà automaticamente i clic sul pulsante Home / Su,
	// purché si specifichi un'attività principale in AndroidManifest.xml.
	return when (item.itemId) {
	R.id.action_settings -> true
	else -> super.onOptionsItemSelected(item)
	}
	}
	}

view raw MainActivity_cph2.kt hosted with ❤ by GitHub

Ecco un video dimostrativo

Download Project
Download file APK