Modern Android App Development with Java/

...

/

Displaying Data From Code

Displaying Data From Code

In this lesson, we will implement the recycler view adapter to render a list of blog articles.

We'll cover the following...

Loading data from the Internet #

During the previous lessons, we created a BlogHttpClient which loads a list of blog articles. Let’s modify our code to support the new JSON format.

Old JSON format:

Press + to interact
{
  "data": [
    {
      "title": "G'day from Sydney",
      "date": "August 2, 2019",
      "views": 2687,
      "rating": 4.4,
      "image": "https://bitbucket.org/dmytrodanylyk/travel-blog-resources/raw/3436e16367c8ec2312a0644bebd2694d484eb047/images/sydney_image.jpg",
      "author": {
        "name": "Grayson Wells",
        "avatar": "https://bitbucket.org/dmytrodanylyk/travel-blog-resources/raw/3436e16367c8ec2312a0644bebd2694d484eb047/avatars/avatar1.jpg"
      },
      "description": "G'day mate! Welcome to Sydney, where you come for the ..."
    }
}

The main changes in the new JSON format are:

  • we have id attribute
  • the image and avatar now contain a relative path
Press + to interact
{
  "data": [
    {
      "id": 1,
      "title": "G'day from Sydney",
      "date": "August 2, 2019",
      "views": 2687,
      "rating": 4.4,
      "image": "/images/sydney_image.jpg",
      "author": {
        "name": "Grayson Wells",
        "avatar": "/avatars/avatar1.jpg"
      },
      "description": "G'day mate! Welcome to Sydney, where you come for the ..."
    }
  ]
}

In the BlogHttpClient, we need to change the URL to the following:

Press + to interact
  public static final String BASE_URL = "https://bitbucket.org/dmytrodanylyk/travel-blog-resources";
  public static final String PATH = "/raw/3eede691af3e8ff795bf6d31effb873d484877be";
  private static final String BLOG_ARTICLES_URL = BASE_URL + PATH + "/blog_articles.json";

This gives us the ability to concatenate BASE_URL with the relative path of blog image or author avatar. Let’s add additional get methods to Author class and Blog class which are going to return full image URLs.

Press + to interact
public class Author {
    ...
    private String avatar;
    public String getName() {
        return name;
    }
    public String getAvatarURL() {
        return BlogHttpClient.BASE_URL + BlogHttpClient.PATH + getAvatar();
    }
}
Press + to interact
public class Blog {
    ...
    private String image;
    public String getImage() {
        return image;
    }
    public String getImageURL() {
        return BlogHttpClient.BASE_URL + BlogHttpClient.PATH + getImage();
    }
}

Now, we can modify MainActivity code and add a blog loading code similar to what we have in BlogDetailsActivity.

Press + to interact
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        loadData();
    }
    private void loadData() {
        BlogHttpClient.INSTANCE.loadBlogArticles(new BlogArticlesCallback() {
            @Override
            public void onSuccess(List<Blog> blogList) {
                runOnUiThread(() -> {
                    // TODO show data
                });
            }
            @Override
            public void onError() {
                runOnUiThread(() -> {
                    showErrorSnackbar();
                });
            }
        });
    }
    private void showErrorSnackbar() {
        View rootView = findViewById(android.R.id.content);
        Snackbar snackbar = Snackbar.make(rootView, "Error during loading blog articles", Snackbar.LENGTH_INDEFINITE);
        snackbar.setActionTextColor(getResources().getColor(R.color.orange500));
        snackbar.setAction("Retry", v -> {
            loadData();
            snackbar.dismiss();
        });
        snackbar.show();
    }
}
...