Adding extra images/icons to CardFragment (Android Wear)

Question

I'm looking at this sample image from Google, and trying to figure out how to implement something like this.

It looks very similar to the standard CardFragment layout that takes a title, description and icon. But I see an extra clock image/animation on the left, which makes me think they use a custom layout. Is this possible to do with a standard CardFragment? Or is there another convenience class that allows support for multiple icons?

Answer 1

I accomplished this by extending the CardFragment and overriding onCreateContentView:

@Override
public View onCreateContentView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    mRootView = (ViewGroup) inflater.inflate(R.layout.fragment_my_card, null);
    ...
}

This lets you control what goes on the white card.

Answer 2

The sample image that you are showing is actually a custom notification. You will need familiarize yourself with Android Wear notifications here:

Custom Notifications

This exercise is a bit lengthy so I'll try to be brief but concise.

1) First, you will need to define a custom notification layout, which defines the notification's appearance in an XML layout file. To duplicate Google's example, define an XML layout that contains an ImageView for the circular progress timer and two text fields for the workout descriptions:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal">
   <ImageView
    ...
   </>
   <RelativeLayout
      android:layout_marginStart="20dp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      xmlns:android="http://schemas.android.com/apk/res/android">
      <TextView
       ...
      </>
      <TextView
       ...
      </>
  </RelativeLayout>

2) Create a class CircularTimer.class that extends the Drawable API. This class should implement a start() and stop() methods to handle the timer's countdown. The Drawable API is out of the scope for this exercise but you can find out more by searching the web on progress bars. For brevity, here's an example:

public class CircularTimer() extends Drawable {
   ...
   public CircularTimer(int maxValue) { ... }

   @Override
   public void onDraw(Canvas canvas) {
      // Use drawCircle(), drawArc() to draw a circle and pie bar
      // Use drawText to draw the timeout value in center of circle
   }
   ...
}

4) Create a class WorkoutCustomView.class and set its content view to your previously defined XML. Get a reference of your ImageView and set a drawable object for the setImageDrawable() method. For example:

mImageView = (ImageView) findViewById(R.id.imageview);
mCircularTimer = new CircularTimer(60); // 60s countdown
mImageView.setImageDrawable(mCircularTimer);

3) Setup your basic notification:

NotificationCompat.Builder builder = new NotificationCompat.Builder(this)
   .setContentTitle("Workout")
   .setContentText("Push Ups")
   .setSmallIcon(R.drawable.ic_bicep);

4) Create an intent and pending intent that will be launched by the custom notification:

Intent i = new Intent(this, WorkoutCustomView.class);
PendingIntent pi = PendingIntent.getActivity(this, 0, i, PendingIntent.FLAG_UPDATE_CURRENT);

5) Set the pending intent object for the setDisplayIntent() method of the WearableExtender class:

    NotificationCompat.WearableExtender we = new NotificationCompat.WearableExtender()    
.setDisplayIntent(pi);

// Add wearable specific features
builder.extend(wearableExtender);

6) Dispatch your notification

NotificationManagerCompat notificationManager =
NotificationManagerCompat.from(this);
notificationManager.notify(NOTIFICATION_ID, builder.build());

Hope this helps!

For further reading, checkout http://www.learnandroidwear.com/wear-custom-notification. The author actually implemented an exact replicate of your example.

Andrew