I am trying to have the album images for each of the top tracks shown next to their song but no matter what I do they are showing up as little green boxes.
Here is the relevant code:
public void onGetUserProfileClicked() {
if (mAccessToken == null) {
Toast.makeText(this, "You need to get an access token first!", Toast.LENGTH_SHORT).show();
return;
}
// Create a request to get the user profile
final Request request = new Request.Builder()
.url("https://api.spotify.com/v1/me")
.addHeader("Authorization", "Bearer " + mAccessToken)
.build();
cancelCall();
mCall = mOkHttpClient.newCall(request);
mCall.enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
Log.d("HTTP", "Failed to fetch data: " + e);
}
@Override
public void onResponse(Call call, Response response) throws IOException {
try {
String jsonResponse = response.body().string();
Log.d(TAG, "JSON Response: " + jsonResponse);
JSONObject jsonObject = new JSONObject(jsonResponse);
JSONArray itemsArray = jsonObject.getJSONArray("items");
StringBuilder formattedData = new StringBuilder();
// Add header for top tracks
formattedData.append("<h2>Your top tracks!</h2>");
for (int i = 0; i < itemsArray.length(); i++) {
JSONObject trackObject = itemsArray.getJSONObject(i);
JSONObject albumObject = trackObject.getJSONObject("album");
JSONArray imagesArray = albumObject.getJSONArray("images");
String imageUrl = "";
if (imagesArray.length() > 0) {
JSONObject imageObject = imagesArray.getJSONObject(0);
imageUrl = imageObject.getString("url");
Log.d(TAG, "Image URL for track " + i + ": " + imageUrl);
}
String artistName = "";
JSONArray artistsArray = trackObject.getJSONArray("artists");
if (artistsArray.length() > 0) {
JSONObject artistObject = artistsArray.getJSONObject(0);
artistName = artistObject.getString("name");
}
String trackName = trackObject.getString("name");
// Load image using Glide
ImageView imageView = new ImageView(MainActivity.this);
Glide.with(MainActivity.this)
.load(imageUrl)
.into(imageView);
// Create HTML content for each song box
formattedData.append("<div style=\"display:flex; align-items:center;\">")
.append("<div style=\"width: 200px; height: 200px; margin-right: 10px;\">")
.append(imageView)
.append("</div>")
.append("<div style=\"border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;\">")
.append("<p>").append(trackName).append(" - ").append(artistName).append("</p>")
.append("</div>")
.append("</div>");
}
// Display the formatted data with HTML formatting
runOnUiThread(() -> {
profileTextView.setText(Html.fromHtml(formattedData.toString(), Html.FROM_HTML_MODE_COMPACT));
profileTextView.setMovementMethod(LinkMovementMethod.getInstance());
});
} catch (IOException | JSONException e) {
Log.e(TAG, "Error processing response: " + e.getMessage());
runOnUiThread(() -> Toast.makeText(MainActivity.this, "Failed to process response",
Toast.LENGTH_SHORT).show());
}
}
});
}
When I logged the image urls in my logcat to see if theyre valid, they were as when I clicked on them they showed up fine on the internet and I made sure my androidmanifest.xml allowed internet usage.