blog.pleb.in

I released a new version of Nadget in the Google Play Store. It now supports notifications allowing the user to choose a time to be notified; on selecting the notification, the app opens and gets refreshed. There a few UI changes, a new icon and a rewritten drawer.

Check out the screenshots below.

The new icon designed using Figma, an excellent online graphics editor with easy-to-use layers support.

Main screen with a shortcut menu to change to dark theme and get to settings



Notifications


The redesigned drawer

I released a new version of Nadget on Google Play yesterday. The new version features a dark theme for easy reading at night and an option to switch off image loading in the main list (useful if you have a bad connection or want to conserve data).

Do check it out on Google Play, or Amazon Appstore for Android or GetJar

I always thought that realizing an idea into code was the toughest part of app development. Having completed development and published the app in the Play store, I realize that promoting an app is no mean task. With little or no promotion, the app is just a drop in the ocean in the Play store. More so, if you are offering an app with no ads. In the past few weeks, while I have been trying to publicize my app  for free, I found the following resources useful:

• cpimobi.com gives 50 free installs of your app, thereafter you would be charged per install. This is a good place to start with.
• There are many review exchange sites such as ReviewsMotion and Favorr that help developers review each others' apps. Developers join these sites and list their apps. You select an app to review, use it and publish a review in the Play store. The user whose app was reviewed is notified and does the same. 
• XDA is considered a forum for Android experts. Several developers visit the forum to list and check out apps. You can create a thread and submit your app there 
• Appszoom is an app aggregation site that lists the apps with a good summary page 

• Send out a tweet announcing your app: if you have many followers, then this might be effective 
• Facebook and Google Plus Android groups: there are too many of them, pick the one with the most recent activities and post there
• If you have developed using Android Material design, you can submit it in the Google Plus Material Style Apps group. If you have joined MaterialUp, a site for promoting Material design, listing your app in this group might lead it to be featured in the site. 

Never forget to track threads and comments in the groups and forums where you have your app listed. People hate non-responsive developers who are cold to bugs or feedback.

Nadget has been featured on MaterialUp - a site that showcases apps, UI kits, icons and other UX components built following Material design guidelines. This is a great a honor to me as I have looked to MaterialUp for inspiration while designing the app. Do checkout the site.

After months of development, I finally completed and published my app, Nadget on Google Play. The app offers a selection of feeds from Indian gadget and technology sites. The UI follows Material design guidelines and provides for an uninterrupted reading experience.

Posts can be shared or saved for later reading. I have also integrated with Dropbox to export the list of selected feeds and saved articles in case you are moving to a new device or restoring from a hard reset. For users who would like to suggest other feeds, I have included an option to do so.

Coding done, testing done, testing on multiple devices done. What next? Publishing the app on the Google Play store. Publishing on the Play store is not a complex process but it is helpful to be prepared about a few things. Publishing is done through the Google Play Developer Console and the process is straightforward.

• After paying the fees of 25$, you enter the app details and upload its APK file. The device compatibility of the app will be shown.
• The next step is the most important: store listing. This is how the world will see your app. 
• Fill the short description - keep it catchy to interest the user; if you can't, then keep it short 
• Fill the full description - while there is no fixed format, it is better to enter bullets here instead of paragraphs. There is no automatic bulleting so add hyphens at the beginning of each point. As with screenshots, remember to keep the important points at the top 
• Upload the app's screenshots - make sure to highlight the main screen and the best parts of the app (if you are building for tablets, you have to upload separate screenshots in tablet form)
• Upload a high resolution icon (512x512) - It is never enough to emphasize the importance of a good app icon in high resolution as this is the face of the app, even before it is downloaded. Roman Nurik's Android Asset Studio was used to create the app's launcher icon and it generates icons similar to Google's own apps
• Upload a feature graphic in JPG or PNG of size 1024 x 500 dimensions - be creative and add any messages that you want to highlight; this is like a banner ad. Norio's Android Feature Graphic Generator is easy to use and was used to create the feature graphic 
• Upload a promo graphic in JPG or PNG of dimensions 180 x 120- a smaller one which is probably used in older Play stores
• Upload a promo video uploaded to YouTube - a simple way to create a promo video is using the adb. Connect your device to a PC, then on a command shell type the command: adb shell screenrecord /sdcard/videos/demo.mp4 and run your app on your device. A video of your screenshots will be recorded and stored in the location mentioned.The video should be uploaded to youtube and the link should be provided. Note that the full youtube link such as https://www.youtube.com/watch?v=cpUPzmlh7PA should be entered instead of  https://youtu.be/cpUPzmlh7PA. This is important otherwise your video will not appear on Play.
• While the video and promo graphic are optional, it is important to upload them as they help in marketing the app. 
• If you are app supports multiple languages, do the steps above for each of the language that it supports 
• The next step is to complete a questionnaire on the content of the app which generates the rating of the app. 
• Finally choose the category for the app, fill your contact details and submit.

My app Nadget, was live within a few hours of publishing of it. Some users have said that it could take a few days too. This is dependant on the permissions that the app requests and possibly its content rating. In most cases, the app should be live on the Google Play Store in less than half a day. But make sure you spend time in creating the promotional graphics so that your app gets the attention it deserves in the Google Play store.

For an app that I am building, I have been looking to extract the main image for an article from a webpage. Search on the net indicated that JSoup was probably "the" library to do it. But it too does not mention how to get the main image associated with the article. Any modern webpage has several images in it - advertising banners, site logo, social media sharing icons, article related images and more advertising. How do we extract the main image from an article? I was not willing to think and write code to do this; partly because I am lazy and also because I knew that this was done before and code should be available for this.

My initial search took me to Mashape. Searching through the APIs there, I found the free Article Analysis API by adlegant. While not required, I also decided to use the Unirest Java library by Mashape to access the API. My initial tests with the API were all positive, a simple call to the API endpoint with the URL to be analyzed and the credentials provided by Mashape was all that was required. It provided a JSON response similar to the one below:

{
  "author": [
    "Verge Staff"
  ],
  "categories": [
    "economy, business and finance"
  ],
  "cleaned_text": "Black Friday is right around the corner, and there are plenty of great deals to be had. We've been covering the deals for weeks now, but if you want to cut through the mess and just score the best deals you can find, you've come to the right place.\n\nAs to be expected, this year there are lots of deals to be had on TVs small and large, 1080p to 4K. You can also get a great price on last year's iPads, which are still better tablets than pretty much anything save for this year's iPads. If you're in the market for a smartwatch or fitness tracker, you can save some money on some really great options this weekend. And if you want to pick up a laptop or new headphones, there are deals to be found too.\n\nKeep in mind that the best deals won't last long and many of them are limited to Friday itself (or in rare occasions, Thursday too). To win the Black Friday game, you have to be aggressive and quick, there's no time to sleep when deals are to be had. That said, here are the 20 best Black Friday deals this year. Warm up your credit cards and get a good night's sleep, it's time to make the consumer machine work.",
  "date": "2014-11-26T19:15:45Z",
  "entities": [
    "Warm",
    "Black",
    "TVs"
  ],
  "image": "https://cdn1.vox-cdn.com/thumbor/IkFo5ddhDEXA2t_mUfezCdvGbUI=/35x0:606x381/1280x854/cdn0.vox-cdn.com/uploads/chorus_image/image/44236174/black-friday-branding-jc3.0.png",
  "language": "en",
  "link": "http://www.theverge.com/2014/11/26/7292895/best-black-friday-deals",
  "main_body": "<div class=\"m-article__entry\" gravityScore=\"204\" gravityNodes=\"3\"><p>Black Friday is right around the corner, and there are plenty of great deals to be had. We've been&#160;covering the deals for weeks now, but if you want to cut through the mess and just score the best deals you can find, you've come to the right place.</p>&#13;\n<p>As to be expected, this year there are lots of deals to be had on TVs small and large, 1080p to 4K. You can also get a great price on last year's iPads, which are still better tablets than pretty much anything save for this year's iPads. If you're in the market for a smartwatch or fitness tracker, you can save some money on some really great options this weekend. And if you want to pick up a laptop or new headphones, there are deals to be found too.</p>\n \n&#13;\n<p>Keep in mind that the best deals won't last long and many of them are limited to Friday itself (or in rare occasions, Thursday too). To win the Black Friday game, you have to be aggressive and quick, there's no time to sleep when deals are to be had. That said, here are the 20 best Black Friday deals this year. Warm up your credit cards and get a good night's sleep, it's time to make the consumer machine work.</p>&#13;\n &#13;\n &#13;\n &#13;\n &#13;\n &#13;\n &#13;\n \n       \n\n    </div>\n  ",
  "summary": [
    "That said, here are the 20 best Black Friday deals this year.",
    "Black Friday is right around the corner, and there are plenty of great deals to be had.",
    "We've been covering the deals for weeks now, but if you want to cut through the mess and just score the best deals you can find, you've come to the right place.",
    "Keep in mind that the best deals won't last long and many of them are limited to Friday itself (or in rare occasions, Thursday too).",
    "To win the Black Friday game, you have to be aggressive and quick, there's no time to sleep when deals are to be had."
  ],
  "tags": [
    "best deals",
    "laptop",
    "expected year",
    "said 20",
    "sleep",
    "best",
    "nights",
    "20",
    "tracker",
    "black",
    "friday game",
    "time make",
    "save",
    "mess",
    "right corner",
    "friday",
    "really great",
    "save money",
    "year ipads",
    "friday deals",
    "great",
    "headphones",
    "deals",
    "best black",
    "black friday"
  ],
  "text_sentiment": {
    "sentiment": 0.2986327561327561,
    "subjectivity": 0.4551911976911977,
    "word": "positive"
  },
  "title": "The 20 best Black Friday deals"
}

It perfectly extracts the main image associated with the article and provides the link. All one needs to do is to use the org.json package and get the image's value. Nice and clean!

But... as I was testing the API inside the app for extracting the images, I found that most of the time it was unavailable. I agree that it is free and there should be no expectation from my side, yet I felt that the downtime was too much. As I type this post, I see that it seems to fail for a few URLs that are perfectly valid. While Mashape provides some basic support for even free APIs, I did not utilize it.

Instead, I decided to go with a parser based code to get the main image. I found a class called ImageExtractor by Gavin Bisesi (Daenyth) written using JSoup. The code employs the technique used by Google Plus to extract images from shared URLs.  It does the job well and there is no dependency on external API endpoints.

While there would be many options available to scrape webpages and get the images, JSoup will probably be the primary option and APIs would be the next. If you are short on time and willing to spend, paid APIs maybe an option. If not, you would have to try out classes such as the one listed above to get the job done.

The new version of Google apps such as Google Now and Google News all use cards in their UI.


Behind the scenes, it is CardView at work. CardView is part of the android support library and is being used extensively with RecyclerView as a replacement for the ListView.
Just like you would define a list item, you define a cardview in its own xml file such as list_item.xml. The CardView can include Imageviews and Textviews inside a linearlayout. To provide a card-like to the component, CardView includes the following attributes:

app:cardCornerRadius="10sp"app:cardElevation="2sp"app:cardBackgroundColor="#ffffff"app:cardUseCompatPadding="true"

The cardCornerRadius provides for a rounded view for the cards, like rounded rectangles. The cardElevation gives a 3D look to the cards. The cardUseCompatPadding provides uniform padding for the cards across platforms (Lollipop and others).

As with any other UI component, CardView can be added using the findViewById method

View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.main_view_row, parent, false);

If you are using this with RecyclerView, the CardView will be typically added inside the RecyclerView adapter's onCreateViewHolder method.

There are several good blog posts that explain the concept and theory of a RecyclerView and how to implement it. This post is mainly looks at the key code changes required when moving from ListView to RecyclerView.

1. Add the following to the build.gradle under the app module

    dependencies {
        compile 'com.android.support:recyclerview-v7:23.2.1'
    }

2. Probably the biggest change is the adapter from BaseAdapter or ArrayAdapter to  RecyclerView.Adapter.

public class MainViewAdapter  extends RecyclerView.Adapter<MainViewAdapter.PostViewHolder>

Implementing the "pull to refresh" feature in Android 5.1 upwards is fairly straightforward. Here are the steps:

1. Wrap the list where you want to implement it with a SwipeRefreshLayout

<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ListView android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</android.support.v4.widget.SwipeRefreshLayout>

2. Get the SwipeRefreshLayout in the Activity or Fragment in onCreateView method like so

swipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.swiperefresh);

3. If using a Fragment, add a method onViewCreated. In it attach the onRefreshListener to the SwipeRefreshLayout

 @Override
 public void onViewCreated(View view, Bundle savedInstanceState)
 {
  super.onViewCreated(view, savedInstanceState);
  swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
   @Override
   public void onRefresh() {
    Log.i(TAG, "onRefresh called from SwipeRefreshLayout");

    //add code here to refresh the list
   }
  });
 }

Done. 

I was looking at the examples in the Android Developer site for connecting to the web and found the Network Connect sample. It illustrates how to use a HTTPURLConnection class and fetch details from the stream. While tinkering with the sample code, I moved the code from the AsyncTask to the main class. The gist is shown below.

   public boolean onOptionsItemSelected(MenuItem item) {
                try{
                    URL url = new URL("https://news.google.com");
                    HttpURLConnection conn = (HttpURLConnection) url.openConnection();
 .... 
                    conn.connect();
                    InputStream stream = conn.getInputStream();
                }
                catch (Exception e){
                    Log.e(TAG, e.toString());
                }
                
 return true;
    }

When I ran the code, I got an exception - android.os.NetworkOnMainThreadException.What this essentially means is that we cannot do any time consuming operations, such as connecting to the network or loading large images on the main thread, as these would ruin the user experience of the app. So, Google has mandated (quite rightly so) to use the AsyncTask class which helps in doing operations in the background. So, in the AsyncTask class the key methods that help us are doInBackground and onPostExecute. We need to extend the AsyncTask class and override the doInBackground and onPostExecute methods. Key points and steps: When extending the AsyncTask class, the parameters should match the methods' return types. doInBackground will execute the logic onPostExecute will have the results Parameter of onPostExecute should match the return type of doInBackground; in this case both are Strings Instantiate the class that extends AsyncTask in the main class and call the execute method passing the arguments of the doInBackground method

    private class WebDataLoaderTask extends AsyncTask {

        @Override
        protected String doInBackground(String... urls) {
            try {
                    URL url = new URL("https://news.google.com");
                    HttpURLConnection conn = (HttpURLConnection) url.openConnection();
 .... 
                    conn.connect();
                    InputStream stream = conn.getInputStream();
 ...
     return new String(buffer); 
                }
                catch (Exception e){
                    Log.e(TAG, e.toString());
                }
        }

        @Override
        protected void onPostExecute(String result) {
 //results are available here 
 Log.i(TAG, result);
        }
    }

The earlier code now looks like this:

   public boolean onOptionsItemSelected(MenuItem item) {
                try{
     new WebDataLoaderTask().execute("https://news.google.com");
                }
                catch (Exception e){
                    Log.e(TAG, e.toString());
                }
                
 return true;
    }

By moving to the AsyncTask based approach the android.os.NetworkOnMainThreadException is gone and the app provides a good user experience.

After a gap of an year, I decided to get back to Android app development. I learnt that ADT for Eclipse is no longer the IDE of choice and Android Studio is the official IDE. The installation of Android Studio was painful with the following error related to the tools directory refusing to go away even after several retries.



Eventually, it got installed but I still do not know how. I do not recall the ADT installation being so irritating. I learnt later that others did not have the same error... Strange.
I hope the rest of the features in the IDE make up for this annoyance. As I get more familiar with the IDE, I find that there are indeed features that make it worthwhile. For instance, when an external library is listed in the dependencies in the application module's build.gradle file, the Studio itself (or IntelliJ) will pull it from the remote location. No need to actually download, provide the file location etc.