PenguinCard Development Guide

PenguinCardDevelopmentGuide.md

Penguin Card Development Guide

Technology: Android

PenguinCard is a sample Android project that shows how to draw an occasion card for Android devices. The PenguinCard was built using just a few XML Android Components, such as RelativeLayout, ImageView and TextView. The coolest part is that you actually draw a Penguin!

This guide drives you through the development process for getting the PenguinCard done. It is really fun!

Sketching the PenguinCard

Sketching what you want to do is very useful. All you need is a notepad and a pen. You can quickly produce a few sketches, discarding any you do not like. Sketching is much faster way to put ideas down, than actually coding.

The image below shows a sketch for the PenguinCard. Drawing a sketch does not require writing any code, however, you may take note of particular features you will want to include.

Drawing the Penguin

Perhaps the coolest piece of the PenguinCard is the penguin image. It was really fun to draw the Penguin! Give it a go, all you need is Paint 3D and watch the video Windows 10 Paint 3D: How to make a penguin. Don't forget to give your personal touch to your Penguin. When you are done export your Penguin as image.

Here is my penguin image. Does it look anything like yours?

Coding the PenguinCard

Now that we have all the ingredients, let's make some soup. Here is the recipe:

1. First you need to create an Android project with Android Studio.
2. Secondly, copy the Penguin image to $PROJECT_FOLDER\app\src\main\res\drawable.
3. Finally, navigate to $PROJECT_FOLDER\app\src\main\res\layout\activity_main.xml and paste the following XML code. If you want to have some fun, read the comments!

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

    <!-- 
    The Penguin image is loaded by this ImageView. 
    Play with android:scaleType. Change it to "center". It is fun!
    Rotate your screen to see how the card looks in different screen sizes and orientations.
    -->
    <ImageView
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/penguin"
        android:scaleType="centerCrop"
        android:layout_below="@+id/header"
        android:layout_above="@+id/footer" />

    <!-- 
    This TextView loads the header. 
    Try changing the background color or the text alignment.
    It is easy, is it not? ;)
    -->
    <TextView
        android:id="@+id/header"
        android:text="Hey Dude!"
        android:textAlignment="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:fontFamily="casual"
        android:textColor="@android:color/holo_red_dark"
        android:padding="16dp"
        android:background="#FFE57F" />


    <!-- 
    This TextView loads the footer. 
    Remove "android:layout_alignParentBottom="true".
    What did just happen? Is this Penguin still watching you? :P
    -->
    <TextView
        android:id="@+id/footer"
        android:text="I Am Watching Ya!"
        android:textAlignment="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:textSize="36sp"
        android:fontFamily="casual"
        android:textColor="#000000"
        android:padding="8dp"
        android:background="#FF6F00"
        android:textStyle="italic" />

</RelativeLayout>

Final Result

Run your project. Does it look like my PenguinCard? If not and you need some help, write a comment. This Penguin may be watching you!

Penguin Card Development Guide for Android by Luisa Pinto is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at https://gist.github.com/lrpinto/6dea7e6b768bb70324192aa67c617b40.