Android Development — Part 3

Building Birthday Card

First of all create new project similar as done in Part 1. In this, section you will learn to create a simple UI of birthday card. After project is created you will see scree as below.

This is activity_main.xml file. Location to this file is app>res>layout>activity_main.xml. Next to bring this screen look at right side you will see preview over there .Click that button. This is Text View where you write xml code and their is Design view where we can drag and drop to create design.

Design View

In this tutorial we will be using RelativeLayout . So, go to text view and change android.support.constraint.ConstraintLayout to RelativeLayout. Now add two TextView and ImageView to our design . activity_main.xml will look something like this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.birthdaycard.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/card"
        android:scaleType="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textview"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:fontFamily="sans-serif"
        android:textSize="30sp"
        android:textColor="@color/colorBlue"
        android:id="@+id/textView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textview2"
        android:fontFamily="sans-serif"
        android:textSize="30sp"
        android:textColor="@color/colorBlue"
        android:layout_marginRight="25dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

If you run this program by Click Play button on top it will give errors. Because we have not define color and strings i,e it gives error in

TextView
android:text="@string/textview"
android:text="@string/textview2"
android:textColor="@color/colorBlue"
ImageView
        app:srcCompat="@drawable/card"

Solving these error, First solving for TextView. Goto app>res>values>strings.xml . This file is where we define strings that are is in our project. Add these lines of code

<string name="textview">Happy Birthday</string>
<string name="textview2">From Ranjan</string>

And Goto app>res>values>colors.xml. This file is where you define color in hex code. Add this code inside resource attribute .Given #1a237e defines a hex code for blue color.

<color name="colorBlue">#1a237e</color>

Solving error for ImageView. Fist add an image to app>res>drawable. In this folder we keep our images that our project need.In our project replace “@drawable/card” card with your file name. You don’t need to worry about extensions.

You will see your design similar to picture below.Now, run (refer to part 1 if confused) the app and you will see same design in your mobile or emulator.