Start migrating the previous layout to Compose

Create dimens
Create strings
Create Text extension functions

app/build.gradle

@@ -1,18 +1,22 @@
-apply plugin: 'com.android.application'
-apply plugin: 'kotlin-android'
+plugins {
+    id 'com.android.application'
+    id 'org.jetbrains.kotlin.android'
+}
 
 android {
-    compileSdkVersion 32
+    compileSdkVersion 33
     defaultConfig {
         applicationId "br.com.caiodev.newmaterialdesigntest"
-        minSdkVersion 16
-        targetSdkVersion 32
+        minSdkVersion 21
+        targetSdkVersion 33
         versionCode 1
         versionName "1.0"
+
+        vectorDrawables {
+            useSupportLibrary true
+        }
     }
-    buildFeatures {
-        viewBinding true
-    }
+
     buildTypes {
         release {
             minifyEnabled true
@@ -21,15 +25,52 @@ android {
     }
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_11
+        targetCompatibility JavaVersion.VERSION_11
+    }
+
+    kotlinOptions {
+        jvmTarget = JavaVersion.VERSION_11
+    }
+
+    buildFeatures {
+        compose true
+    }
+
+    composeOptions {
+        kotlinCompilerExtensionVersion "$compiler"
+    }
+
+    packagingOptions {
+        resources {
+            excludes += '/META-INF/{AL2.0,LGPL2.1}'
+        }
     }
 }
 
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation "androidx.appcompat:appcompat:$appCompat"
-    implementation "androidx.constraintlayout:constraintlayout:$constraintLayout"
-    implementation "com.google.android.material:material:$materialDesign"
-    implementation"org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion"
+
+    //Core
+    implementation "androidx.core:core-ktx:$core"
+
+    //Compose
+    implementation "androidx.compose.ui:ui:$composeCore"
+    debugImplementation "androidx.compose.ui:ui-tooling:$composeCore"
+    implementation "androidx.compose.ui:ui-tooling-preview:$composeCore"
+    implementation "androidx.compose.material:material:$composeCore"
+    implementation "androidx.compose.foundation:foundation:$composeCore"
+    implementation "androidx.compose.material:material-icons-core:$composeCore"
+    implementation "androidx.compose.material:material-icons-extended:$composeCore"
+
+    //Lifecycle
+    implementation "androidx.lifecycle:lifecycle-runtime-ktx:$viewModel"
+
+    implementation "androidx.activity:activity-compose:$activity"
+    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$viewModel"
+
+    testImplementation "junit:junit:$junit"
+    androidTestImplementation "androidx.test.ext:junit:$junitExt"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$espresso"
+    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$composeCore"
+    debugImplementation "androidx.compose.ui:ui-test-manifest:$composeCore"
 }

app/src/main/AndroidManifest.xml

@@ -21,4 +21,5 @@
             </intent-filter>
         </activity>
     </application>
+
 </manifest>

app/src/main/java/br/com/caiodev/newmaterialdesigntest/MainActivity.kt

@@ -1,40 +1,93 @@
 package br.com.caiodev.newmaterialdesigntest
 
+import android.content.res.Configuration
 import android.os.Bundle
-import androidx.appcompat.app.AppCompatActivity
-import androidx.core.content.ContextCompat
-import br.com.caiodev.newmaterialdesigntest.databinding.ActivityMainBinding
-import com.google.android.material.chip.Chip
-
-class MainActivity : AppCompatActivity() {
-
-    private lateinit var binding: ActivityMainBinding
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import br.com.caiodev.newmaterialdesigntest.extensions.textSizeResource
+import br.com.caiodev.newmaterialdesigntest.ui.theme.NewMaterialDesignTestTheme
+import br.com.caiodev.newmaterialdesigntest.ui.theme.Purple500
 
+class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        binding = ActivityMainBinding.inflate(layoutInflater)
-        setContentView(binding.root)
-        setupView()
+        setContent {
+            NewMaterialDesignTestTheme {
+                // A surface container using the 'background' color from the theme
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colors.background
+                ) {
+                    ComposeWidgets()
+                }
+            }
+        }
     }
+}
 
-    private fun setupView() {
-        setChipListener(binding.firstChip)
-        setChipListener(binding.chip)
+private const val PREVIEW_NAME = "Dark Mode"
 
-        binding.chipList.apply {
-            setHasFixedSize(true)
-        }
+@Preview(name = PREVIEW_NAME, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun DefaultPreview() {
+    NewMaterialDesignTestTheme {
+        ComposeWidgets()
     }
+}
 
-    private fun setChipListener(chip: Chip) {
-        chip.apply {
-            setOnCheckedChangeListener { _, isChecked ->
-                if (isChecked) {
-                    setTextColor(ContextCompat.getColor(applicationContext, android.R.color.white))
-                } else {
-                    setTextColor(ContextCompat.getColor(applicationContext, android.R.color.black))
-                }
-            }
+@Composable
+fun ComposeWidgets() {
+    Column(
+        modifier = Modifier
+            .verticalScroll(rememberScrollState())
+            .fillMaxSize()
+            .padding(dimensionResource(id = R.dimen.padding_8dp))
+    ) {
+        Surface(
+            shape = MaterialTheme.shapes.medium
+                .copy(all = CornerSize(size = dimensionResource(id = R.dimen.radius_4dp))),
+            elevation = dimensionResource(id = R.dimen.elevation_8dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .heightIn(dimensionResource(id = R.dimen.size_56dp))
+        ) {
+            val painter = painterResource(id = R.drawable.landscape)
+            Image(
+                painter = painter,
+                contentDescription = stringResource(id = R.string.surface_image_content_description),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .aspectRatio(painter.intrinsicSize.width / painter.intrinsicSize.height)
+                    .clickable(enabled = true, onClick = {}),
+                contentScale = ContentScale.FillBounds
+            )
+        }
+
+        Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.size_8dp)))
+
+        Button(enabled = true, onClick = {}, modifier = Modifier.fillMaxWidth(),
+            colors = ButtonDefaults.buttonColors(backgroundColor = Purple500)) {
+            Text(text = stringResource(id = R.string.surface_image_button_text),
+                color = Color.White,
+                fontSize = textSizeResource(id = R.dimen.text_size_14sp)
+            )
         }
     }
 }

app/src/main/java/br/com/caiodev/newmaterialdesigntest/extensions/Dimens.kt

@@ -0,0 +1,8 @@
+package br.com.caiodev.newmaterialdesigntest.extensions
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+
+@Composable
+fun dpToSp(dp: Dp) = with(LocalDensity.current) { dp.toSp() }

app/src/main/java/br/com/caiodev/newmaterialdesigntest/extensions/Text.kt

@@ -0,0 +1,25 @@
+package br.com.caiodev.newmaterialdesigntest.extensions
+
+import androidx.annotation.DimenRes
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.*
+
+private fun Int.textDp(density: Density): TextUnit = with(density) {
+    this@textDp.dp.toSp()
+}
+
+val Int.textDp: TextUnit
+    @Composable get() =  this.textDp(density = LocalDensity.current)
+
+@OptIn(ExperimentalUnitApi::class)
+@Composable
+@ReadOnlyComposable
+fun textSizeResource(@DimenRes id: Int): TextUnit {
+    val context = LocalContext.current
+    val density = LocalDensity.current
+    val pxValue = context.resources.getDimension(id)
+    return TextUnit(pxValue / density.density, TextUnitType.Sp)
+}

app/src/main/java/br/com/caiodev/newmaterialdesigntest/ui/theme/Color.kt

@@ -0,0 +1,8 @@
+package br.com.caiodev.newmaterialdesigntest.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Purple200 = Color(0xFFBB86FC)
+val Purple500 = Color(0xFF6200EE)
+val Purple700 = Color(0xFF3700B3)
+val Teal200 = Color(0xFF03DAC5)

app/src/main/java/br/com/caiodev/newmaterialdesigntest/ui/theme/Shape.kt

@@ -0,0 +1,11 @@
+package br.com.caiodev.newmaterialdesigntest.ui.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Shapes
+import androidx.compose.ui.unit.dp
+
+val Shapes = Shapes(
+    small = RoundedCornerShape(4.dp),
+    medium = RoundedCornerShape(4.dp),
+    large = RoundedCornerShape(0.dp)
+)

app/src/main/java/br/com/caiodev/newmaterialdesigntest/ui/theme/Theme.kt

@@ -0,0 +1,47 @@
+package br.com.caiodev.newmaterialdesigntest.ui.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+
+private val DarkColorPalette = darkColors(
+    primary = Purple200,
+    primaryVariant = Purple700,
+    secondary = Teal200
+)
+
+private val LightColorPalette = lightColors(
+    primary = Purple500,
+    primaryVariant = Purple700,
+    secondary = Teal200
+
+    /* Other default colors to override
+    background = Color.White,
+    surface = Color.White,
+    onPrimary = Color.White,
+    onSecondary = Color.Black,
+    onBackground = Color.Black,
+    onSurface = Color.Black,
+    */
+)
+
+@Composable
+fun NewMaterialDesignTestTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit
+) {
+    val colors = if (darkTheme) {
+        DarkColorPalette
+    } else {
+        LightColorPalette
+    }
+
+    MaterialTheme(
+        colors = colors,
+        typography = Typography,
+        shapes = Shapes,
+        content = content
+    )
+}