Android: ein Video transparent erstellen mit VideoView, MediaPlayer und FrameLayout

Date 02.01.2021

Android: ein Video transparent erstellen mit VideoView, MediaPlayer und FrameLayout

Wie kann man in Android ein Video ein oder ausblenden?

Leider funktioniert die Durchsichtigkeit von .setAlpha(0.5f) nicht in Android VideoView und dem MediaPlayer.

Deshalb muss man einen Trick anwenden.

Man setzt ein FrameLayout als Maske davor und blendet dieses aus.

FrameLayout alphaView=findViewById(R.id.alphaView);
alphaView.setAlpha(1-alphaValue);

By java Code in activity.java

package com.example.demo_light;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.Toolbar;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {
    MediaPlayer mediaPlayer=null;

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

        //--< Hide Toolbar >--
        if (getSupportActionBar() != null) {
            getSupportActionBar().hide();
        }
        //--</ Hide Toolbar >--

        //--< Load Video >--
        VideoView videoView=findViewById(R.id.videoView);
        Uri video = Uri.parse("android.resource://" + getPackageName() + "/raw/" + R.raw.video01);
        videoView.setVideoURI(video);
        videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mediaPlayer=mp;
                mp.setLooping(true);
                videoView.start();
            }
        });
        //--</ Load Video >--

        //--< Change Volume by SeekBarLight >--
        TextView textViewOutputLight =findViewById(R.id.textViewOutputLight );
        SeekBar seekBarLight=findViewById(R.id.seekBarLight);
        seekBarLight.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                //int    alphaValue =(int)(((float)i/100)*255); //*< API11
                float alphaValue = (float) i / 100;
                textViewOutputLight.setText("Light=" + alphaValue + "%");

                FrameLayout alphaView=findViewById(R.id.alphaView);
                alphaView.setAlpha(1-alphaValue);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });
        //--</ Change Volume by SeekBarLight >--

        //--< Change Volume by SeekBar >--
        TextView textViewOutputVolume =findViewById(R.id.textViewOutputVolume );
        SeekBar seekBarVolume=findViewById(R.id.seekBarVolume);
        seekBarVolume.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                float volumeValue =(float)i/100;
                textViewOutputVolume.setText("Volume=" + i + "%");
                mediaPlayer.setVolume(volumeValue,volumeValue);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });
        //--</ Change Volume by SeekBar >--
    }
}

In the activity_main.xml

You need a VideoView and lay a FrameLayout above it

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <FrameLayout
        android:id="@+id/alphaView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:alpha="0"
        android:background="#000000"></FrameLayout>

    <TextView
        android:id="@+id/textViewOutputLight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Light=100%"
        android:height="40sp"
        android:width="200sp"
        android:textSize="22sp"
        android:layout_above="@+id/seekBarLight"
        />

    <SeekBar
        android:id="@+id/seekBarLight"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:progress="100"
        android:layout_above="@+id/textViewOutputVolume"
      />

    <TextView
        android:id="@+id/textViewOutputVolume"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Volume=100%"
        android:height="40sp"
        android:width="200sp"
        android:textSize="22sp"
        android:layout_above="@+id/seekBarVolume"
/>

    <SeekBar
        android:id="@+id/seekBarVolume"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:layout_alignParentBottom="true"
        android:progress="100"
        />

</RelativeLayout>