Android

안드로이드 기본 PIP 기능을 활용하여 간단히 개발한 플로팅 예시 입니다.

주의 사항

이 가이드에서 제공하는 코드는 기본적인 예시일 뿐이며, 실제 애플리케이션에 적용하기 전에 프로젝트 요구사항에 맞게 수정이 필요합니다. 또한, 이 코드는 'Jetpack Compose' 를 기반으로 작성되었으므로, 기존 XML 기반 UI와 다를 수 있습니다. 플로팅 뷰의 화면 비율은 9: 16을 반드시 유지하여 사용해주시길 바랍니다.

Android 예시

1. AndroidManifest.xml 에 아래와 같이 코드를 작성합니다.

package com.example.testfloating

import android.app.PictureInPictureParams
import android.os.Bundle
import android.util.Rational
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.testfloating.ui.theme.TestFloatingTheme

class PipActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestFloatingTheme {
                PipContent(onEnterPipMode = { enterPipMode() })
            }
        }

        // 화면이 시작되자마자 PiP 모드로 전환
        enterPipMode()
    }

    private fun enterPipMode() {
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            val aspectRatio = Rational(9, 16)  // PiP 모드의 비율 설정
            val pipParams = PictureInPictureParams.Builder()
                .setAspectRatio(aspectRatio)
                .build()
            enterPictureInPictureMode(pipParams)
        }
    }
}

@Composable
fun PipContent(onEnterPipMode: () -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Cyan), // 배경을 하늘색으로 설정
        contentAlignment = Alignment.TopStart // 버튼을 왼쪽 상단에 배치
    ) {
        Button(
            onClick = onEnterPipMode, // 버튼 클릭 시 외부에서 전달받은 함수 호출
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.White, // 버튼 배경색 하얀색
                contentColor = Color.Black  // 버튼 텍스트 색상 검정색
            ),
            modifier = Modifier
                .padding(10.dp)
                .size(80.dp, 40.dp) // 작은 크기의 버튼
        ) {
            Text(text = "축소", fontSize = 14.sp)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PipContentPreview() {
    TestFloatingTheme {
        PipContent(onEnterPipMode = {})
    }
}

1. 플로팅 뷰를 띄울 MainActivity.kt 에 아래와 같이 코드를 작성합니다.

package com.example.testfloating

import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import com.example.testfloating.ui.theme.TestFloatingTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            TestFloatingTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MainContent(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MainContent(modifier: Modifier = Modifier) {
    val context = LocalContext.current
    Box(
        modifier = Modifier
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(onClick = {
            // PipActivity를 시작하는 인텐트
            val intent = Intent(context, PipActivity::class.java)
            context.startActivity(intent)
        }) {
            Text(text = "Start PiP Activity")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun MainContentPreview() {
    TestFloatingTheme {
        MainContent()
    }
}

1. 플로팅 뷰를 지원하는 Activity 를 아래와 같이 코드를 작성합니다.

package com.example.testfloating

import android.app.PictureInPictureParams
import android.os.Bundle
import android.util.Rational
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.testfloating.ui.theme.TestFloatingTheme

class PipActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestFloatingTheme {
                PipContent(onEnterPipMode = { enterPipMode() })
            }
        }

        // 화면이 시작되자마자 PiP 모드로 전환
        enterPipMode()
    }

    private fun enterPipMode() {
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            val aspectRatio = Rational(9, 16)  // PiP 모드의 비율 설정
            val pipParams = PictureInPictureParams.Builder()
                .setAspectRatio(aspectRatio)
                .build()
            enterPictureInPictureMode(pipParams)
        }
    }
}

@Composable
fun PipContent(onEnterPipMode: () -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Cyan), // 배경을 하늘색으로 설정
        contentAlignment = Alignment.TopStart // 버튼을 왼쪽 상단에 배치
    ) {
        Button(
            onClick = onEnterPipMode, // 버튼 클릭 시 외부에서 전달받은 함수 호출
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.White, // 버튼 배경색 하얀색
                contentColor = Color.Black  // 버튼 텍스트 색상 검정색
            ),
            modifier = Modifier
                .padding(10.dp)
                .size(80.dp, 40.dp) // 작은 크기의 버튼
        ) {
            Text(text = "축소", fontSize = 14.sp)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PipContentPreview() {
    TestFloatingTheme {
        PipContent(onEnterPipMode = {})
    }
}

이 가이드는 안드로이드의 기본적인 PIP 기능을 활용하여 플로팅 뷰를 구현한 기본적인 예제이며, 실제 프로젝트에서는 요구사항에 따라 이 예제를 참고하여 코드를 수정 후 사용해야 합니다. 더 자세한 내용은 아래의 안드로이드 공식 문서를 참고해 주시기 바랍니다.

📱 플로팅 화면 동작 예시

---

참고 문서

AndroidManifest.xml 설정 및 PiP 모드 관련 설정

• 안드로이드 공식 문서에서는 Picture-in-Picture (PiP) 모드에 대한 설정 방법, 필요한 Activity 속성, android:configChanges 속성의 사용법 등을 설명합니다.

• 공식 문서 링크: PIP 모드를 사용하여 동영상 추가 | Views | Android Developers

Jetpack Compose를 사용한 UI 구성:

• Compose를 사용한 UI 구성에 대한 정보는 안드로이드 공식 문서에서 Jetpack Compose를 사용하는 방법으로 제공됩니다. Scaffold, Box, Button, IconButton 등 기본 UI 컴포저블에 대한 설명과 함께 다양한 레이아웃 구성 방법을 공식 문서에서 확인할 수 있습니다.

• 공식 문서 링크: Jetpack Compose UI App Development Toolkit - Android Developers