Demo/Lecture: Eatery Card
Using Modifier and a component's arguments to visually build a complex component!
Last updated
Was this helpful?
Using Modifier and a component's arguments to visually build a complex component!
Last updated
Was this helpful?
In this demo, we'll be showing off how to make the following Eatery Card component, which is very similar to (albeit a bit simpler than) one you've seen if you regularly use Eatery:
If time permits, we'll then show how to use this component we've built on a screen to show things on an actual app!
First, we'll show you how to set up an Android Studio project!
Open Android Studio (you should have it already installed!)
Click New Project or go to File -> New... -> New Project...
Make an Empty Activity Project.
Name your project something comprehensible like D1. Click Finish.
You should now have a new app created for you! In the future you can follow this procedure whenever you are asked to make a new project.
Next, we'll set up some files so that we can start building components and screens!
If you expand your filesystem, this is what you should see. The folder com.[...].d1 is where you'll be adding Kotlin Android files.
Right Click com.[...].d1and do New... -> Kotlin Class/File.
Make a file named EateryCard ; this will become our card component.
Do the same and make a file named MainScreen.
Now, let's set up EateryCard so we can be ready to dev!
Add the following functions to EateryCard:
These two functions represent the following:
EateryCard is the actual component we are building.
EateryCardPreview allows us to preview the component as we are building it so we can verify that what we are building looks right.
Next, click on this button on the top right:
This launches the preview so you can see what your component looks like as you're building it!
You may need to periodically Build & Refreshto see the component.
Because you haven't actually written anything in the component, nothing will show up:
But now we're ready to dev! These next parts are on your own. We'll provide hints as we go. Feel free to ask us questions!
Use a Surface component built into Android to make the card background. When asked to import Surfaceand any other Android components, always select the @Composable one.
Hint 1: Surface always needs an inner body Composable, so for now just add a {} after the Surface to get it to compile. You'll add the rest of your stuff here.
Hint 2: Roll over Surface to see the arguments it can take in. You'll want to make this a RoundedCornerShape with a corner radius of 12.dp with a shadow elevation of 4.dp.
Hint 3: We want the card to fill the max width and have a fixed height of 220.dp. Use a Modifier for this!
You should end up with the following:
We want the card to have a distinct upper and lower section. Utilize a Column and Modifier.weight(1f) on the inner components in that column to make two Boxes that take up the same vertical space!
Make the upper box a nice shade of blue.
Hint 1: Boxes are 0 width and 0 height by default if they don't have any content. Make sure your box is filling the max width if it has a background to show its color!
Hint 2: Use Modifier.background(...) with the following color to achieve an Eatery Blue color:
Next, let's make our eatery card display text!
We want our texts to display generally in the photo below. Don't worry that the Color is Red; up to you if you want to change that.
You'll need to use a combination of Rows, Columns, Texts, Modifiers, and a careful look at the arguments each of these take in to get this look!
Hint 1: Modifier.padding() adds some padding around a container.
Hint 2: Row's horizontalArrangement parameter w/ SpaceBetween may be useful to push the Open text off to the right.
Hint 3: Remember to keep using fillMaxWidth() if you want your container to take up as much width as possible!
Hint 4: Take a look at the parameters of Text to see if you can roughly match our Text's intricacies.
Now that we've made our component, let's run it to make it show up on our emulator / app!
First, hop over to MainScreen . This file will represent our screen that the user will see.
Just like before, make a MainScreen @Composable function. Add just the Eatery Card to this screen.
Move over to MainActivity and replace the default Scaffold with our MainScreen.
Run the app!
(You should have an emulator set up for you automatically in android studio.)
You should see your component. However, it hugs the sides kind of ugly...ly. Can you change MainScreen to make it fit more snugly?
If you see this, congrats. You just completed D1!
