Skip to content

Instantly share code, notes, and snippets.

@tkuenneth
Created December 20, 2020 16:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tkuenneth/ddf5c9201291e912fdec67aeefd0acdf to your computer and use it in GitHub Desktop.
Save tkuenneth/ddf5c9201291e912fdec67aeefd0acdf to your computer and use it in GitHub Desktop.
A Christmas tree in Jetpack Compose
package com.thomaskuenneth.christmastreecompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.GenericShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.ui.tooling.preview.Preview
import com.thomaskuenneth.christmastreecompose.ui.ChristmasTreeComposeTheme
// A Christmas tree in Jetpack Compose
class ChristmasTreeActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ChristmasTreeComposeTheme {
ChristmasTree()
}
}
}
}
@Composable
fun ChristmasTree() {
val purple = Color(148, 0, 211)
Box(
modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
) {
Box(
alignment = Alignment.TopCenter
) {
Box(
alignment = Alignment.TopCenter,
) {
Triangle(100.dp, 100.dp, Color.Green)
Box(
modifier = Modifier.padding(top = 50.dp)
) {
Triangle(150.dp, 120.dp, Color.Green)
}
Box(modifier = Modifier.padding(top = 100.dp))
{
Triangle(200.dp, 140.dp, Color.Green)
}
}
Box(modifier = Modifier.align(alignment = Alignment.Center)) {
Star(0.dp, -120.dp, 20.dp, 20.dp, Color.Yellow)
Circle(0.dp, -80.dp, 15.dp, 15.dp, Color.Red)
Circle(-20.dp, -40.dp, 18.dp, 18.dp, purple)
Circle(30.dp, -50.dp, 20.dp, 20.dp, Color.Red)
Circle(30.dp, 0.dp, 22.dp, 22.dp, purple)
Circle(-20.dp, 30.dp, 24.dp, 24.dp, Color.Red)
Circle(60.dp, 45.dp, 18.dp, 18.dp, Color.Red)
Circle(-30.dp, 90.dp, 26.dp, 26.dp, purple)
Circle(40.dp, 100.dp, 26.dp, 26.dp, Color.Red)
}
}
Rectangle(20.dp, 30.dp, Color(0.6f, 0.4f, 0.2f))
}
}
}
@Composable
fun Triangle(width: Dp, height: Dp, color: Color) {
Box(
modifier = Modifier.preferredSize(width = width, height = height)
.clip(
GenericShape { size ->
moveTo(size.width / 2f, 0f)
lineTo(size.width, size.height)
lineTo(0f, size.height)
})
.background(color)
)
}
@Composable
fun Rectangle(width: Dp, height: Dp, color: Color) {
Box(
modifier = Modifier.preferredSize(width = width, height = height)
.clip(
RectangleShape
)
.background(color)
)
}
@Composable
fun Circle(x: Dp, y: Dp, width: Dp, height: Dp, color: Color) {
Box(
modifier = Modifier.preferredSize(width = width, height = height)
.offset(x = x, y = y)
.clip(
CircleShape
)
.background(color)
)
}
@Composable
fun Star(x: Dp, y: Dp, width: Dp, height: Dp, color: Color) {
Box(
modifier = Modifier.preferredSize(width = width, height = height)
.offset(x = x, y = y)
.clip(
GenericShape { size ->
val halfX = size.width / 2f
val halfY = size.height / 2f
val fl = halfX / 2
moveTo(0f, halfY)
lineTo(halfX + fl, 0f)
lineTo(halfX + fl, size.height)
lineTo(0f, halfY)
})
.background(color)
)
Box(
modifier = Modifier.preferredSize(width = width, height = height)
.offset(x = x, y = y)
.clip(
GenericShape { size ->
val halfX = size.width / 2f
val halfY = size.height / 2f
val fl = halfX / 2
moveTo(size.width, halfY)
lineTo(halfX - fl, 0F)
lineTo(halfX - fl, size.height)
lineTo(size.width, halfY)
})
.background(color)
)
}
@Preview
@Composable
fun Preview() {
ChristmasTree()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment