HW-1: Instagram Phono Viewer

[marcojmar]

Instagram Photo Viewer app is complete. /cc @codepathreview @codepath

[codepathreview]

:+1: Great work, good job getting all stories done. Read through this point-by-point to determine how you could improve your submission.

• Did you properly name your views? Every view in your layout XML file should have a proper id that semantically describes the purpose AND have a prefix indicating the view type. For example, the text field where you show the caption might be called tvCaption (tv indicates this is a TextView).
• Did you use relative sp / dp for any view units? All units within XML layouts should be relative using sp for font sizes and dp for margin + padding and any other positioning. You should also use wrap_content and match_parent for width / height whenever possible. Check out this stackoverflow answer for more detail about these units. Avoid using px or pt in Android apps.
• Did you load remote images with Fresco? To load remote images (including both the post photo and the user profile photo), you should be using Fresco which is an included dependency in the starter project.
• Did you make sure not to set ImageView properties on your SimpleDraweeViews? Fresco has a gotcha where even though it subclasses ImageView, it has it’s own set of properties that mirror the ImageView properties.
• Did you consider cases where a post has no caption? If a post has no caption, we want to hide that view and not leave empty space. Make sure you are familiar with the differences between View.VISIBLE, View.INVISIBLE, and View.GONE.
• Did you ensure that you properly handled any recycled views in your onBindViewHolder method? One of the main benefits with RecyclerView is that it recycles views (as it’s name suggests). This means that as you scroll down the list, you no longer are creating new views, but are re-using the ones that were created earlier. This introduces a common gotcha where if you don’t explicitly set certain properties for a view, it will inherit the previously set property from an earlier item in the list. This can show up in today’s assignment with the caption. If an earlier post doesn’t have a caption and your adapter sets that TextView's visibility to View.GONE, you want to ensure you set that same TextView's visibility to View.VISIBLE for any posts that come later that do have a caption.
• Did you format the username / caption properly? You can use a SpannableString and a single TextView to format the username / caption with different colors / typeface by using a ForegroundColorSpan and a TypefaceSpan.
• Did you use the proper type of color when setting your ForegroundColorSpan? Colors can be a little confusing in Android. There is the Color class which internally represents each color as a 4 byte integer. This class also provides some constants you can use such as Color.BLUE. Then there are the color resources where you can define your own colors in an XML resource file. Unfortunately, these colors are referenced by their id (which is also an int). Hence, you don’t get compile time errors when you accidentally pass in an id when the api expects an actual RGBA value. In the case of the ForegroundColorSpan, we need to pass in the actual RGBA value to the constructor. This stackoverflow post captures how to do this.
• Did you set an ItemDecoration on your RecyclerView to add a blank space between items? We’ve included com.codepath.instagram.helpers.SimpleVerticalSpaceItemDecoration to make it easier to set an ItemDecoration.
• Did you properly use margin / padding and gravity / layout_gravity? There are subtle differences between each of these that are captured here.
• Did you properly set the line spacing for the caption TextView? TextViews have a lot of properties. You can set both a multiplier and an offset for the line height. To match the mock, you’ll want to set the lineSpacingMultiplier="1.2".
• Did you use a compound drawable to add the heart next to the number of likes? Since there are a lot of cases where you’ll want an image right next to your text, TextView supports adding an image right next to your text. In this case, you’ll want to use DrawableLeft and you can even set a DrawablePadding to add space between the image and the text.

If you have any particular questions about the assignment in general or on any of the feedback, feel free to reply here or or email us support@codepath.com.