Sunshine app: highlight Today’s forecast

github:  S11.01- NewListItemLayout , S11.02-TodayListItem , S11.03- DataBinding

* The source information is from Udacity Nanodegree Program- Become an Android Developer *

S11.01- Sunshine’s New Layout:

s11.01

S11.02- Sunshine Today’s List Item:

RecyclerViews allow you to inflate different layouts for each of its items, this flexibility give us the power to come up with more user friendly designs, like the one we about to do in this exercise.

todays-layout.002

To get from this old forecast layout to the new one, we will have to use a few of RecyclerView Adapter’s core functionalities:

I. Create the new layout for Today

  • Add a layout called list_item_forecast_today, then use a constraint layout to implement the today list item design as shown in the image above.

II. Create booleans to personalize the experience

  • Add a boolean resource called use_today_layout in res/values and set it to some default value (true or false).
  • Create a resources file called bools.xml within the res/values-port directory to provide a customized boolean setting for the portrait specific layout.
  • Add another boolean resource, also called use_today_layout, in res/values-port and set it to false to default the portrait layout to not show the customized Today’s design.

III. getItemViewType:

Now, to get the RecyclerView to know when to use which layout for its individual items; we will have to override getItemViewType. This will allow us to define different view types for different RecyclerView items based on the position.

  • Override getItemViewType.
  • Within getItemViewType, if our boolean resource is true and item position is 0 (first item in the list), return a custom ID for today’s viewType (call it VIEW_TYPE_TODAY).
  • Otherwise, return a custom ID for future day viewType (call it VIEW_TYPE_FUTURE_DAY).

IV. onCreateViewHolder

Last part would be to update onCreateViewHolder and use the returned ViewType from getItemViewType and decide on which layout to inflate:

  • If the ViewType of the layout is today (VIEW_TYPE_TODAY), Inflate and use list_item_forecast_today layout.
  • If the ViewType of the layout is future day (VIEW_TYPE_FUTURE_DAY), use the normal forecast_list_item layout.
  • Otherwise, throw an IllegalArgumentException!

S11.03- Data Binding in Sunshine:

databinding.003

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s