Practical 1
Practical 1
The Name field is used to enter the name of your project, for this codelab type "Greeting
Card".
Leave the Package name field as is. This is how your files will be organized in the file
structure. In this case, the package name will be com.example.greetingcard.
Leave the Save location field as is. It contains the location where all the files related to
your project are saved. Take a note of where that is on your computer so that you can
find your files.
Select API 24: Android 7.0 (Nougat) from the menu in the Minimum SDK field.
Minimum SDK indicates the minimum version of Android that your app can run on.
7. Click Finish. This may take a while - this is a great time to get a cup of tea! While
Android Studio is setting up, a progress bar and message indicates whether
Android Studio is still setting up your project. It may look like this:
A message that looks similar to this informs you when the project set up is created.
9. Click Split on the top right of Android Studio, this allows you to view both code and
design. You can also click Code to view code only or click Design to view design only.
● The Project view (1) shows the files and folders of your project
● The Code view (2) is where you edit code
● The Design view (3) is where you preview what your app looks like
In the Design view, you will see a blank pane with this text:
10. Click Build & Refresh. It may take a while to build but when it is done the preview
shows a text box that says "Hello Android!". Empty Compose activity contains all the
code necessary to create this app.
1. In Android Studio, take a look at the Project tab. The Project tab shows the files and
folders of your project. When you were setting up your project the package name was
com.example.greetingcard. You can see that package right here in the Project tab. A
package is basically a folder where code is located. Android Studio organizes the project
in a directory structure made up of set of packages.
2. If necessary, select Android from the drop-down menu in the Project tab.
This is the standard view and organization of files that you use. It's useful when you write code
for your project because you can easily access the files you will be working on in your app.
However, if you look at the files in a file browser, such as Finder or Windows Explorer, the file
hierarchy is organized very differently.
3. Select Project Source Files from the drop-down menu. You can now browse the files in
the same way as in any file browser.
4. Select Android again to switch back to the previous view. You use the Android view for
this course. If your file structure ever looks strange, check to make sure you're still in
Android view.
Look at the Code view of the MainActivity.kt file. Notice there are some automatically
generated functions in this code, specifically the onCreate() and the setContent()
functions.
}}}}}
The onCreate() function is the entry point to this Android app and calls other functions
to build the user interface. In Kotlin programs, the main() function is the entry
point/starting point of execution. In Android apps, the onCreate() function fills that role.
The setContent() function within the onCreate() function is used to define your layout
through composable functions. All functions marked with the @Composable
annotation can be called from the setContent() function or from other Composable
functions. The annotation tells the Kotlin compiler that this function is used by Jetpack
Compose to generate the UI.
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(text = "Hello $name!")
}
You've learned about functions before, but there are a few differences with composable
functions.
● You add the @Composable annotation before the function.
● @Composable function names are capitalized.
● @Composable functions can't return anything.
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(text = "Hello $name!")
}
Right now the Greeting() function takes in a name and displays Hello to that person.
Great! You changed the text, but it introduces you as Android, which is probably not
your name. Next, you will personalize it to introduce you with your name!
The GreetingPreview() function is a cool feature that lets you see what your
composable looks like without having to build your entire app. To enable a preview of a
composable, annotate it with @Composable and @Preview. The @Preview
annotation tells Android Studio that this composable should be shown in the design
view of this file.
Since Android Studio by default uses a light theme for the editor, it can be hard to see
the difference between showBackground = true and showBackground = false.
However, this is an example of what the difference looks like. Notice the white
background on the image set to true.
showBackground = true
showBackground = false
3. Update the GreetingPreview() function with your name. Then rebuild and
check out your personalized greeting card!
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
GreetingCardTheme {
Greeting("Riya Wala")
}
}
5. Change the background color
Now you have the introduction text, but it's a little boring! In this section, you learn to
change the background color.
To set a different background color for your introduction, you'll need to surround your
text with a Surface. A Surface is a container that represents a section of UI where you
can alter the appearance, such as the background color or border.
1. To surround the text with a Surface, highlight the line of text, press (Alt+Enter
for Windows or Option+Enter on Mac), and then select Surround with widget.
5. When you type Color you may notice that it is red, which means Android Studio
is not able to resolve this. To solve this scroll to the top of the file where it says
import and press the three buttons.
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
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.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme
import androidx.compose.ui.graphics.Color
7. In your code, the best practice is to keep your imports listed alphabetically and
remove unused imports. To do this press Help on the top toolbar, type in
optimize imports, and click on Optimize Imports.
You could open the Optimize Imports directly from the menu: Code > Optimize
Imports. Using Help's search option will help you locate a menu item if you don't
remember where it is.
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
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.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme
8. Notice that the Color that you typed in the Surface parentheses has switched
from being red to being underlined in red. To fix that, add a period after it. You
will see a pop-up showing different color options.
This is one of the cool features in Android Studio, it is intelligent and will help you out
when it can. In this case it knows you are wanting to specify a color so it will suggest
different colors.
9. Choose a color for your surface. This codelab uses Cyan, but you can choose
your favorite!
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Surface(color = Color.Cyan) {
Text(
text = "Hi, my name is $name!",
modifier = modifier
)
}
}
6. Add padding
Now your text has a background color, next you will add some space (padding) around
the text.
A Modifier is used to augment or decorate a composable. One modifier you can use is
the padding modifier, which adds space around the element (in this case, adding
space around the text). This is accomplished by using the Modifier.padding() function.
Every composable should have an optional parameter of the type Modifier. This should
be the first optional parameter.
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.greetingcard.ui.theme.GreetingCardTheme
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Surface(color = Color.Cyan) {
Text(text = "Hi, my name is $name!", modifier = modifier.padding(24.dp))
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
GreetingCardTheme {
Greeting("Riya Wala")
}
}