An Easy To Build First App Using Jetpack Compose
<p>If you have wanted to learn how to build apps but thought it was too complicated, then this is the tutorial to help you get across that learning curve.</p>
<p> </p>
<h1>Initial Setup</h1>
<p>For this tutorial we will go over how to build a simple app that will work on any Android device. If you are still new to Jetpack Compose or aren’t familiar with how to build a declarative UI, feel free to check out this article for a few of the basics of how declarative UI is used: <a href="https://medium.com/@jpmtech/basics-of-jetpack-compose-a019a765a1bc" rel="noopener">https://medium.com/@jpmtech/basics-of-jetpack-compose-a019a765a1bc</a></p>
<h1>Creating a New Project</h1>
<p>We will open Android Studio and create a new project. Will will choose an empty compose app, name it Bullseye, and set the minimum SDK for our project to version 10.0.</p>
<p> </p>
<h1>Creating the Basic Layout</h1>
<p>Knowing that we want our app the look like the first image, we will go ahead and add the basic components to the Greeting composable (without making them interactive for right now). We will also replace all the calls to “Greeting” with “Bullseye” like in the following example from our surface component.</p>
<pre>
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Bullseye()
}</pre>
<p>It looks like most of the items are stacked on top of each other vertically, so we will put most everything in a Column. To add emojis in a text component on a mac, we can use either:</p>
<ul>
<li>Edit menu -> Emojis and Symbols</li>
<li>Or use the shortcut: CTRL + CMD + SPACE</li>
</ul>
<p>We can temporarily add a value of “50F” for the slider value. You may also notice that we are placing the text of “1” and “100” below the slider in a Row group. This will allow our text to grow without falling off the screen in the case that the end user employs accessible fonts.</p>
<pre>
package com.example.bullseye
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.bullseye.ui.theme.BullseyeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BullseyeTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Bullseye()
}
}
}
}
}
@Composable
fun Bullseye() {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxSize()
.padding(all = 16.dp)
) {
Text(text = " BULLSEYE ", style = MaterialTheme.typography.headlineLarge, modifier = Modifier.padding(bottom = 16.dp))
Text("My Score is 10 points")
Spacer(modifier = Modifier.weight(1F))
Text("Match the slider as close as you can to the number:")
Text("10")
Slider(value = 50F, onValueChange = {
// TODO: Update slider value onChange
},
valueRange = 1F..100F,
steps = 100
)
Row(modifier = Modifier.padding(horizontal = 8.dp)) {
Text("1")
Spacer(modifier = Modifier.weight(1F))
Text("100")
}
Button(onClick = {
/* TODO */
}) {
Text("TEST IT")
}
Spacer(modifier = Modifier.weight(1F))
}
}
@Preview(showBackground = true)
@Composable
fun BullseyePreview() {
BullseyeTheme {
Bullseye()
}
}</pre>
<p>Our preview looks good, but our app doesn’t do anything yet. We will fix that in the next section.</p>
<p><a href="https://medium.com/@jpmtech/an-easy-to-build-first-app-using-jetpack-compose-75ad30f2ba89">Read More</a></p>