CardView was released with Android 5.0. It is a view with rounded corners and an elevation with shadows, thus providing a depth feel and simulating a card. Combining this with a recycler view, we get a great-looking list of items, with a behavior and look consistent with many apps. The following image is an example of a list with CardView and custom fonts:

While working with CardView, keep in mind that the rounded corners are implemented differently depending on the Android version. Padding is added to avoid clipping the child views in versions prior to Android 5.0, as also to achieve the shadow effect. In versions later than Android 5.0, shadows are displayed based on the property elevation from CardView, and any child intersecting with the rounded corners is clipped.

To start using CardView, we need to add it as a dependency from the project structure window or add the following line to the dependencies inside build.gradle:

dependencies {
  ...
  compile 'com.android.support:cardview-v7:21.0.+'
}

We can modify our row_job_offer.xml file with a base view as CardView with the content inside. This CardView will have some elevation and rounded corners. To set these attributes, we need to import CardView's own attributes by adding the following schema to the XML:

xmlns:card_view="http://schemas.android.com/apk/res-auto"

The following code will create the new layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="170dp"
    android:layout_margin="10dp"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="4dp"
    >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:padding="15dp"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/rowJobOfferTitle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textColor="#555"
            android:textSize="18sp"
            android:layout_marginBottom="20dp"
            />
        <TextView
            android:id="@+id/rowJobOfferDesc"
            android:layout_marginTop="5dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Description"
            android:textColor="#999"
            android:textSize="16sp"
            />
    </LinearLayout>
</android.support.v7.widget.CardView>

We found a texture of a corkboard set it as a background, and on every card, we added a pin with an ImageView object at the top. The following is the achieved result:

The app looks much better than before; now, it's really a job board. By displaying the same information—the same two TextView with the title and job description—and simply changing the appearance, it evolved from a demo app to an app that could perfectly be launched in the Play Store.

We can continue improving this by changing the font, but before this, we will introduce the design time layout attributes, which will make the design of a view easier and quicker.

When working with design-time attributes, I always remember a funny story that took place in one of my first jobs. I had to display a list of contacts, so when I created the view of the contact, I used dummy data, which is used to assign some text while you create the view so that you can see the size, color, and general look in the design view.

The contact that I created was named Paco el churrero, or Frank the churros maker. Paco is a synonym for Francisco, and a churro—if you don't know—is a fried dough pastry. Anyway, this dummy data was changed to a proper contact name, and when the contact list was shown, these contacts were retrieved from a server. I can't remember whether I was in a hurry to release the app, I forgot to do it, or I simply missed it, but the app went live that way. I started to work on another component, and all was fine until one day, when there was a problem on the server side, and the server was sending empty contacts. The app was unable to override the dummy data with the contact name, and Paco el churrero was shown as a contact! Hopefully, the server was fixed before any user noticed.

After this, I created the view with dummy data, and once I was happy with the view, I removed the dummy data. However, with this approach, when I was asked for a UI change, I had to add the dummy data again.

With the release of Android Studio 0.2.11, the design-time layout attributes were born. These allow us to display text or any attribute in the design view that won't be there when you run the app; this data is only visible in the design view.

To use these, we need to add the namespace tools to our layout. The namespace is always defined in the root element of the view; you can find the line, xmlns:android="http://schemas.android.com/apk/res/android, and add the tools right after it. Use the following code:

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android
xmlns:tools="http://schemas.android.com/tools"

To test this, we will add dummy text to the job offer and job description TextView:

<TextView
    android:id="@+id/rowJobOfferTitle"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    tools:text="Title of the job"
    android:textColor="#555"
    android:textSize="18sp"
    android:layout_marginBottom="20dp"
    />
<TextView
    android:id="@+id/rowJobOfferDesc"
    android:layout_marginTop="5dp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    tools:text="Description of the job"
    android:textColor="#999"
    android:textSize="16sp"
    android:ellipsize="marquee"
    />

If you have problems rendering the design view, change the Android version or the theme, as in the following image. If the problem persists, ensure that you have the latest version of Android Studio and the latest Android API downloaded:

Once the view is rendered, we can see the job offer with the title and description from the design-time attributes.

You can use any attribute, text color, background color, and even image source, which is really useful when you create a view which contains an image that will be downloaded from the internet when the app is running, but you need a preview image to see how the view looks while creating it.

When working with customs fonts on Android, there is an amazing open source library—Calligraphy by Chris Jenkins—that allows us to set a default font for our whole app. This means that every widget with text, a Button, TextView, and EditText will show this font by default and we don't have to set the font individually for every single item in our app. Let's take a look at this in more detail and consider a few arguments in favor of Calligraphy.

If we want to apply a custom font, the first thing that we need to do is to place that font in the assets folder of our app. If we don't have this folder, we need to create it inside the main method, at the same level as java and src. Create a second folder, fonts, inside assets and place the font there. In our example, we will use the Roboto font; it can be obtained from Google fonts at https://www.google.com/fonts#UsePlace:use/Collection:Roboto. When the font is downloaded, the app structure should look similar to the following screenshot:

Once the font is in its place, we need to create a Typeface object from this font and set it to myTextView:

Typeface type = Typeface.createFromAsset(getAssets(),"fonts/Roboto-Regular.ttf"); myTextView.setTypeface(type);

If we now wanted to apply the same font to all the components in our app, such as tabs, the title, and job offer cards, we would have to repeat the same code in different places around our app. Apart from this, we will also have performance issues. Creating a font from an asset requires access to the file; it is an expensive operation. If we changed the typeface for the job title and the job description inside the adapter, the view of our app wouldn't be fluent while scrolling anymore. This brings in extra considerations; for instance, we would have to load the typeface once in a static class and use it along with the app. Calligraphy handles all of this for us.

Another good reason to use calligraphy is that it allows us to set the font in the XML, so we can have different fonts in the same view and there is no need to set the typeface programmatically. We just need to add the fontPath attribute to the widget and optionally the ignore attribute to avoid warnings of Android Studio not detecting fontPath:

<TextView     android:text="@string/hello_world"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     
fontPath="fonts/Roboto-Bold.ttf"
tools:ignore="MissingPrefix"/>

Now that we have explained the advantages of calligraphy, we can use it in our app. Add the following line to the dependencies in build.gradle:

compile 'uk.co.chrisjenx:calligraphy:2.1.0'

To apply a default font, add the following code to Oncreate() inside MAApplication:

CalligraphyConfig.initDefault(new CalligraphyConfig.Builder().setDefaultFontPath("fonts/Roboto-Regular.ttf").setFontAttrId(R.attr.fontPath).build());

And the following to any activity where we want to display the default font:

@Override protected void attachBaseContext(Context newBase) {super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase)); }

To finish, we can find a handwriting font that we like and set it to the card's title and description, which would look similar to the following output: