CodeHoon

mainActivity.kt

val videoUri = Uri.parse("android.resource://" + packageName + "/" + R.raw.first );
        binding.videoView.setVideoURI(videoUri);
        binding.videoView.start();
        binding.videoView.setOnCompletionListener {
            binding.videoView.start();
        }

activity_main.xml

<?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="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"

        />
</RelativeLayout>

ConstraintLayout -> RelativeLayout으로 변경.

VideoView를 삽입하고, 해당 내용을 작성한다.

=> VideoView Layout 아래부터 코드를 작성하면 동영상 레이아웃이 가장 하단에 쌓여,

z-index가 가장 낮은 순위가 된다.

포토샵으로 보자면, 동영상 레이아웃을 가장 아래에 놓고 위에 다른 레이아웃들을 쌓는 형태이다.

안녕하세요 상훈입니다.

Vue.js + tailwind.css 를 이용하여 모달창을 구현하도록 하겠습니다.

컴포넌트의 개념을 첨가하였으니, 양해바랍니다. (컴포넌트 넣을줄만 알면 됨)

<template >
  <div
    v-if="ModalDisplay"
    class="shadow-lg w-full h-full flex bg-black bg-opacity-70 justify-center align-middle items-center ">
      <div class="w-1/3 h-1/2 bg-white rounded relative">
        <div class="relative w-full">
            <div class="flex text-center items-center justify-center pt-2">
                <h1 class="font-bold text-2xl">모달창 레이아웃</h1>
            </div>
            <svg 
                @click="ModalDisplay = false" 
                id="closeModalBtn" xmlns="http://www.w3.org/2000/svg" class=" cursor-pointer h-10 w-10 absolute top-0 right-0 hover:text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </div>
        <div class="w-full pt-5">
            <hr>
            <p class="py-5 px-5 text-xl">
                안녕하십니까?<br>
                모달창입니다.
            </p>
        </div>
        <div class="w-full">
            <button
                @click="ModalDisplay = false" 
                class="absolute bottom-0 right-0 border border-solid round w-24 h-10  my-2 mx-3 hover:text-red-700 hover:border-red-500" >
            닫기</button>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            ModalDisplay: true,
        }
    }
}
</script>

<style>

</style>

v-if 와 @click 바인딩으로 해당 기능을 구현하였습니다.

ModalDisplay를 기본값으로 true로 해서 자동적으로 출력되어져있게 해놓고,
닫기 버튼이나, X버튼을 눌렀을 때 종료가 되게 하는 겁니다. 

svg를 button으로 감싸서 button으로 바꾸는게 용도에 맞아 좋아보입니다.

혹시나해서 App.vue 도 게시

<template>
  <Modal />

</template>

<script>
import Modal from './components/Modal.vue';

export default {
  components: {
    Modal,
  },
}
</script>

<style>

</style>