Scribd
Upload
46 views

Assignment 1

The document provides guidance for creating a simple business card app using Compose in Android Studio. It recommends first creating a low-fidelity prototype using pen and paper or a simple drawing tool to visualize the app layout. This prototype can then be used to divide the user interface into composable sections and elements when translating the design into code. Example composables that could be used include Row, Column, Image, Icon, and Text, and parameters for styling and arranging the elements are discussed. The goal is to build the app independently using the concepts and skills learned in previous lessons.

Uploaded by

Khurram shahzad
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views

Assignment 1

The document provides guidance for creating a simple business card app using Compose in Android Studio. It recommends first creating a low-fidelity prototype using pen and paper or a simple drawing tool to visualize the app layout. This prototype can then be used to divide the user interface into composable sections and elements when translating the design into code. Example composables that could be used include Row, Column, Image, Icon, and Text, and parameters for styling and arranging the elements are discussed. The goal is to build the app independently using the concepts and skills learned in previous lessons.

Uploaded by

Khurram shahzad
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Project:

Create a Business Card app


About this codelab
subjectLast updated May 3, 2023
account_circleWritten by Google Developers Training team
1. Before you begin

You apply what you learned in this unit to create your own business card app. Unlike previous
codelabs in which you were given step-by-step instructions to follow, here you're only provided with
guidelines and suggestions about what you can build with the concepts that you learned so far.
You're encouraged to use your creativity to build the app independently with limited guidance.

It's a challenge to build an app on your own, but don't worry because you've had enough practice!
You can use the same skills that you learned in this new context. You can always refer to previous
codelabs if you're unsure of how to implement certain parts of the app.

When you build this app on your own and solve the problems that you face along the way, you learn
faster and retain the concepts longer. As a side benefit, the app is completely customized, so you
can personalize and showcase it to your friends and family!

Prerequisites
 Ability to create and run a project in Android Studio.

 Experience with composable functions, which includes Text and Image composables.

What you'll learn


 How to build simple layouts with Row and Column composables, and arrange them
with horizontalAlignment and verticalArrangement parameters.

 How to customize Compose elements with a Modifier object.

What you'll build


 An Android app that displays a business card.
What you'll need
 A computer with Android Studio installed.

 The Android logo to display in the app, which is provided for your use in this repo.

Here's a sample of how your app might look at the end of this project:
2. Build UI with composables

Create a low-fidelity prototype


When you begin a project, it's useful to visualize how UI elements need to fit together on the screen.
In professional-development work, oftentimes there are designers or design teams that provide
developers with UI mockups, or designs, that contain exact specifications. However, if you don't
work with a designer, you can create a low-fidelity, or low-fi, prototype on your own. Low-fi prototype
refers to a simple model, or drawing, that provides a basic idea of what the app looks like.

Surprisingly, it's common to work without a designer, which makes the ability to sketch simple UI
mockups a handy skill for a developer. Don't worry, you don't need to be a professional designer or
even know how to use design tools. You can simply use a pen and paper, Slides, or Drawings to help
you build it.

To create a low-fidelity prototype:

1. On your preferred medium, add elements that make up your app. Some elements to consider
include the Android logo, your name, title, and contact information, icons that indicate
contact information. For example, a telephone icon indicates a phone number.
2. Add these elements in different positions and then evaluate them visually. Don't worry about
getting it perfect the first time. You can always settle on one design now and iteratively
improve it later.
Note: There are principles that help make design better for users, which is outside the scope of
this project. To learn more, see Understanding layout.

You may come up with a low-fi design that looks like this image:
Convert design into code
To use your prototype to help translate your design into code:

1. Identify different logical sections of the apps and draw boundaries around them. This step
helps you divide your screen into small composables and think about the hierarchy of the
composables.

In this example, you can divide the screen into two sections:

 Logo, name, and title


 Contact information

Each section can be converted into one composable. This way you are able to build your UI with
small composable building blocks. You can arrange each of these sections with layout
composables, such as a Row or Column composable.
2. For each section of the app that contains multiple UI elements, draw boundaries around
them. These boundaries help you see how one element relates to another in the section.
Now it's easier to see how you can arrange Text, Image, Icon, and other composables with layout
composables.

Some notes on various composables that you may use:

Row or Column composables

 Experiment with various horizontalArrangement and verticalAlignment parameters


in Row and Column composables to match the design that you have.

Image composables

 Don't forget to fill in the contentDescription parameter. As mentioned in the previous codelab,


TalkBack uses the contentDescription parameter to help with the accessibility of the app. If
the Image composable is only used for decorative purposes or there's a Text element that
describes the Image composable, you can set the contentDescription parameter to null. You can
also customize the size of the image by specifying the height and width modifiers in
the modifier parameter.

Icon composables

 You can use the Icon composable to add icons from Material Design. You can change
the Tint parameter to adjust the icon color to fit the style of your business card. Similar to
the Image composable, don't forget to fill in the contentDescription parameter.

Text composables

 You can experiment with various values of fontSize, textAlign, color, and fontWeight parameters to


style your text.

Spacing and alignment

 You can use Modifier arguments, such as padding and weight modifiers, to help with the


arrangement of composables.
 You can also use Spacer composable to make spacing more explicit.

Color customization

 You can use custom color with the Color class and the color hex code (a hexadecimal way to
represent a color in RGB format). For example, the green color of Android has a hex code of
#3DDC84. You can make your text the same green color with this code:

Text("Example", color = Color(0xFF3ddc84))

3. Run the app in an emulator or on your Android device to ensure that it compiles.

You might also like