Day48 of #100DaysOfCode

#CodeTogether Day 48/100

Hii folks 🙌

Today I will be continuing the same pathway in which I will add a list of images using cards in the android app.

Unit 2: Layouts

Pathway 3: Display a scrollable list

Source: https://developer.android.com/courses/android-basics-kotlin/course

Display a list of images using cards

So, today we will add images to our scrolling list of affirmations and also enhance the UI of the app using Material UI.

So, we will start continuing with the same code base and will add the image files named from image1.jpg to image10.png to the project’s res > drawable
folder within the Android Studio.

• Then we will modify the affirmation.kt file by adding another Int parameter named imageResourceId

Affirmation.kt

package com.example.affirmations.model

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes

data class Affirmation(
   @StringRes val stringResourceId: Int,
   @DrawableRes val imageResourceId: Int
)

• After that, we will update the Datasource class by passing in an image resource ID to each Affirmation object that is initialized.

Datasource.kt

package com.example.affirmations.data

import com.example.affirmations.R
import com.example.affirmations.model.Affirmation

class Datasource() {

    fun loadAffirmations(): List<Affirmation> {
        return listOf<Affirmation>(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            Affirmation(R.string.affirmation3, R.drawable.image3),
            Affirmation(R.string.affirmation4, R.drawable.image4),
            Affirmation(R.string.affirmation5, R.drawable.image5),
            Affirmation(R.string.affirmation6, R.drawable.image6),
            Affirmation(R.string.affirmation7, R.drawable.image7),
            Affirmation(R.string.affirmation8, R.drawable.image8),
            Affirmation(R.string.affirmation9, R.drawable.image9),
            Affirmation(R.string.affirmation10, R.drawable.image10)
        )
    }
}

Now we will add an ImageView to the list item layout

• We will open res > layout > list_item.xml Add a LinearLayout around the existing TextView and set the orientation property to vertical.
• Move the xmlns schema declaration line from the TextView element to the LinearLayout element to get rid of the error.

list_item.xml

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

• Inside the LinearLayout, before the TextView, add an ImageView with a resource ID of item_image.

<ImageView
        android:layout_width="match_parent"
        android:layout_height="194dp"
        android:id="@+id/item_image"
        android:importantForAccessibility="no"
        android:scaleType="centerCrop" />

• Now we will update the ItemAdapter to set the image

ItemAdapter.kt

class ItemViewHolder(private val view: View): RecyclerView.ViewHolder(view) {
    val textView: TextView = view.findViewById(R.id.item_title)
    val imageView: ImageView = view.findViewById(R.id.item_image)
}

• Now set the affirmation item’s imageResourceId onto the ImageView of the list item view.

override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val item = dataset[position]
        holder.textView.text = context.resources.getString(item.stringResourceId)
        holder.imageView.setImageResource(item.imageResourceId)
    }

Affirmation App

• Now in the list_item.xml file we will improve the UI using MaterialCardView

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

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

        <ImageView
            android:id="@+id/item_image"
            android:layout_width="match_parent"
            android:layout_height="194dp"
            android:importantForAccessibility="no"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:textAppearance="?attr/textAppearanceHeadline6" />

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

• Add the new color resource to the colors.xml file

<color name="blue_200">#FF90CAF9</color>
<color name="blue_500">#FF2196F3</color>
<color name="blue_700">#FF1976D2</color>

• Now the app looks something like this:

Affirmations App

Today I Learned:

• To add a list of images using cards in the app.
• How to display additional content in a RecyclerView, modify the underlying data model class and data source. Then update the list item layout and adapter to set that data onto the views.
• Small visual tweaks to the app in terms of color and spacing can make the app look more polished and consistent.

That is all for Day48 ✅

Thanks for reading, See you tomorrow!