Hacker News Reader- Facebook Style

Fork me on GitHub

Splash Image App Mobile

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.

Mobile Landscape

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]));
    }

Mobile Landscape App Widget

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