Align list item with hamburger menu and activity title (1/2)

- Also change index color.
- Move index characters to right by 2dp, so that it's aligned
  with hamburger menu.
- There are 4 items in ContactListItemView (indexer, photo,
  name and checkbox), and previously we use
  mGapBetweenImageAndText to control 3 gaps between them.
  This CL starts to use mGapBetweenIndexerAndImage to control
  the gap between indexer and photo, and it's smaller than the
  other 2 gaps, so that avatar is aligned with activity title.
- Dimensions are also changed for small tablets (Nexus 7), to
  align title with avatars. We don't need to worry about large
  tablets since the avatars and title are not aligned anyway.

Screenshots: https://docs.google.com/a/google.com/drawings/d/1CI4vNoWNgEg-m2OVlMORtW4mrU3cGb4c64cE5zPGHYg/edit?usp=sharing

Bug 28880897
Bug 28246577

Change-Id: Ifbfb3fae7344596f82960dcdd8f4088b9a6e52c7