Getting started with Polymer 1.1.0 – Part 3

This post is a follow-up to Getting started with Polymer 1.1.0 – Part 1 and Part 2 and will continue with the implementation of more Polymer web component into the app.

Google Cards

The CardView has been added to Android with API level 21 that corresponds to Android 5.0. CardViews 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.

To create a card with a shadow, use the card_view:cardElevation attribute. CardView uses elevation and dynamic shadows in Android. To implement them in Android, one needs source code similar to:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        card_view:cardCornerRadius="5dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>
</LinearLayout>

A paper-card (the Polymer equivalent to CardView) just needs some HTML and an import.

See the HTML outline of a simple paper-card with a heading below.

<paper-card heading="Card Title">
  <div class="card-content">Some content</div>
  <div class="card-actions">
    <paper-button>Some action</paper-button>						<  /div>
</paper-card>

In addition we are importing <paper-card> and <paper-button>

<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

The app should now look like as presented below with a simple CardView element and a button that implements the nice looking ripple effect that comes with Android 5.

Polymer paper-card with paper-button

A more sophisticated card can be created by adding additional code:

<paper-card heading="Food, food, food!" image="http://lorempixel.com/g/320/180/food" />

<div class="card-actions">
	Please rate:
	<paper-icon-button icon="star" style="color:gold;"></paper-icon-button>
	<paper-icon-button icon="star" style="color:gold;"></paper-icon-button>
	<paper-icon-button icon="star" style="color:gold;"></paper-icon-button>
	<paper-icon-button icon="star-half" style="color:gold;"></paper-icon-button>
	<paper-icon-button icon="star-border" style="color:gold;"></paper-icon-button>
</div>

</paper-card>

This new card has five <paper-icon-button> that are implementing a star as icon graphic. This can be used later on for some rating system or other app features. In the heading, we are using images from lorempixel.com as a place holder image, just to visualize some graphical content in the paper-cards.

The result (when adding three similar cards) will look like the picture below.

Some paper-cards added to our app

The paper-cards do not have a specific styling and are just floating, breaking by themselves when the content area is not wide enough. We will add some CSS later in this post to style the paper-cards and define their dimensions and responsive behavior.

Adding an additional drawer

We started with adding a drawer to the left side, that is app overspanning and available in all states of our single-page app. We are now adding another drawer, that will be available as an additional menu to the right side, but just on the „Additional right viewer“ view.

Starting from the placeholder source from the first part of this tutorial,

<div class="contentMargin">
	<h2>Additional right drawer</h2>
</div>

we are adding another <paper-drawer-panel right-drawer> here. The final source for this view will look like this:

<div class="contentMargin">
  <paper-drawer-panel right-drawer>
    <div class="contentMargin" main>
      <h2>Additional right drawer</h2>
      <p>If you are in mobile mode, try to "drag" the drawer in from the right side.</p>
    </div>
    <div drawer>
        <p>Here comes the drawer content, e.g. a login menu</p>
    </div>
  </paper-drawer-panel>
</div>

Keep in mind, the heading <h2> was moved into the <paper-drawer-panel right-drawer> main div element.

The web page with right drawer – normal mode

This drawer element we just added is placed without any menu icon or anything else and will be visible in the normal mode and is hidden in mobile mode. This behavior is presented in the two figures below.

Right drawer – right menus visible

Right drawer – both menus visible

Adding Google Charts

We are just adding a simple gauge chart to our app. You can find many examples in the Polymer element catalog within the Google Web components. Here is just an example you can add to your app:

<google-chart
  id="mySecondChart"
  type="gauge"
  data='

[["Label", "Value"],["Speed", 45]]', options='{"width": 200px, "redFrom": 80, "redTo": 100, "yellowFrom": 75, "yellowTo": 80, "minorTicks": 5}'> </google-chart>

We are also adding some JavaScript here:

<script>
	function getRandomGaugeValue(offset, factor) {
		return offset + Math.round(factor * Math.random());
	}


	window.setInterval(function() {
		var gauge = document.getElementById('mySecondChart');
		gauge.data = [["Label", "Value"], ["Speed", getRandomGaugeValue(10, 100)]];
	}, 3000);
</script>

This will randomize our values for the „Speed“ label in the gauge and update the gauge every 3 seconds.

For enabling <google-chart> one needs to add <link rel=“import“ href=“../bower_components/google-chart/google-chart.html“> to the import.

Some CSS to style our app

To get the cards and margins right in our app, we are adding some basic CSS styling to the <head>

<style is="custom-style">
	paper-card {@apply(--layout-vertical);
		@apply(--center-justified);
		/*@apply(--layout-center-center);*/
		@apply(--shadow-elevation-2dp);
                max-width: 500px;
		margin-bottom: 16px;
		--paper-card-header-color: grey;
		--paper-card-header-text: {background-color: white;
	}
	}

	.contentMargin {
		margin: 0px 20px 20px 20px;
	}		
</style>

The <paper-card> is formated by using @apply(); statements. There are several options:

@apply(–layout-vertical);
@apply(–center-justified);
@apply(–layout-center-center);
@apply(–shadow-elevation-2dp);

We are adding a vertical layout to our acrds and center them, allowing the cards to take full wide for their content, but limiting the maximum-width to 500px.