Skip to main content

Foundation

Spacer

Consistent spacing makes clean and clear interface

banner-Spacer

Spacers is good spacing systems are based on simple mathematical principles with increments that are visually. This toolkit gives designers and developers guidelines for effectively applying layout spacing, resulting in a more consistent application of space across our product. You can chek out the guideline for more detail description.

Preview

SpaceXml AttrsSpacingPixels
?attr/spacing14dp4px
?attr/spacing28dp8px
?attr/spacing312dp12px
?attr/spacing416dp16px
?attr/spacing520dp20px
?attr/spacing624dp24px
?attr/spacing728dp28px
?attr/spacing832dp32px
?attr/spacing936dp36px
?attr/spacing1040dp40px
?attr/spacing1148dp48px
?attr/spacing1256dp56px
?attr/spacing1364dp64px
?attr/spacing1480dp80px
?attr/spacing1596dp96px
?attr/spacing16112dp112px
?attr/spacing17128dp128px
?attr/spacing18144dp144px
?attr/spacing19160dp160px
?attr/spacing20176dp176px
?attr/spacing21192dp192px
?attr/spacing22208dp208px
?attr/spacing23224dp228px
?attr/spacing24240dp240px
?attr/spacing25256dp256px
?attr/spacing26288dp288px
?attr/spacing27320dp320px
?attr/spacing28384dp384px
android: paddingTop = '?attr/spacing1';
android: paddingTop = '?attr/spacing2';
android: paddingTop = '?attr/spacing3';
android: paddingTop = '?attr/spacing4';
android: paddingTop = '?attr/spacing5';
android: paddingTop = '?attr/spacing6';
android: paddingTop = '?attr/spacing7';
android: paddingTop = '?attr/spacing8';
android: paddingTop = '?attr/spacing9';