Adding the Android photo screen

Implementing a photo view for cell selections is very similar, although with Android we will be using an intent to create a new activity, which in turn will inflate a new view to display the image and details. Let's start by adding a new XML called photo_view.xml, and paste in the following code:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="4"> 
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_weight="1"> 
        <ImageView 
            android:id="@+id/image_photo" 
            android:scaleType="centerCrop" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:adjustViewBounds="true" /> 
    </LinearLayout> 
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_weight="3" 
        android:weightSum="2"> 
        <TextView 
            android:id="@+id/title_photo" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" /> 
        <TextView 
            android:id="@+id/date_photo" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" /> 
    </LinearLayout> 
</LinearLayout> 

The layout is very much the same as the custom_cell.xml sheet, although we are going to stack items vertically and set the following two properties to keep the correct image aspect ratio:

android:adjustViewBounds="true" 
android:scaleType="centerCrop" 

Note

Make sure XML sheets do not contain the same IDs as any other XML sheet.

Now that we have our user interface for the PhotoActivity, let's add the new activity:

[Activity (Label = "Gallery.Droid", Icon = "@mipmap/icon")] 
    public class PhotoActivity : Activity 
    { 
        /// <summary> 
        /// Raises the create event. 
        /// </summary> 
        /// <param name="savedInstanceState">Saved instance state.</param> 
        protected override void OnCreate (Bundle savedInstanceState) 
        { 
            base.OnCreate (savedInstanceState); 
 
            // Set our view from the "main" layout resource 
            SetContentView (Resource.Layout.Photo); 
 
            var imageData = Intent.GetByteArrayExtra ("ImageData"); 
            var title = Intent.GetStringExtra ("Title") ?? string.Empty; 
            var date = Intent.GetStringExtra ("Date") ?? string.Empty; 
 
            // set image 
            var imageView = FindViewById<ImageView> (Resource.Id.image_photo); 
            BitmapHelpers.CreateBitmap (imageView, imageData); 
 
            // set labels 
            var titleTextView = FindViewById<TextView> (Resource.Id.title_photo); 
            titleTextView.Text = title; 
            var dateTextView = FindViewById<TextView> (Resource.Id.date_photo); 
            dateTextView.Text = date; 
        } 
    } 

Looking at this new activity, what can we see? Notice the attributes at the top:

[Activity (Label = "Gallery.Droid", Icon = "@mipmap/icon")] 

There is no MainLauncher tag because this is not our starting activity. We then add the intent.GetExtras for the image data and strings required to display on our Photo interface.

Now we need to make one addition to the ListAdapter class:

public GalleryItem GetItemByPosition (int position) 
{ 
     return _items[position]; 
} 

When an item in the list is selected, we need to be able to access the selected GalleryItem. Our next step is to add the ItemClick delegate for the ListView. Open up the MainActivity class and add the following to the OnCreate function:

listView.ItemClick += (object sender, AdapterView.ItemClickEventArgs e) =>  
            { 
                var galleryItem = adapter.GetItemByPosition (e.Position); 
                var photoActivity = new Intent(this, typeof(PhotoActivity)); 
                photoActivity.PutExtra ("ImageData", galleryItem.ImageData); 
                photoActivity.PutExtra ("Title", galleryItem.Title); 
                photoActivity.PutExtra ("Date", galleryItem.Date); 
                StartActivity(photoActivity); 
            }; 

Place this after we set the list adapter. When an item is clicked, we simply pull out the gallery item from our adapter by the position passed from the ItemClickEventArgs. Once we have the gallery item, we create the new PhotoActivity intent and pass the extras.

That is all; run the application and play around selecting cells to display the PhotoActivity.