Android CardView and Toolbar with Material Design

Android CardView and Toolbar with Material Design

In this tutorial we are going to learn how to design and implement android CardView and ToolBar with Material Design. I wrote a post on Android ToolBar with Material Design so this post will be partially build on top of it.

Although in this android tutorial, we will make use of a single CardView to demonstrate how to use a CardView in android. If you are interested to learn more about using CardView and RecyclerView in android, I will suggest you read my tutorial on the topic. The tutorial will help you understand some of the concepts introduce in Android L.

According to Google Android User Guide, CardView is a FrameLayout with a rounded corner background and shadow. CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look across the platform. CardView widgets can have shadows and rounded corners.

CardView is among new widget introduce in android SDK version 21. In association with RecyclerView, it can be used to hold item in rows. CardView has a constant width but a variable height. The height is determined by the collection of objects displayed in the card.

What we will accomplish in this tutorial, is to create a ToolBar and a single CardView that represents a blog post.

If you are using a version of android Studio without support for updated version of appcompat V7 library, you should endeavor to add the compile dependency to your project build.gradle file.

I have add more dependencies. In other to use the CardView, we will add the library as a dependency in our project build.gradle file. I have also add another dependency which is use to make a circular ImageView control. You can read my article on different ways to make a Circular ImageView Design in android here.

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:21.0.3'

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

compile 'de.hdodenhof:circleimageview:1.2.1'

}

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCardView

Package: com.inducesmile.androidcardview

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

I have already described how I achieved the android ToolBar so I will focus on the CardView. Let look at what have changed in our project Strings.xml file below.

<resources>
    <string name="app_name">Android CardView</string>
    <string name="place_holder">Place holder</string>
    <string name="action_settings">Settings</string>
    <string name="action_refresh">Settings</string>
    <string name="action_new">Settings</string>
    <string name="logo_desc">App logo</string>
    <string name="blog_title">How to develop Android CardView</string>
    <string name="blog_content">We will go into details to learn how to develop android CardView application and other important concepts that are necessary in understanding the tutorial </string>
    <string name="read_more">Read more</string>
</resources>

You can reuse the menu_main.xml since nothing was changed in this file. The code is as shown

<menu 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"
    tools:context=".MainActivity">

    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />

    <item android:id="@+id/action_refresh"
        android:title="@string/action_refresh"
        android:icon="@drawable/ic_action_refresh"
        android:orderInCategory="200"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_new"
        android:title="@string/action_new"
        android:icon="@drawable/ic_action_new"
        android:orderInCategory="300"
        app:showAsAction="ifRoom" />

</menu>

The same will be said about the styles.xml. We add some color resources for the ToolBar so that it will conform with Material Design principles. The code is as shown.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryDark">@color/color_primary_dark</item>
        <item name="colorAccent">@color/accent_color</item>
    </style>
</resources>

Finally, we created a colors.xml file and add the following color resources. The colors.xml file is shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_primary">#2196F3</color>
    <color name="color_primary_dark">#1976D2</color>
    <color name="accent_color">#c2110e</color>
</resources>

Now, let us move to our main layout file (activity_main.xml). We have added our ToolBar with the CardView component containing a layout that houses other View controls. The circular ImageView component was added using this xml code

<de.hdodenhof.circleimageview.CircleImageView
   android:layout_width="32dp"
   android:layout_height="32dp"
   android:layout_below="@+id/header_text"
   android:layout_marginTop="8dp"
   android:src="@drawable/face"
   android:id="@+id/circleView"
/>

The complete code snippet for our project layout is shown below

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:background="@color/color_primary"
        android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="72dp"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/blogimage"
                android:contentDescription="@string/place_holder"
                android:gravity="top" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp">

                <TextView
                    android:id="@+id/header_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/blog_title"
                    android:textColor="@color/accent_color"
                    android:textSize="16sp"
                    android:textStyle="bold" />

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/circleView"
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:layout_below="@+id/header_text"
                    android:layout_marginTop="8dp"
                    android:src="@drawable/face" />

                <TextView
                    android:id="@+id/publisher_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_text"
                    android:layout_marginLeft="40dp"
                    android:layout_marginTop="16dp"
                    android:text="Henry"
                    android:textSize="14sp" />

                <ImageView
                    android:id="@+id/comment"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_text"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="16dp"
                    android:layout_toEndOf="@+id/publisher_name"
                    android:layout_toRightOf="@+id/publisher_name"
                    android:contentDescription="@string/place_holder"
                    android:src="@drawable/ic_action_edit" />

                <TextView
                    android:id="@+id/comment_number"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_text"
                    android:layout_marginLeft="48dp"
                    android:layout_marginTop="16dp"
                    android:layout_toEndOf="@+id/publisher_name"
                    android:layout_toRightOf="@+id/publisher_name"
                    android:text="21 Comments"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/blog_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/publisher_name"
                    android:layout_marginTop="24dp"
                    android:text="@string/blog_content"
                    android:textSize="13sp" />

                <Button
                    android:id="@+id/read_more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/blog_content"
                    android:layout_marginTop="16dp"
                    android:text="@string/read_more" />

            </RelativeLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

Since we are done with our main layout file, in our main Activity file (MainActivity.java), we will get the instance of our ToolBar and set it as the application ActionBar using the supported method of the Activity class setSupportActionBar(ToolBar toolbar) . We finally set the logo and logo description as we have done in the last project. The complete code for this class is as shown.

package inducesmile.com.androidcardview;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setTitle(null);

        Toolbar topToolBar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(topToolBar);
        topToolBar.setLogo(R.drawable.logo);
        topToolBar.setLogoDescription(getResources().getString(R.string.logo_desc));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        if(id == R.id.action_refresh){
            Toast.makeText(MainActivity.this, "Refresh App", Toast.LENGTH_LONG).show();
        }
        if(id == R.id.action_new){
            Toast.makeText(MainActivity.this, "Create Text", Toast.LENGTH_LONG).show();
        }
        return super.onOptionsItemSelected(item);
    }
}

Save the file and run your project. If everything works for you, the project will appear like this in your device.

Android CardView and Toolbar with Material Design

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

OTHER INTERESTING POSTS:

No Responses

Add a Comment