[Android] WebView ProgressBar Sample

WebView ProgressBar 구현

개요

ProgressBar

ProgressBar는 사용자에게 작업 진행률을 나타내는 사용자 인터페이스 컨트롤이다.
예를 들면 인터넷에서 파일을 다운로드하거나 업로드 할 때, 우리는 ProgressBar을 통해서 작업 진행 상황을 파악할 수 있다.
ProgressBar에 대한 자세한 내용은 다음을 참고하면 도움이 될 것이다.

안드로이드 프로그래스바

안드로이드 원형 프로그레스바 in Kotlin

안드로이드 막대 프로그레스바 구현 예제 in Kotlin

앱 설명

이 앱은 안드로이드에서 제공하는 WebView를 통해 페이지를 로드할 때, ProgressBar를 통해 사용자에게 실행중임을 나타낸다.
여기서는 2가지 ProgressBar를 사용한다.

• 진행중임을 나타내는 원형 ProgressBar (중앙)
• 진행률을 나타내는 막대 ProgressBar (상단)

앱은 간단하게 { 웹뷰, 버튼1, 버튼2 }로 구성되어 있다.

• 웹뷰는 기본적으로 블로그를 로드한다.
• 버튼1("GO TO HOME")는 블로그 페이지를 로드한다.
• 버튼2("GO TO GOOGLE")는 구글 홈페이지를 로드한다.
• 버튼 클릭을 통해 페이지를 로드할 때, 각각의 프로그레스를 사용자에게 노출한다.

실행 영상

Code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progressHorizontal"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="0dp"
        android:layout_height="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/progressHorizontal" />

    <ProgressBar
        android:id="@+id/progress_circular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnGoToHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GO TO HOME"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/btnGoToGoogle"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnGoToGoogle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GO TO GOOGLE"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btnGoToHome" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private val binding: ActivityMainBinding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)
        initWebView()
        binding.btnGoToGoogle.setOnClickListener {
            loadGoogle()
        }

        binding.btnGoToHome.setOnClickListener {
            loadHome()
        }
    }

    private fun initWebView() {
        binding.webView.run {
            webViewClient = object : WebViewClient() {
                override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
                    showProgress()
                    return super.shouldOverrideUrlLoading(view, url)
                }

                override fun onPageFinished(view: WebView?, url: String?) {
                    super.onPageFinished(view, url)
                    hideProgress()
                }
            }
            webChromeClient = object : WebChromeClient() {
                override fun onProgressChanged(view: WebView?, newProgress: Int) {
                    super.onProgressChanged(view, newProgress)
                    setProgressValue(newProgress)
                }
            }

            loadUrl("https://devgeek.tistory.com/")
        }
    }

    private fun showProgress() {
        binding.run {
            progressCircular.isVisible = true
            progressHorizontal.isVisible = true
            progressHorizontal.progress = 0
        }
    }

    private fun hideProgress() {
        binding.run {
            progressCircular.isVisible = false
            progressHorizontal.isVisible = false
        }
    }

    private fun setProgressValue(progress: Int) {
        binding.progressHorizontal.progress = progress
    }

    private fun loadGoogle() {
        binding.webView.loadUrl("https://google.com")
    }

    private fun loadHome() {
        binding.webView.loadUrl("https://devgeek.tistory.com/")
    }
}