Adding Extra Images/icons To Cardfragment (android Wear)

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

Solution 1:

I accomplished this by extending the CardFragment and overriding onCreateContentView:

@OverridepublicViewonCreateContentView(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.

Solution 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"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><ImageView...
   </><RelativeLayoutandroid: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:

publicclassCircularTimer() extends Drawable {
   ...
   publicCircularTimer(int maxValue) { ... }

   @Override
   publicvoidonDraw(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 = newCircularTimer(60); // 60s countdown
mImageView.setImageDrawable(mCircularTimer);

3) Setup your basic notification:

NotificationCompat.Builderbuilder=newNotificationCompat.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:

Intenti=newIntent(this, WorkoutCustomView.class);
PendingIntentpi= PendingIntent.getActivity(this, 0, i, PendingIntent.FLAG_UPDATE_CURRENT);

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

    NotificationCompat.WearableExtenderwe=newNotificationCompat.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