Return to Video

So Much Real Estate Part 3

  • 0:00 - 0:02
    We're almost there
    with our tablet layout.
  • 0:02 - 0:03
    It's time to get this done.
  • 0:03 - 0:05
    We have two problems.
  • 0:05 - 0:08
    First, if you've tried this on
    a Nexus 7, or other seven-inch tablet,
  • 0:08 - 0:12
    there's a good chance the detail view
    isn't rendering in landscape mode.
  • 0:12 - 0:14
    The reason for this,
    is that the grid view cannot solve for
  • 0:14 - 0:16
    the constraints we've given it.
  • 0:16 - 0:19
    And the reason why we don't have
    enough room is that the design for
  • 0:19 - 0:20
    this view calls for
  • 0:20 - 0:24
    the toolbar to be placed in line with
    the detailed grid, rather than above it.
  • 0:24 - 0:27
    The second problem is
    a problem with elevation.
  • 0:27 - 0:31
    Our design calls for a shadow around our
    detail view, but it's just not there.
  • 0:32 - 0:36
    Since we'd like this to have a shadow
    on all platforms, not just Android L,
  • 0:36 - 0:40
    we can introduce another widget
    from the support library, CardView.
  • 0:41 - 0:45
    CardView is a container that
    casts a shadow around a view.
  • 0:45 - 0:49
    When we change the elevation of
    the card, it casts a larger shadow.
  • 0:49 - 0:53
    Note that card view has its own
    version of the elevation parameter.
  • 0:53 - 0:56
    We can also change the radius of
    the corners of the card view to make
  • 0:56 - 0:58
    rounded shadowed rectangles.
  • 0:58 - 1:00
    Note that this works best on L,
  • 1:00 - 1:04
    due to the way we handle clipping
    on the compatible version.
  • 1:04 - 1:07
    Because the card view is a layout that
    draws stuff around other layouts,
  • 1:07 - 1:10
    it works a bit differently than others.
  • 1:10 - 1:11
    You can control the background
    color of the layout,
  • 1:13 - 1:17
    the background color of the card,
    the padding around the card frame,
  • 1:18 - 1:23
    and the padding inside the card frame,
    between the card and its contents.
  • 1:23 - 1:27
    Since CardView is rendered in
    Android L using elevation,
  • 1:27 - 1:31
    it's important to understand how
    this impacts the rendering of views.
  • 1:31 - 1:32
    First of all,
  • 1:32 - 1:37
    a view at a higher elevation
    obscures views at lower elevations.
  • 1:37 - 1:41
    If you have nested views,
    if a view will obscure the parent,
  • 1:41 - 1:44
    you will also obscure all
    children of the view.
  • 1:44 - 1:47
    Views that have transparent
    backgrounds don't cast shadows.
  • 1:48 - 1:52
    Views that are contained within these
    transparent views will also not cast
  • 1:52 - 1:53
    shadows.
  • 1:53 - 1:57
    Given these constraints, it's relatively
    easy to create a view with elevation
  • 1:57 - 2:00
    that doesn't render the way one expects.
  • 2:00 - 2:02
    We're going to make extensive
    use of relative layout,
  • 2:02 - 2:06
    to avoid having to add extra hierarchy,
    which would prevent us from creating
  • 2:06 - 2:09
    the kind of shadows that
    the design requires.
  • 2:09 - 2:12
    One more thing,
    on pre-L versions of android,
  • 2:12 - 2:16
    card view doesn't clip contents to
    the bounds of the curved rectangle, but
  • 2:16 - 2:21
    instead adds padding to avoid having
    that content overlap the shadow area.
  • 2:21 - 2:24
    Since we have a dark background
    on part of our card,
  • 2:24 - 2:26
    this makes a little white line show up.
  • 2:27 - 2:32
    Since the corner overlap looks more
    benign than these white lines,
  • 2:32 - 2:36
    I recommend setting
    cardPreventCornerOverlap = "false"
  • 2:36 - 2:37
    on our card views.
Title:
So Much Real Estate Part 3
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD855 - Android Fundamentals 2
Duration:
02:38

English subtitles

Revisions Compare revisions