Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android what does the clipToPadding Attribute do?

You can use clipToPadding for views that scroll. Say you have a listview for example and you having padding set on the top and bottom. Normally the padding is visible no matter which items are visible on the screen. The diagram below represents a list with 10 items but only 4 are visible on screen, with default clipToPadding settings:

  • (padding)
  • item 4
  • item 5
  • item 6
  • item 7
  • (padding)

Now if you were to set clipToPadding="false" instead of just being applied normally to the entire view it only applies the padding to the end items, this is what you'd see in the same scenario:

  • item 4
  • item 5
  • item 6
  • item 7

Now if you were to scroll to the top or bottom of the list, this is what you would see:

  • (padding)
  • item 1
  • item 2
  • item 3
  • item 4

OR

  • item 7
  • item 8
  • item 9
  • item 10
  • (padding)

A practical usage for this is if you have a Floating Action Button for example, you should use clipToPadding combined with bottom padding to ensure the entirety of the bottom item can be seen without being obstructed by the FAB.

Does that make sense?


I know that the top rated answer explains this pretty clearly through text but as its said,

"A picture is worth thousand words"

Here is a GIF worth 1500 depicting the same:

(Left: clipToPadding = "true" Right: clipToPadding = "false" )

enter image description here


A nice usage of clipToPadding is described in https://www.youtube.com/watch?v=O47H4PxMf9U (part of Udacity's Material Design course)

Using clipToPadding="false" makes the scroll view scroll over the top Google Maps icon. This is due to both being inside the same FrameLayout.

google play store of google maps, showing cliptopadding


I recommend you to take a look at this article https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec#.5x2hz7q0g

Or maybe you want your RecyclerView to scroll underneath a transparent navigation bar — by using android:fitsSystemWindows=”true” in conjunction with android:clipToPadding=”false”, your scrolling content will be behind the controls but, when scrolled to the bottom, the last item will still be padded to be above the navigation bar (rather than hidden underneath!).