Skip to content

Instantly share code, notes, and snippets.

@nesquena

nesquena/instagram.md Secret

Created November 6, 2014 05:41
Show Gist options
  • Save nesquena/5241071d410ac8ad0c7e to your computer and use it in GitHub Desktop.
Save nesquena/5241071d410ac8ad0c7e to your computer and use it in GitHub Desktop.
Download ZIP
Instagram Client Hints
Raw
instagram.md

Project 1 (Instagram Client) Helpful Hints

Here's a list of useful notes you may find helps save you time while developing the Instagram Client or running into problems:

  • Tip #1: Make sure to review the Instagram API and what the expected response looks like.

  • Tip #2: Scrolling vertically on Android emulator is done via pushing down on the left mouse and dragging up as you would do to scroll with your finger on the device.

  • Problem #1: Can't get back the JSON Response! A number of people always run into issues with their emulator and not being able to access the Instagram API. If you are pretty sure you have the code right and you can't seem to get any response back from the API, try these steps:

  • Check the URL to ensure that you are passing the correct client_id with the request.

  • Make sure you have added the internet permission
    <uses-permission android:name="android.permission.INTERNET" /> to your manifest.

  • Ensure the emulator has access to the internet, otherwise all network requests fail.

  • Restart the emulator (close window and relaunch) until you have verified internet access above.

  • Obtain the exact url (by breakpointing or logging) that you are going to send a request to and paste the url into your browser to verify the API response is coming back correctly.

  • Make sure you are using the new JsonHttpResponseHandler()(docs) in your AsyncHttpClient network call and make sure you are sending
    client.get(url, new JsonHttpResponseHandler() { ... })

  • Verify that the onSuccess signature is correct. The Image search API returns a JSON dictionary so make sure the onSuccess is using JSONObject and not JSONArray in this case. This is entirely dependent on whether a dictionary or array is the root object i.e
    public void onSuccess(int statusCode, Header[] headers, JSONObject response)

  • Add an onFailure to the JsonHttpResponseHandler callbacks and log there to ensure that its not being hit

  • Check your LogCat to make sure there are no specific error messages (and watch this debugging video for more tips), use filters to more easily read the log.

  • Uninstall the app from the emulator and allow it to be fully re-installed by relaunching it from within eclipse.

  • Restart Eclipse (completely close and relaunch)

  • Problem #2: Parsing JSON data can raise an exception if certain keys are null! When parsing JSON data, you want to program defensively and verify that keys exist and are not null. You can verify that a key exists with the notNull method or optionally extract a key (only if it exists) with the opt prefix method. For example, if (photoJSON.optJSONObject("caption") != null) { ... } will extract the caption only if the caption is not null and will return null otherwise.

  • Tip #3: To make the UI of your Instagram client look more like the actual Instagram app, switch to XML view of your activity layout and play around with different attributes. Read more about this in our RelativeLayout Cliffnotes.

  • Tip #4: In order to have a single row of text which has two different styles (i.e username styled differently from comment), we can use a single TextView leveraging the spannable functionality to format our TextView body using basic HTML.

  • Tip #5: Making the photo appear more like the display on the official Instagram provides time for experimentation with a few different properties.

    • First, check out the different scale types for the ImageView and make sure to set adjustViewBounds to true.
    • When loading with Picasso, experiment with different loading behaviors such as .fit().centerInside() or .resize(x, y) specified before the .into(...) command.
    • In the adapter, can be useful to calculate the aspect ratio of the image (width / height) and then set the ImageView width to screen width and the height to correct calculated height to maintain the aspect ratio of the image.
    • See this thread about preserving aspect ratio with Picasso.

  • Tip #6: To display the photo date as a relative timestamp, we can use DateUtils. The Instagram API returns unix timestamps in the long format of 1382576494. To convert these into relative dates, we just need to multiply the long date by 1000: DateUtils.getRelativeTimeSpanString(longCreatedAt * 1000, ..., ...) and this will return a relative string such as "4 hours ago". See this article for how to display relative timestamps.

  • Tip #7: For displaying rounded images such as for a profile image in Eclipse, check out the third-party CircularImageView library which makes circular image displays easy. Import the lopspower's circularimageview folder as a library project. Just load the image into the circular image view using picasso. If you run into any issues with support-v4 conflicts, follow this advice to resolve. After adding the view to the XML, you will need to add xmlns:app="http://schemas.android.com/apk/res-auto" at the top of your layout file at the XML root. Read about how they rounded the image for more details. For Android Studio users, try RoundedImageView instead.

  • Tip #8: To use a custom launcher icon for the app, you can first download any image from IconFinder. Within the Eclipse project select New → Other → Android → Android Icon Set which will generate the launcher icon specified for all drawable density folders.

  • Tip #9: When displaying comments in each item, avoid ever embedding a ListView within another ListView item. This rarely goes well and is considered an anti-pattern. Instead, simply inflate the and append the comments into a layout container as outlined here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment