Composable Functions and Preview Annotations

package com.example.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
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.ImageBitmap
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpackcompose.ui.theme.AppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GreetingCard(title = "Android Development")
        }
    }

    @Composable
    fun GreetingCard(title: String) {
        Text(text = "Welcome to $title!")
    }

    @Preview(showBackground = true)
    @Composable
    fun PreviewGreetingCard() {
        GreetingCard(title = "Compose Framework")
    }
}

Layout Composition

Compose builds UI hierarchies through nested composable function calls. Column arranges children vertically, Row positions elements horizontally, and Box overlays components.

package com.example.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

class LayoutActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PostCard(postData = Post("Developer", "Learning Jetpack Compose"))
        }
    }

    @Composable
    fun PostCard(postData: Post) {
        Column {
            Text(text = postData.username)
            Text(text = postData.content)
        }
    }

    data class Post(val username: String, val content: String)
}

package com.example.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource

class ProfileActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ProfileCard(LayoutActivity.Post("Developer", "Exploring Compose"))
        }
    }

    @Composable
    fun ProfileCard(profile: LayoutActivity.Post) {
        Row {
            Image(
                painter = painterResource(id = R.drawable.profile_icon),
                contentDescription = null
            )
            Column {
                Text(text = profile.username)
                Text(text = profile.content)
            }
        }
    }
}

Layout Customization

Modifires in Compose provide fine-grained control over component appearance and behavior:

package com.example.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
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.res.painterResource
import androidx.compose.ui.unit.dp

class StyledActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            StyledProfile(
                userData = UserProfile(
                    "Alex Johnson",
                    "Senior Android Engineer"
                )
            )
        }
    }

    @Composable
    fun StyledProfile(userData: UserProfile) {
        Row(modifier = Modifier.padding(16.dp)) {
            Image(
                painter = painterResource(id = R.drawable.avatar),
                contentDescription = null,
                modifier = Modifier
                    .size(64.dp)
                    .clip(CircleShape)
            )
            Column(modifier = Modifier.padding(start = 12.dp)) {
                Text(text = userData.name)
                Text(text = userData.role)
            }
        }
    }

    data class UserProfile(val name: String, val role: String)
}