From f82e725d5893aeeed1a00ed1a97805200f034edc Mon Sep 17 00:00:00 2001 From: karrar mohammed Date: Tue, 14 Mar 2023 19:25:27 +0300 Subject: [PATCH 1/2] refactor media horizontal item --- .../ui/composable/MediaHorizontalItem.kt | 99 +++++++++++++++++++ .../karrar/movieapp/ui/main/StartActivity.kt | 12 ++- .../com/karrar/movieapp/ui/ui/theme/Color.kt | 4 +- 3 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt diff --git a/app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt b/app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt new file mode 100644 index 00000000..768c8142 --- /dev/null +++ b/app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt @@ -0,0 +1,99 @@ +package com.karrar.movieapp.ui.composable + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.karrar.movieapp.R +import com.karrar.movieapp.ui.search.mediaSearchUIState.MediaUIState +import com.karrar.movieapp.ui.ui.theme.HorizontalMediaCardBackground +import com.karrar.movieapp.ui.ui.theme.Yellow + +@Composable +fun MediaHorizontalItem( + mediaUIState: MediaUIState, + modifier: Modifier = Modifier, +) { + //fix text font, size and color + Row( + modifier = modifier + .padding(16.dp) + .fillMaxWidth() + .height(80.dp) + .clip(RoundedCornerShape(8.dp)) + .background(HorizontalMediaCardBackground) + ) { + Image( + painter = painterResource(id = R.drawable.chris_evans), + contentDescription = null, + modifier = Modifier + .width(142.dp) + .fillMaxHeight(), + contentScale = ContentScale.Crop + ) + + Column( + modifier = Modifier + .fillMaxHeight() + .padding(horizontal = 16.dp, vertical = 8.dp), + verticalArrangement = Arrangement.SpaceBetween + ) { + Text( + text = mediaUIState.mediaName, + color = Color.White + ) + + Row(modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween) { + + Icon( + painter = painterResource(id = R.drawable.ic_star_small), + contentDescription = null, + tint = Yellow + ) + + Text( + text = mediaUIState.mediaVoteAverage.toString(), + color = Yellow, + modifier = Modifier + .weight(1f) + .padding(start = 8.dp) + ) + + Text( + text = mediaUIState.mediaReleaseDate, + color = Color.White, + ) + } + } + + } + + +} + + +@Preview +@Composable +private fun Preview() { + MediaHorizontalItem( + mediaUIState = MediaUIState( + 23, + "Avengers", + "imageUrl", + "imageUrl", + 9.8f, + "2012" + ) + ) +} \ No newline at end of file diff --git a/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt b/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt index 1986701c..bc16c97e 100644 --- a/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt +++ b/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt @@ -10,6 +10,8 @@ import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview +import com.karrar.movieapp.ui.composable.MediaHorizontalItem +import com.karrar.movieapp.ui.search.mediaSearchUIState.MediaUIState import com.karrar.movieapp.ui.ui.theme.MovieAppTheme class StartActivity : ComponentActivity() { @@ -22,7 +24,15 @@ class StartActivity : ComponentActivity() { modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { - Greeting("Android") + MediaHorizontalItem(mediaUIState = MediaUIState( + 23, + "Avengers", + "imageUrl", + "imageUrl", + 9.8f, + "2012" + ) + ) } } } diff --git a/app/src/main/java/com/karrar/movieapp/ui/ui/theme/Color.kt b/app/src/main/java/com/karrar/movieapp/ui/ui/theme/Color.kt index 953bd568..a60e2ee6 100644 --- a/app/src/main/java/com/karrar/movieapp/ui/ui/theme/Color.kt +++ b/app/src/main/java/com/karrar/movieapp/ui/ui/theme/Color.kt @@ -5,4 +5,6 @@ import androidx.compose.ui.graphics.Color val Purple200 = Color(0xFFBB86FC) val Purple500 = Color(0xFF6200EE) val Purple700 = Color(0xFF3700B3) -val Teal200 = Color(0xFF03DAC5) \ No newline at end of file +val Teal200 = Color(0xFF03DAC5) +val Yellow = Color(0xFFFDB92C) +val HorizontalMediaCardBackground = Color(0xFF13171D) \ No newline at end of file From fe2fdb20701ccedd4fb9ab7aa7781c19d17ff4e5 Mon Sep 17 00:00:00 2001 From: karrar mohammed Date: Thu, 23 Mar 2023 18:25:49 +0300 Subject: [PATCH 2/2] fix text color and size --- .../ui/composable/MediaHorizontalItem.kt | 22 +++++++------- .../karrar/movieapp/ui/main/StartActivity.kt | 30 ++----------------- 2 files changed, 14 insertions(+), 38 deletions(-) diff --git a/app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt b/app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt index 768c8142..56e686dc 100644 --- a/app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt +++ b/app/src/main/java/com/karrar/movieapp/ui/composable/MediaHorizontalItem.kt @@ -4,53 +4,53 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.MaterialTheme import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.karrar.movieapp.R import com.karrar.movieapp.ui.search.mediaSearchUIState.MediaUIState -import com.karrar.movieapp.ui.ui.theme.HorizontalMediaCardBackground -import com.karrar.movieapp.ui.ui.theme.Yellow +import com.karrar.movieapp.ui.theme.Typography +import com.karrar.movieapp.ui.theme.Yellow @Composable fun MediaHorizontalItem( mediaUIState: MediaUIState, modifier: Modifier = Modifier, ) { - //fix text font, size and color Row( modifier = modifier .padding(16.dp) .fillMaxWidth() - .height(80.dp) + .wrapContentHeight() .clip(RoundedCornerShape(8.dp)) - .background(HorizontalMediaCardBackground) + .background(MaterialTheme.colors.surface) ) { Image( painter = painterResource(id = R.drawable.chris_evans), contentDescription = null, modifier = Modifier .width(142.dp) - .fillMaxHeight(), + .height(80.dp), contentScale = ContentScale.Crop ) Column( modifier = Modifier - .fillMaxHeight() + .height(80.dp) .padding(horizontal = 16.dp, vertical = 8.dp), verticalArrangement = Arrangement.SpaceBetween ) { Text( text = mediaUIState.mediaName, - color = Color.White + color = MaterialTheme.colors.primaryVariant, + style = Typography.body2 ) Row(modifier = Modifier.fillMaxWidth(), @@ -65,6 +65,7 @@ fun MediaHorizontalItem( Text( text = mediaUIState.mediaVoteAverage.toString(), color = Yellow, + style = Typography.body1, modifier = Modifier .weight(1f) .padding(start = 8.dp) @@ -72,7 +73,8 @@ fun MediaHorizontalItem( Text( text = mediaUIState.mediaReleaseDate, - color = Color.White, + color = MaterialTheme.colors.secondaryVariant, + style = Typography.body2 ) } } diff --git a/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt b/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt index bc16c97e..38c06b54 100644 --- a/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt +++ b/app/src/main/java/com/karrar/movieapp/ui/main/StartActivity.kt @@ -6,13 +6,8 @@ import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface -import androidx.compose.material.Text -import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.tooling.preview.Preview -import com.karrar.movieapp.ui.composable.MediaHorizontalItem -import com.karrar.movieapp.ui.search.mediaSearchUIState.MediaUIState -import com.karrar.movieapp.ui.ui.theme.MovieAppTheme +import com.karrar.movieapp.ui.theme.MovieAppTheme class StartActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { @@ -24,30 +19,9 @@ class StartActivity : ComponentActivity() { modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { - MediaHorizontalItem(mediaUIState = MediaUIState( - 23, - "Avengers", - "imageUrl", - "imageUrl", - 9.8f, - "2012" - ) - ) + } } } } -} - -@Composable -fun Greeting(name: String) { - Text(text = "Hello $name!") -} - -@Preview(showBackground = true) -@Composable -fun DefaultPreview() { - MovieAppTheme { - Greeting("Android") - } } \ No newline at end of file