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!

--

--

--

https://www.linkedin.com/in/itskushagra

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

“Official Plugin” Integrating PayTm in your Flutter App: An Ultimate Guide [2022].

Integrating Branch with Kotlin

Debugging LiveData changes made easy

Authenticate with Firebase on Android (Phone Number) JAVA

Data Binding Cookbook Pt. 2: spicing up your logic

Create Splash Screen in Flutter

Day43 of #100DaysOfCode

Power-Up duration

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kushagra Kesav

Kushagra Kesav

https://www.linkedin.com/in/itskushagra

More from Medium

Day66 of #100DaysOfCode

Day65 of #100DaysOfCode

Day35 of #100DaysOfCode

Day52 of #100DaysOfCode