Hacker News Reader- Facebook Style

Fork me on GitHub

App Mobile Main Image

In my quest to learn Android programming I joined Udacity Android Developer Nanodegree Program and it culminated in a capstone project of choice. Being a frequent visitor of Hacker News. I decided to code a hacker news reader app with the styling of Facebook newsfeed. Will showcase the app here and elaborate on the image extraction logic.

Features

The main features of the app are

  • Displays the hacker news feed in Facebook style cards
  • Has a detail view to show the curated content
  • Dynamic card re-ordering based on ranking change at the host end
  • Periodic background updates of the data so that user always gets the latest data
  • Bookmark favorite news and separate view to read them
  • Widgets for easier access from home screen

Demo Video (No Sound)

Wrote an image extraction class and dependent procedure. This parses a given link using jsoup and extracts the main image from the link and return it back. It consisted of a simple two steps:-

  • A simple extraction using og metedata
public String getMainImage(){

        Elements metaImg=doc.select("meta[property=og:image]");
        Elements metaTitle=doc.select("meta[property=og:description]");
     //   System.out.println(metaImg);

        if (metaImg.toString().equals("")){
            return getImageFromBody();
        }
        else{
            return metaImg.attr("content");
        }
    }
  • Can’t emphasize enough the need for metadata in all webpages. If the image was not found in the metadata then things git bit tricky
    • Loop and read first 10 img tags from the page
    • Then from the image tags see if any of them is of appropiate size
  if (width > 300 && height>width/2) {
    return linkSt;
}else if (width > 300 && height>200){
    finalLink=linkSt;

}
  • Going back to the cursor adapter if image url is found as null, then override the news tile with color and letter first name.
  if (!(imageUrl.equals("invalid")||imageUrl.equals(""))) {
      //  System.out.println(imageUrl);
        viewHolder.newsImage.setBackgroundColor(Color.WHITE);
        Picasso.with(mContext).load(imageUrl).into(viewHolder.newsImage);
        viewHolder.newsImage.setTag(imageUrl);
        viewHolder.floatingText.setText("");
    }else{
        viewHolder.floatingText.setText(title.substring(0,1));
        viewHolder.newsImage.setImageBitmap(null);
        viewHolder.newsImage.setTag("invalid");
        viewHolder.newsImage.setBackgroundColor(Color.parseColor(colors[i1]));
    }

Widget Screenshot

Libraries Used

  • Hacker News API
  • Jsoup- To parse the weblinks and enable extraction of main image from the link.
  • Picasso- For image processing in Image views.
  • Okhttp- For web network calls.
  • Simonvt.Schematic- For content provider setup.

Google Services Used

  • GCM (Google Task Service)- For periodic task to load data and keep the app news feed updated in backend.
  • Google Analytics- To measure user activity to named screens

Code can be compiled from: https://github.com/abhrajitmukherjee/Hacker-News-Reader

 
comments powered by Disqus