I am writing an app to display NHL scores, and would like for each team in the RecyclerView to have their logo next to it. There is a URL that I can request with a team's ID that will return a hi-res image of the team's logo. I am trying to make it so that I can load the images in my viewModel and set them in the view, as I'm doing for things like the team name, current score, etc.
I have tried using Picasso for this, but it requires a context, which the viewModel doesn't have, and the viewModel cannot directly access the imageView to be able to change it. So how can I load the images and expose them either with data binding or something else, to allow the view to display them?
Here is my MainActivity:
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private lateinit var viewModel: GameListViewModel
private var errorSnackbar: Snackbar? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
binding.lifecycleOwner = this
binding.gameList.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
viewModel = ViewModelProviders.of(this).get(GameListViewModel::class.java)
viewModel.errorMessage.observe(this, Observer { errorMessage ->
if (errorMessage != null)
showError(errorMessage)
else
hideError()
})
binding.viewModel = viewModel
}
private fun showError(@StringRes errorMessage:Int) {
errorSnackbar = Snackbar.make(binding.root, errorMessage, Snackbar.LENGTH_INDEFINITE)
errorSnackbar?.setAction(R.string.retry, viewModel.errorClickListener)
errorSnackbar?.show()
}
private fun hideError() {
errorSnackbar?.dismiss()
}
}
ViewModel:
class GameViewModel:BaseViewModel() {
private val awayTeamName = MutableLiveData<String>()
private val homeTeamName = MutableLiveData<String>()
private val awayTeamScore = MutableLiveData<String>()
private val homeTeamScore = MutableLiveData<String>()
private val timeRemaining = MutableLiveData<String>()
fun bind(response: Game) {
awayTeamName.value = response.gameData.teams.away.name
homeTeamName.value = response.gameData.teams.home.name
awayTeamScore.value = response.liveData.linescore.teams["away"]?.goals.toString()
homeTeamScore.value = response.liveData.linescore.teams["home"]?.goals.toString()
if (response.gameData.status.detailedState == "Scheduled") {
val parser = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss", Locale.getDefault())
parser.timeZone = TimeZone.getTimeZone("UTC")
val formatter = SimpleDateFormat("hh:mm a", Locale.getDefault())
formatter.timeZone = TimeZone.getDefault()
timeRemaining.value = formatter.format(parser.parse(response.gameData.datetime.dateTime))
} else {
timeRemaining.value = response.liveData.linescore.currentPeriodTimeRemaining + " " + response.liveData.linescore.currentPeriodOrdinal
}
}
fun getAwayTeamName(): MutableLiveData<String> {
return awayTeamName
}
fun getHomeTeamName(): MutableLiveData<String> {
return homeTeamName
}
fun getAwayTeamScore(): MutableLiveData<String> {
return awayTeamScore
}
fun getHomeTeamScore(): MutableLiveData<String> {
return homeTeamScore
}
fun getTimeRemaining(): MutableLiveData<String> {
return timeRemaining
}
}
and XML for the recyclerView row:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="viewModel"
type="com.example.nhlstats.ui.game.GameViewModel" />
</data>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/awayTeam"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="12dp">
<ImageView
android:id="@+id/awayTeamLogo"
android:layout_height="36dp"
android:layout_width="0dp"
android:layout_weight="1"
tools:src="@drawable/ic_launcher_background"/>
<TextView
android:id="@+id/awayTeamName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:layout_gravity="center_vertical"
android:text="@{viewModel.awayTeamName}"
tools:text="CHI Blackhawks"/>
<TextView
android:id="@+id/awayScore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:text="@{viewModel.awayTeamScore}"
tools:text="0"/>
<TextView
android:id="@+id/gameTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:text="@{viewModel.timeRemaining}"
tools:text="14:26 3rd"/>
</LinearLayout>
<LinearLayout
android:id="@+id/homeTeam"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginBottom="24dp">
<ImageView
android:id="@+id/homeTeamLogo"
android:layout_height="36dp"
android:layout_width="0dp"
android:layout_weight="1"
tools:src="@drawable/ic_launcher_background"/>
<TextView
android:id="@+id/homeTeamName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:layout_gravity="center_vertical"
android:text="@{viewModel.homeTeamName}"
tools:text="CAR Hurricanes"/>
<TextView
android:id="@+id/homeScore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="2"
android:text="@{viewModel.homeTeamScore}"
tools:text="4"/>
</LinearLayout>
</LinearLayout>
</layout>
Thanks in advance.
Using data binding you should create a custom binding adapter like below:
@BindingAdapter("app:imageUri")
fun loadImageWithUri(imageView: ImageView, imageUri: String){
Glide.with(imageView.context).load(Uri.parse(imageUri)).into(imageView)
}
And change you imageview like this:
<androidx.appcompat.widget.AppCompatImageView
android:layout_height="36dp"
android:layout_width="0dp"
android:layout_weight="1"
app:imageUri="@{viewmodel.teamLogoUri}"/>