# Demo/Lecture: Eatery Card 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! ### Step 1: Set up your Android Studio Project (follow-along) First, we'll show you how to set up an Android Studio project! 1. Open Android Studio (you should have it already installed!) 2. Click **New Project** or go to **File -> New\... -> New Project...** 3. Make an **Empty Activity** Project. 4. 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. *** ### Step 2: Create New Files (follow-along) 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. 1. Right Click `com.[...].d1`and do **New\... -> Kotlin Class/File.** 2. Make a file named `EateryCard` ; this will become our card component. 3. Do the same and make a file named `MainScreen`. Now, let's set up `EateryCard` so we can be ready to dev! *** ### Step 3: Set up EateryCard (follow-along) Add the following functions to `EateryCard`:

These two functions represent the following: 1. EateryCard is the actual component we are building. 2. 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 & Refresh`to 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! *** ### Task 1: Build the outer Card {% hint style="info" %} Time to do things yourself now! Please feel free to ask questions as you go :-) {% endhint %} Use a Surface component built into Android to make the card background. When asked to import `Surface`and 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:

*** ### Task 2: Divide the Card Vertically 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 `Box`es 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:* ``` Color(0xff5ecfdb) ```

*** ### Task 3: Add Texts 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.* *** ### Task 4: Run a screen & deploy the app! Now that we've made our component, let's run it to make it show up on our emulator / app! 1. First, hop over to `MainScreen` . This file will represent our screen that the user will see. 2. Just like before, make a `MainScreen` @Composable function. Add just the Eatery Card to this screen. 3. Move over to MainActivity and replace the default `Scaffold` with our MainScreen. 4. 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!