0

Question

How to divide list and detail in Material Dark?

Maybe I didn't noticed it before, but when I tried to convert an older multi-pane Holo-Theme app to the new Material-Design, there was no more divider between the FrameLayouts on a large screen.

Recently I discovered the trick that's been used on the Light edition (say, the Gmail app): Because the default light background is a little darker than full-white, making the list FrameLayout's background #FFFFFF (AND casting a shadow by setting the elevation) creates a great visual divider between the two parts of the screen.

However, I still don't know how to implement this knowledge in a DARK layout, where creating a darker background doesn't seem to be the solution.

Coen B
  • 725
  • 5
  • 12
  • you may try out this pattern https://www.google.co.in/design/spec/layout/adaptive-ui.html#adaptive-ui-patterns – random Aug 17 '15 at 11:20
  • Your right, it contains a `divide` section. But how to implement it in code so it is divided? Using two `FrameLayout`s results in two screens next to each other but missing a line or something other to indicate it. – Coen B Aug 17 '15 at 19:49
  • Try out this solution http://stackoverflow.com/questions/17133541/navigation-drawer-set-as-always-opened-on-tablets – random Aug 21 '15 at 03:46
  • Although that post is interresting for if/when i want to add a `DrawerLayout`, this is no solution for my current problem. I've edited my question, maybe it explains it better. – Coen B Aug 22 '15 at 20:13

1 Answers1

0

Awnser

Found it! This page contains the awnser for the colors of both light and dark (multi-pane) layouts. A quick overview:

Material Light

List:   "#FFFFFF" (= CardView background)
Detail: "#FAFAFA" (= default background)

Material Dark

List:   "#424242"
Detail: "#303030"

I hope this helps others who are trying to implement Material Design in there apps.

Coen B
  • 725
  • 5
  • 12