Jetpack Compose Starter Example

Sample.kt

package com.example.foodrezipeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.*
import androidx.compose.foundation.gestures.ScrollableDefaults
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.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.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.foodrezipeapp.ui.theme.FoodRezipeAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {
                Column(modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .border(border = BorderStroke(width = 1.dp, color = Color.Red)),
                verticalArrangement = Arrangement.Center) {
                    Text(text = "ITEM 1",
                        modifier = Modifier.align(Alignment.CenterHorizontally))
                }
                Spacer(modifier = Modifier.padding(20.dp))
                Row(modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .border(border = BorderStroke(width = 1.dp, color = Color.Red)),
                horizontalArrangement = Arrangement.Center) {
                    Text(text = "ITEM 1",
                        modifier = Modifier.align(Alignment.CenterVertically))
                }
            }

        }

    }
}

sample2.kt

package com.example.foodrezipeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)


        setContent {
            Surface(
                Modifier
                    .background(color = Color.White)
                    .fillMaxHeight()) {

                Column(modifier = Modifier
                    .verticalScroll(state = ScrollState(initial = 0))
                    .fillMaxHeight()
                    .fillMaxWidth()
                ) {
                    Image(painter = painterResource(id = R.drawable.happy_meal),
                        contentDescription = null)

                    Column (modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .background(color = Color.Gray)) {
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.SpaceBetween
                        ){
                            Text(text = "Happy Meal",
                                style= TextStyle(
                                    color = Color.Black,
                                    fontSize = 27.sp
                                )
                            )
                            Text(text = "$5.99", style= TextStyle(
                                color = Color.Black,
                                fontSize = 17.sp
                            ),
                                modifier = Modifier.align(Alignment.CenterVertically))
                        }

                        Spacer(modifier = Modifier.padding(top=10.dp))
                        Text(text = "800 Calories", style= TextStyle(
                            color = Color.Black,
                            fontSize = 17.sp
                        ))
                        Spacer(modifier = Modifier.padding(top=10.dp))
                        Button(onClick = {},
                        modifier = Modifier
                            .align(Alignment.CenterHorizontally)
                        ) {
                            Text(text = "Order Now", style= TextStyle(
                                color = Color.Black,
                                fontSize = 17.sp
                            ))
                        }

                    }
                }
            }

        }


    }
}