Portfolio (Profil) Uygulaması | Android Jetpack Compose Uygulama Geliştirime [Youtube Video] 🚀

🔴 https://youtu.be/kZBjFBTXVDI 🔴

Merhaba, bu yazımızda Jetpack Compose ile Android uygulama geliştireceğiz. Geliştireceğimiz “Portfolio App” Jetpack Compose temel özelliklerini kullanarak bir deneyim sunacaktır!

➡️ SERTİFİKALI JETPACK COMPOSE KURSU 💯

🟢 ANDROID WITH MACHINE LEARNING! (COURSE)

🟢 KOTLIN INTERVIEW BOOTCAMP! (COURSE)

Data Class

data class Project(
    val projectName: String? = null,
    val projectDescription: String? = null
)

Components

@Composable
fun PortfolioProjectItem(data: List<Project>) {
    LazyColumn {
        items(data) { item ->
            Card(
                modifier = Modifier
                    .padding(10.dp)
                    .fillMaxWidth(),
                shape = RoundedCornerShape(20.dp)
            ) {
                Row(
                    modifier = Modifier
                        .background(MaterialTheme.colorScheme.background)
                        .padding(10.dp)
                ) {
                    PortfolioProfileImage(modifier = Modifier.size(100.dp))
                    Column(
                        modifier = Modifier
                            .padding(10.dp)
                            .align(alignment = Alignment.CenterVertically)
                    ) {
                        Text(
                            text = item.projectName.toString(),
                            fontWeight = FontWeight.Bold,
                            style = MaterialTheme.typography.titleMedium
                        )
                        Text(
                            text = item.projectDescription.toString(),
                            style = MaterialTheme.typography.bodySmall
                        )
                    }
                }
            }
        }
    }
}

@Preview
@Composable
fun PortfolioProjects(isShown: Boolean = false) {
    if (isShown) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(5.dp)
        ) {
            Surface(
                modifier = Modifier
                    .padding(5.dp)
                    .fillMaxSize(),
                shape = RoundedCornerShape(corner = CornerSize(10.dp)),
                border = BorderStroke(width = 1.dp, color = Color.Black)
            ) {
                PortfolioProjectItem(
                    data = listOf(
                        Project(
                            "Google MLKit Android Apps",
                            "All Android Applications using Google MLKit"
                        ),
                        Project(
                            "Turkish Airlines Assistant App",
                            "With our open API platform, we provide you the chance to reach, test and use Turkish Airlines’s digital services."
                        ),
                        Project(
                            "Nves",
                            "Daily, special & more readable news with NEWS API Android Kotlin"
                        ),
                    )
                )
            }
        }
    }
}

@Preview
@Composable
private fun PortfolioPersonInfo() {
    Column(
        modifier = Modifier.padding(5.dp),
    ) {
        Text(
            text = "Ibrahim Can Erdogan",
            style = MaterialTheme.typography.headlineMedium,
            color = MaterialTheme.colorScheme.primary
        )

        Text(
            text = "Android Engineer",
            style = MaterialTheme.typography.titleMedium,
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.padding(3.dp)
        )

        Text(
            text = "@icanerdogan",
            style = MaterialTheme.typography.titleMedium,
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.padding(3.dp)
        )
    }
}

@Preview
@Composable
private fun PortfolioProfileImage(modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier
            .size(150.dp)
            .padding(10.dp),
        shape = CircleShape,
        border = BorderStroke(1.dp, Color.Black),
        shadowElevation = 10.dp
    ) {
        Icon(
            imageVector = Icons.Default.Android, contentDescription = "",
            modifier = modifier
                .clip(CircleShape)
                .background(Color.Green)
                .padding(20.dp)
        )
    }
}                                                                          

@Preview
@Composable
fun PortfolioCard(modifier: Modifier = Modifier) {

    val portfolioShowState = remember { mutableStateOf(false) }

    Surface(
        modifier = modifier.fillMaxSize()
    ) {
        Card(
            modifier = modifier
                .width(200.dp)
                .height(400.dp)
                .padding(20.dp),
            elevation = CardDefaults.cardElevation(10.dp),
            shape = RoundedCornerShape(corner = CornerSize(15.dp)),
            colors = CardDefaults.cardColors(
                containerColor = Color.Yellow
            )
        ) {
            Column(
                modifier = modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                PortfolioProfileImage()
                Divider(
                    modifier = modifier
                        .padding(20.dp)
                        .width(250.dp),
                    color = Color.Black,
                    thickness = 0.5.dp
                )
                PortfolioPersonInfo()
                Button(
                    onClick = {
                        portfolioShowState.value = !portfolioShowState.value
                    }) {
                    Text(text = "Portfolio")
                }
                PortfolioProjects(portfolioShowState.value)
            }

        }
    }
}

Activity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            PortfolioAppTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize()
                ) { innerPadding ->
                    Surface(
                        modifier = Modifier.padding(innerPadding)
                    ) {
                        PortfolioCard()
                    }
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PortfolioCardPreview() {
    PortfolioAppTheme {
        PortfolioCard()
    }
}

🚀 Merhaba! Jetpack Compose maceramız başlıyor! Bu seride, Android uygulamalarında modern ve etkileyici kullanıcı arayüzleri oluşturmanın sırlarını keşfedeceğiz. 📱💻 Her video, Jetpack Compose’un güçlü özelliklerini adım adım öğrenmenize yardımcı olacak. 🎉 Hazır mısınız?

O zaman birlikte bu heyecan verici yolculuğa çıkalım! 🌟 Bu seride sizleri, Android geliştirme yolculuğunuzda bir adım öne taşıyacak püf noktaları ve pratik ipuçlarıyla buluşturacağız. Hazır mısınız? Jetpack Compose ile geleceği keşfetmeye başlayalım! 🌟

LINKEDIN

YOUTUBE

UDEMY

GITHUB

Abone olmayı ve zil simgesini tıklayarak bildirimleri açmayı unutmayın, böylece yeni videoları kaçırmazsınız! Sizlerle birlikte bu heyecan verici yolculuğa çıkmak için sabırsızlanıyoruz. Görüşmek üzere!

#JetpackCompose #AndroidDevelopment #MobileApps #JetpackSeri #AndroidJetpack #AndroidStudio #UIUX #AndroidDeveloper #MobileDev