Can we create Media Controls in Notification bar for Web Media Player in Android App?

Question

I have created app were i am using web-media-player by using below code.

    WebView webView = root.findViewById(R.id.webView1);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);

    if (!b1) {
        webView.setVisibility(View.GONE);
    } else {
        webView.setVisibility(View.VISIBLE);
        String URL1 = "http://xyz.in/web-player.html";
        webView.loadUrl(URL1);
    }

I want to put media controller on notification bar like below, is it possible for WebView?

Here is my application view -

Finn Marquardt · Answer 1 · 2019-10-22T12:34:16.183

yes its possible, you basically create the native components in your appbar.

Then in the listeners for these components you call a javascript function that controls the media javascript media player.

webView.evaluateJavascript("javascript: " +
    "setvolume(\"" + 12 + "\")", 
    null)

this would basically call a theoretical javascript function of the webview called "setvolume" with the value 12

everything else needs to be handled in javascript

the other way is also possible ie javascript calling native functions but this is a bit more involved.

here a link for more information: https://medium.com/@elye.project/making-android-interacting-with-web-app-921be14f99d8

edit:

the layout you could for example use:

<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="@color/mid_grey"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar2"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    app:layout_anchorGravity="center">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView25"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@drawable/pspdf__ic_sound" />

        <SeekBar
            android:id="@+id/seekBar"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:max="100"
            android:progress="25"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/imageView25"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</com.google.android.material.bottomappbar.BottomAppBar>

In your activity you have a listener on the seekbar so that when it changes you call the javascript function of the player in the webview

   SeekBar seekBar = this.findViewById(R.id.seekBar);

    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
            webview.evaluateJavascript(...); //call the javascript function set the volume to the new value
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });

you do the same for the other components you want to control via the bottom bar

thank you for response, could please elaborate about native components & listeners for these components on App Bar. Do you have any example? — VikaS GuttE, Oct 22 '19 at 11:45

Can we create Media Controls in Notification bar for Web Media Player in Android App?

1 Answers1