{"id":34749,"date":"2020-12-16T08:06:46","date_gmt":"2020-12-16T16:06:46","guid":{"rendered":"https:\/\/sacramentowebdesigngroup.com\/?p=34749"},"modified":"2026-02-25T22:11:27","modified_gmt":"2026-02-26T06:11:27","slug":"make-a-simple-android-app-a-digital-business-card","status":"publish","type":"post","link":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/make-a-simple-android-app-a-digital-business-card\/","title":{"rendered":"Make a Simple Android App: a Digital Business Card"},"content":{"rendered":"<div class=\"content-block-wysi\">\n<p>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?<\/p>\n<p>In this tutorial, you will learn about the basics of using core Android Studio views such as <code>TextView<\/code>, <code>ImageView<\/code>, and View Groups such as <code>ConstraintLayout<\/code>. 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!<\/p>\n<h2><strong>Prerequisites<\/strong><\/h2>\n<p>To follow along with this tutorial, you&#8217;ll need:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.android.com\/studio\" target=\"_blank\" rel=\"noopener\">Android Studio<\/a><\/li>\n<li>a physical Android device or emulator<\/li>\n<\/ul>\n<p>You can <a href=\"https:\/\/code.tutsplus.com\/tutorials\/how-to-get-started-making-android-apps--cms-34427\" target=\"_self\" rel=\"noopener\">learn how to install Android Studio<\/a> here on Envato Tuts+.<\/p>\n<ul class=\"roundup-block__contents posts--half-width roundup-block--list\">\n<li class=\"roundup-block__content\">\n<div class=\"roundup-block__primary-category topic-code\">Android SDK<\/div>\n<div class=\"roundup-block__content-title\">How to Get Started Making Android\u00a0Apps<\/div>\n<div class=\"roundup-block__author\">Ashraff Hathibelagal<\/div>\n<\/li>\n<\/ul>\n<h2><span class=\"sectionnum\">1.<\/span> The Design<\/h2>\n<p>Before moving into Android Studio, let&#8217;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.<\/p>\n<figure class=\"post_image\"><img decoding=\"async\" src=\"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-content\/uploads\/2020\/12\/JaneAppleSeedBusinessCardApp.jpg\" alt=\"Business card app design made in Figma\" \/><\/figure>\n<h2><span class=\"sectionnum\">2.<\/span> Set Up a New Android Studio Project<\/h2>\n<p>To create a new project for your business card, start by launching Android Studio.<\/p>\n<p>You will see the <strong>Welcome to Android Studio<\/strong> window. Select <strong>Start a new Android project<\/strong>. You&#8217;ll see some options for starter templates\u2014choose <strong>Empty Activity <\/strong>from the listed activity types.<\/p>\n<p>Next give your project a descriptive name. In our case, we will just call it &#8220;<strong>Business Card App<\/strong>&#8220;. Keep the rest of the settings at their default.<\/p>\n<p>Once you&#8217;re done, Android Studio will build your project.<\/p>\n<h2><span class=\"sectionnum\">3.<\/span> The Layout Design<\/h2>\n<p>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&#8217;s look at how to customize them.<\/p>\n<p>First, switch to the Android file view by clicking the dropdown in the <strong>Project<\/strong> pane. Expand the <strong>app &gt; res &gt; layout <\/strong>folder. Open <strong>activitymain.xml<\/strong> from inside that folder by double-clicking on the file name.\u00a0<strong>activitymain.xml<\/strong> is where the layout for your main activity is defined.<\/p>\n<p>For any layout file, you have three ways to work on the design of the activity:<\/p>\n<ol>\n<li><strong>Code<\/strong>: This is where you can code your design in XML.<\/li>\n<li><strong>Design<\/strong>: This is where you can add views by just dragging and dropping onto the visible area.<\/li>\n<li><strong>Split<\/strong>: This is where you work on the design with drag-and-drop and the XML code side by side.<\/li>\n<\/ol>\n<p>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:<\/p>\n<ul>\n<li><strong>Palette<\/strong>: This is where you can view some of the most commonly used views and widgets.<\/li>\n<li><strong>Component Tree:<\/strong> As you add different views and view groups to your screen, the hierarchy of elements is displayed here.<\/li>\n<\/ul>\n<h3>Introduction to Constraint Layout<\/h3>\n<p><code>ConstraintLayout<\/code> 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 <code>ConstraintLayout<\/code> without creating nested relationships of layouts within layouts.<\/p>\n<p><code>ConstraintLayout<\/code> 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.<\/p>\n<p>By default, you will notice a <code>ConstraintLayout<\/code> and a <code>TextView<\/code> for the &#8220;Hello World&#8221; text. Delete the <code>TextView<\/code> by selecting it in the component tree and pressing delete.<\/p>\n<h3>Add an Image View<\/h3>\n<p>Most business cards contain a professional picture of you or your company. To add this, we will be using the Android<code> ImageView<\/code> component.<\/p>\n<p><code>ImageView<\/code> 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.<\/p>\n<p>To display an image in the <code>ImageView<\/code>, 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 <strong>Resource Manager<\/strong> Pane. Then press the <strong>Add Resources to module<\/strong>\u00a0button and choose <strong>Import drawables<\/strong>. Now select any drawable file that you want for the logo on your business card and press <strong>Import<\/strong>.<\/p>\n<p>Great! Now that our image is added to the drawable directory let&#8217;s use it in an <code>ImageView<\/code>.<\/p>\n<p>First select <strong>ImageView <\/strong>from the <strong>Palette<\/strong> and drag it onto the design view of the layout editor.\u00a0You will be asked to choose a drawable\u2014choose the image you imported in the previous step. Add a unique id to the image view by selecting the attributes pane.<\/p>\n<p>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.<\/p>\n<p>Alternatively, you can use the XML code below and add the <code>ImageView<\/code>. Make sure to change the <code>srcCompat<\/code> value to the name of your image.<\/p>\n<pre class=\"brush: xml noskimlinks noskimwords\">&lt;ImageView\n   android:id=\"@+id\/imageView\"\n   android:layout_width=\"wrap_content\"\n   android:layout_height=\"wrap_content\"\n   android:layout_marginTop=\"76dp\"\n   android:scaleType=\"centerCrop\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintHorizontal_bias=\"0.497\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toTopOf=\"parent\"\n   app:srcCompat=\"@drawable\/jalogo\" \/&gt;<\/pre>\n<h3>Add a Text View<\/h3>\n<p><code>TextView<\/code> allows you to display text to the user of the application. You can customize many of its attributes such as <code>textSize<\/code>, <code>textColor<\/code>, and <code>textStyle<\/code>.<\/p>\n<p>We need to show the person&#8217;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 <code>TextView<\/code> from the <strong>Palette<\/strong> and drag onto the design view of the layout editor.<\/p>\n<p>Now, to size and position the text view,\u00a0 drag the bubbles to each side to the parent container&#8217;s left and right. Then drag the bubble at the top of the <code>TextView<\/code> to the bubble at the bottom of the <code>ImageView<\/code>.<\/p>\n<p>Alternatively, this can be accomplished by writing XML code as below. You can also modify attributes such as <code>textSize<\/code>, <code>id<\/code> and the <code>text<\/code> itself in the XML code too.<\/p>\n<pre class=\"brush: xml noskimlinks noskimwords\">&lt;TextView\n   android:id=\"@+id\/nameField\"\n   style=\"@style\/TextAppearance.AppCompat.Headline\"\n   android:layout_width=\"wrap_content\"\n   android:layout_height=\"wrap_content\"\n   android:layout_marginTop=\"20dp\"\n   android:text=\"JANE APPLESEED\"\n   android:textColor=\"@color\/colorPrimaryDark\"\n   android:textSize=\"25sp\"\n   android:textStyle=\"bold\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintHorizontal_bias=\"0.498\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toBottomOf=\"@+id\/imageView\" \/&gt;<\/pre>\n<p>Similarly, we need to add the remaining <code>TextView<\/code> on screen and constraint them to the previous <code>TextView<\/code>. To do this, follow the below code sample:<\/p>\n<pre class=\"brush: xml noskimlinks noskimwords\">&lt;TextView\n   android:id=\"@+id\/titleField\"   \n   style=\"@style\/TextAppearance.AppCompat.Widget.ActionBar.Subtitle\"\n   android:layout_width=\"wrap_content\"\n   android:layout_height=\"wrap_content\"\n   android:layout_marginTop=\"13dp\"\n   android:text=\"Educator\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toBottomOf=\"@+id\/nameField\" \/&gt;<\/pre>\n<p>To add a separator between the previous TextView and the ones we plan to create next, let&#8217;s add a horizontal line. Here&#8217;s how you can do that:<\/p>\n<pre class=\"brush: xml noskimlinks noskimwords\">&lt;View\n   android:id=\"@+id\/horizontalLine\"\n   android:layout_width=\"300dp\"\n   android:layout_height=\"2dp\"\n   android:layout_marginTop=\"96dp\"\n   android:background=\"@color\/colorPrimaryDark\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintHorizontal_bias=\"0.495\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toBottomOf=\"@id\/titleField\" \/&gt;<\/pre>\n<p>The purpose of a business card is to make connections! So we cannot miss out on adding our personal information. Let&#8217;s add the <code>TextView<\/code> for our phone number, email, location, and website.<\/p>\n<pre class=\"brush: xml noskimlinks noskimwords\">&lt;TextView\n   android:id=\"@+id\/phoneField\"\n   android:layout_width=\"wrap_content\"\n   android:layout_height=\"wrap_content\"\n   android:layout_marginTop=\"20dp\"\n   android:text=\"+123 4567890\"\n   android:textSize=\"15sp\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toBottomOf=\"@+id\/horizontalLine\" \/&gt;\n\n&lt;TextView\n   android:id=\"@+id\/emailField\"\n   android:layout_width=\"wrap_content\"\n   android:layout_height=\"wrap_content\"\n   android:layout_marginTop=\"12dp\"\n   android:text=\"janeappleseed@gmail.com\"\n   android:textSize=\"15sp\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintHorizontal_bias=\"0.485\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toBottomOf=\"@+id\/phoneField\" \/&gt;\n\n&lt;TextView\n   android:id=\"@+id\/locationField\"\n   android:layout_width=\"wrap_content\"\n   android:layout_height=\"wrap_content\"\n   android:layout_marginTop=\"16dp\"\n   android:text=\"California, USA\"\n   android:textSize=\"15sp\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintHorizontal_bias=\"0.492\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toBottomOf=\"@+id\/emailField\" \/&gt;\n\n&lt;TextView\n   android:id=\"@+id\/websiteField\"\n   android:layout_width=\"wrap_content\"\n   android:layout_height=\"wrap_content\"\n   android:layout_marginBottom=\"32dp\"\n   android:text=\"janeappleseed.com\"\n   android:textColor=\"@color\/colorPrimaryDark\"\n   android:textStyle=\"bold\"\n   app:layout_constraintBottom_toBottomOf=\"parent\"\n   app:layout_constraintEnd_toEndOf=\"parent\"\n   app:layout_constraintHorizontal_bias=\"0.498\"\n   app:layout_constraintStart_toStartOf=\"parent\"\n   app:layout_constraintTop_toBottomOf=\"@+id\/locationField\"\n   app:layout_constraintVertical_bias=\"1.0\" \/&gt;<\/pre>\n<h2><span class=\"sectionnum\">4.<\/span> The Color Palette<\/h2>\n<p>Throughout the app, we will be using a material color palette that we created using <a href=\"https:\/\/material.io\/resources\/color\" target=\"_self\" rel=\"noopener\">the color tool on Material.io<\/a>.<\/p>\n<p>To add the additional colors go to <strong>Res &gt; Values &gt; colors.xml<\/strong> and modify the values to the ones below:<\/p>\n<pre class=\"brush: xml noskimlinks noskimwords\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;resources&gt;\n   &lt;color name=\"colorPrimary\"&gt;#009688&lt;\/color&gt;\n   &lt;color name=\"colorPrimaryDark\"&gt;#00675b&lt;\/color&gt;\n   &lt;color name=\"colorPrimaryLight\"&gt;#52c7b8&lt;\/color&gt;\n   &lt;color name=\"colorAccent\"&gt;#03DAC5&lt;\/color&gt;\n&lt;\/resources&gt;\n<\/pre>\n<p><span class=\"sectionnum\">On running the app, you will see the result as below:<\/span><\/p>\n<h2><span class=\"sectionnum\">5.<\/span>\u00a0Refactoring<\/h2>\n<p>If you used the layout editor&#8217;s design view to drag and drop views, you would notice that the <code>id<\/code> is randomly generated. Having an <code>id<\/code> such as <code>textView9<\/code>\u00a0is not very helpful as it does not convey what the <code>TextView<\/code> displays.<\/p>\n<p>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 <strong>strings.xml<\/strong>. This allows for easy translation in case you decide to have the app in different languages.<\/p>\n<p>To modify the string declaration for any of the <code>TextView<\/code> we created first click the warning triangle in the <strong>Component Tree<\/strong>. This will open up the message with more detail and a suggested fix option. Then click on the <strong>S<\/strong><strong>uggested Fix<\/strong> to let Android Studio fix the issue for you<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":34751,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"categories":[16,23,26,18,21],"tags":[],"class_list":["post-34749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-curation","category-ecommerce","category-logo-design","category-reputation-management","category-wordpress-design"],"_links":{"self":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts\/34749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/comments?post=34749"}],"version-history":[{"count":1,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts\/34749\/revisions"}],"predecessor-version":[{"id":72254,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/posts\/34749\/revisions\/72254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/media?parent=34749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/categories?post=34749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.sacramentowebdesigngroup.com\/sacweb\/wp-json\/wp\/v2\/tags?post=34749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}