Jetpack Compose Loading/How to load a YouTube video or YouTube Livestream channel to your Android application.

Moses Asiago — Mon, 27 Nov 2023 09:06:35 +0000

I recently got an Android job to develop a Local Church TV android application. My choice was to go with the latest tech stack on the Android application. One of the features they wanted be implemented was the YouTube live stream to be loaded into the app. I had to research the best way to implement it, and the library: implementation("com.pierfrancescosoffritti.androidyoutubeplayer:core:12.1.0") became handy in this. I will outline the steps you may follow to have your YouTube or video loaded into the Jetpack Compose Android application.

STEP 1

On your Android studio, left-hand side of the editor, open the project explorer, expand the Gradle folder to get to the build.gradle--Module:app as in the image below

open the file. I like separating my third-party dependencies from the default editor dependencies, so I will have the

// third-party dependencies implementation("com.pierfrancescosoffritti.androidyoutubeplayer:core:12.1.0") // end third-party dependencies loaded to the build.gradle file. Sync the project and test running the application on your device to confirm the import didn't break the application.

STEP 2

Create a composable, for this case, I have called it LiveTvScreen



@Composable
fun LiveTvScreen(
    videoId: String
) {
    val ctx = LocalContext.current
        AndroidView(factory = {
            var view = YouTubePlayerView(it)
            val fragment = view.addYouTubePlayerListener(
            object : AbstractYouTubePlayerListener() {
                override fun onReady(youTubePlayer: 
            YouTubePlayer) {
                    super.onReady(youTubePlayer)
                    youTubePlayer.loadVideo(videoId, 0f)
                }
            }
        )
        view
    })}

Then in your MainActivity load the LiveTvScreencomposable as below.



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LiveTvScreen("BJ3Yv572V1A")
           //'BJ3Yv572V1A' is the channel ID from 
           https://youtu.be/BJ3Yv572V1A
        }
    }
}

That it, when you run the application, it should show as the first image shown in this article. Thank you.

Jetpack compose creating a Column or Row composable with rounded corners on the edges; border-radius

Moses Asiago — Fri, 24 Nov 2023 07:14:48 +0000

I had a task recently of converting an Android application design made from Adobe XD to a functioning Android application in Jetpack Compose.
To achieve the above image with topStart and topEnd with rounded corners we follow the below steps.

STEP:

Create your main Row composable, and add two Columns inside it as the below code:



Row(
                modifier = Modifier
                    .align(CenterHorizontally)
                    .fillMaxWidth()
                    .padding(start = 10.dp, top = 5.dp, end = 10.dp, bottom = 0.dp)
            ) {
                Column(
                    modifier = Modifier
                        .clip(
                            RoundedCornerShape(
                                topStart = 20.dp,
                            )
                        )
                        .sizeIn(73.dp)
                        .background(Color(android.graphics.Color.parseColor("#E80000"))),
                ) {
                    Text(
                        style = LocalTextStyle.current.merge(
                            TextStyle(
                                color = Color(0xFFF67C37),
                                fontSize = 80.sp / LocalDensity.current.fontScale,
                                drawStyle = Stroke(width = 6f, join = StrokeJoin.Round)
                            )
                        ),
                        modifier = Modifier.padding(10.dp),
                        text = "LIVE",
                        color = Color.White,
                        fontSize = 39.sp / LocalDensity.current.fontScale,
                        fontFamily = FontFamily(Font(R.font.headlines_regular, FontWeight.Normal)),

                        )
                }
                Column(
                    modifier = Modifier
                        .clip(
                            RoundedCornerShape(
                                topEnd = 20.dp
                            )
                        )
                        .background(Color.White)
                        .padding(16.dp)
                ) {
                    Text(
                        text = "everyday",
                        color = Color(android.graphics.Color.parseColor("#FC830C")),
                        fontStyle = FontStyle.Normal,
                        fontSize = 40.sp / LocalDensity.current.fontScale,
                        fontFamily = FontFamily(Font(R.font.flood_std_regular, FontWeight.Normal)),
                        modifier = Modifier.align(Alignment.CenterHorizontally)
                    )
                    Row {
                        Column(modifier = Modifier.padding(5.dp)) {
                            Row() {
                                Image(
                                    painter = painterResource(id = R.drawable.ic_youtube),
                                    contentDescription = "youtube logo image",
                                    modifier = Modifier
                                        .size(32.dp, 32.dp)
                                )
                                Image(
                                    painter = painterResource(id = R.drawable.ic_facebook),
                                    contentDescription = "facebook logo image",
                                    modifier = Modifier.size(32.dp, 32.dp)
                                )
                            }
                            Column {
                                Text(
                                    text = "@Truelight Andrew",
                                    color = Color.Black,
                                    fontSize = 14.sp / LocalDensity.current.fontScale,
                                    fontFamily = FontFamily(
                                        Font(
                                            R.font.headlines_regular, FontWeight.Normal
                                        )
                                    ),
                                )
                            }
                        }
                        Column {
                            Image(
                                painter = painterResource(id = R.drawable.ic_facebook),
                                contentDescription = "truelight tv website address",
                                modifier = Modifier.size(32.dp, 32.dp)
                            )
                            Text(
                                text = "www.truelighttv.co.ke",
                                color = Color.Black,
                                fontSize = 14.sp / LocalDensity.current.fontScale,
                                fontFamily = FontFamily(
                                    Font(
                                        R.font.headlines_regular, FontWeight.Normal
                                    )
                                ),
                            )
                        }
                    }
                }
            }
        }

From the above code, notice the .clip( RoundedCornerShape(topStart = 20.dp)), this is the one responsible for making the rounded corner on the topStart of the Red Column and the topEnd of the white Column.clip(RoundedCornerShape(topEnd = 20.dp))

I hope this gives you what you wanted to achieve.cheers! Like and share

DEV Community: Moses Asiago

Jetpack Compose Loading/How to load a YouTube video or YouTube Livestream channel to your Android application.

STEP 1

STEP 2

Jetpack compose creating a Column or Row composable with rounded corners on the edges; border-radius

STEP: