Web Development: Make a Simple Android App: a Digital Business Card

Make a Simple Android App: a Digital Business Card

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!

Prerequisites

To follow along with this tutorial, you'll need:

Android Studio
a physical Android device or emulator

You can learn how to install Android Studio here on Envato Tuts+.

Android SDK

How to Get Started Making Android Apps

Ashraff Hathibelagal

1. The Design

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.

2. Set Up a New Android Studio Project

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.

3. The Layout Design

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:

Code: This is where you can code your design in XML.
Design: This is where you can add views by just dragging and dropping onto the visible area.
Split: This is where you work on the design with drag-and-drop and the XML code side by side.

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:

Palette: This is where you can view some of the most commonly used views and widgets.
Component Tree: As you add different views and view groups to your screen, the hierarchy of elements is displayed here.

Introduction to Constraint Layout

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.

Add an Image View

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" />

Add a Text View

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" />

4. The Color Palette

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:

5. Refactoring

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

Conclusion

In this tutorial, I showed you how to create your very own business card app using some core Android components. While this is just the start, the possibilities to expand are endless! You can add a QR code, multiple pages, or a share functionality that directs users to more information.

Premium Android App Templates From CodeCanyon

Note that you can use these same techniques to start an app using one of the premium app templates available from CodeCanyon—an online marketplace that has hundreds of Android app templates, which are very feature-rich and tailored to every domain. You can save days or even months of effort by using one of them.