With the increased number of physical interactions turning virtual, it is essential to adapt to newer ways to put yourself out there. Handing out business cards were great ways to network at events in the past. However, with majority of the events going virtual, why not your business card too?
In this tutorial, you will learn about the basics of using core Android Studio views such as TextView
, ImageView
, and View Groups such as ConstraintLayout
. By the end of this tutorial, you will build a digital version of your own business card as an app that they can share with anyone you meet!
To follow along with this tutorial, you'll need:
You can learn how to install Android Studio here on Envato Tuts+.
Before moving into Android Studio, let's look at the sample business card design that we will be converting into an Android app. A great way to visualize what you want to build is to draw it out on a piece of paper or make a sketch on an illustration software. The below design was sketched on Figma.
To create a new project for your business card, start by launching Android Studio.
You will see the Welcome to Android Studio window. Select Start a new Android project. You'll see some options for starter templates—choose Empty Activity from the listed activity types.
Next give your project a descriptive name. In our case, we will just call it "Business Card App". Keep the rest of the settings at their default.
Once you're done, Android Studio will build your project.
Now that we have a new project, we need to design the card! The design that will be shown through the app originates from the layout files in Android Studio. Let's look at how to customize them.
First, switch to the Android file view by clicking the dropdown in the Project pane. Expand the app > res > layout folder. Open activitymain.xml from inside that folder by double-clicking on the file name. activitymain.xml is where the layout for your main activity is defined.
For any layout file, you have three ways to work on the design of the activity:
In this tutorial, we will be using both the code and design views. There are two other panes that you need to know about for the design view:
ConstraintLayout
is the recommended layout for views in Android Studio because it flattens the layout hierarchy, creating simpler layout code. This means that every element can be directly a child of the ConstraintLayout
without creating nested relationships of layouts within layouts.
ConstraintLayout
requires that each view should have at least one horizontal and one vertical constraint. If the screen size changes, the views are automatically adjusted to the new screen setting/width.
By default, you will notice a ConstraintLayout
and a TextView
for the "Hello World" text. Delete the TextView
by selecting it in the component tree and pressing delete.
Most business cards contain a professional picture of you or your company. To add this, we will be using the Android ImageView
component.
ImageView
is responsible for displaying image resources called drawables. Drawables are any graphic assets that can be drawn or shown on the screen, such as PNGs or shapes.
To display an image in the ImageView
, you will need to add the image to the drawable directory. You can do this easily from within Android Studio. To add an image to the drawable directory, first delect the Resource Manager Pane. Then press the Add Resources to module button and choose Import drawables. Now select any drawable file that you want for the logo on your business card and press Import.
Great! Now that our image is added to the drawable directory let's use it in an ImageView
.
First select ImageView from the Palette and drag it onto the design view of the layout editor. You will be asked to choose a drawable—choose the image you imported in the previous step. Add a unique id to the image view by selecting the attributes pane.
Finally, to position your image in the layout, select the bubbles at the corners of the logo and drag them to the edges of the screen. This will add vertical and horizontal constraints to the image that will keep it scaled to fill the entire activity.
Alternatively, you can use the XML code below and add the ImageView
. Make sure to change the srcCompat
value to the name of your image.
<ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="76dp" android:scaleType="centerCrop" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.497" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/jalogo" />
TextView
allows you to display text to the user of the application. You can customize many of its attributes such as textSize
, textColor
, and textStyle
.
We need to show the person's details such as name, title, and phone number. You add a text view in a similar way to how a image view was added in the previous section. First select TextView
from the Palette and drag onto the design view of the layout editor.
Now, to size and position the text view, drag the bubbles to each side to the parent container's left and right. Then drag the bubble at the top of the TextView
to the bubble at the bottom of the ImageView
.
Alternatively, this can be accomplished by writing XML code as below. You can also modify attributes such as textSize
, id
and the text
itself in the XML code too.
<TextView android:id="@+id/nameField" style="@style/TextAppearance.AppCompat.Headline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="JANE APPLESEED" android:textColor="@color/colorPrimaryDark" android:textSize="25sp" android:textStyle="bold" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.498" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView" />
Similarly, we need to add the remaining TextView
on screen and constraint them to the previous TextView
. To do this, follow the below code sample:
<TextView android:id="@+id/titleField" style="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="13dp" android:text="Educator" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/nameField" />
To add a separator between the previous TextView and the ones we plan to create next, let's add a horizontal line. Here's how you can do that:
<View android:id="@+id/horizontalLine" android:layout_width="300dp" android:layout_height="2dp" android:layout_marginTop="96dp" android:background="@color/colorPrimaryDark" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.495" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/titleField" />
The purpose of a business card is to make connections! So we cannot miss out on adding our personal information. Let's add the TextView
for our phone number, email, location, and website.
<TextView android:id="@+id/phoneField" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="+123 4567890" android:textSize="15sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/horizontalLine" /> <TextView android:id="@+id/emailField" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="12dp" android:text="janeappleseed@gmail.com" android:textSize="15sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.485" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/phoneField" /> <TextView android:id="@+id/locationField" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="California, USA" android:textSize="15sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.492" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/emailField" /> <TextView android:id="@+id/websiteField" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="32dp" android:text="janeappleseed.com" android:textColor="@color/colorPrimaryDark" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.498" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/locationField" app:layout_constraintVertical_bias="1.0" />
Throughout the app, we will be using a material color palette that we created using the color tool on Material.io.
To add the additional colors go to Res > Values > colors.xml and modify the values to the ones below:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#009688</color> <color name="colorPrimaryDark">#00675b</color> <color name="colorPrimaryLight">#52c7b8</color> <color name="colorAccent">#03DAC5</color> </resources>
On running the app, you will see the result as below:
If you used the layout editor's design view to drag and drop views, you would notice that the id
is randomly generated. Having an id
such as textView9
is not very helpful as it does not convey what the TextView
displays.
It is good practice to refactor and add descriptive ids for the views that you use in your project. Similarly, another good practice is to declare the strings used throughout the app in strings.xml. This allows for easy translation in case you decide to have the app in different languages.
To modify the string declaration for any of the TextView
we created first click the warning triangle in the Component Tree. This will open up the message with more detail and a suggested fix option. Then click on the Suggested Fix to let Android Studio fix the issue for you