Optimizing layouts fordifferent screen sizes         Irene Duke       Founder & CEO         Angle Labs         03/27/2012
Phone Layout
Countdown TextView<TextView     android:id="@+id/countdown_text"     android:layout_width="fill_parent"     android:layout...
Cancel Button<Button android:id="@+id/cancel_timer_button"    android:layout_width="wrap_content"    android:layout_height...
Tablet Layout
Tablet Layout
Multiple xml layoutsUse multiple xml layouts for different screensizes•   layout•   layout-small•   layout-large•   layout...
Multiple xml layoutsOnly do this when defining completelydifferent layouts• Rearranging views on screen• Adding views to sc...
dimens.xml and        styles.xmldimens.xml• dp - density-independent pixels• sp - scale-independent pixelsstyles.xml• prop...
dimens.xmlvalues  <dimen name="button_side_padding">25dp</dimen>  <dimen name="countdown_text_size">64sp</dimen>values-lar...
Countdown TextView<TextView     android:id="@+id/countdown_text"     android:layout_width="fill_parent"     android:layout...
Cancel Button<Button android:id="@+id/cancel_timer_button"    android:layout_width="wrap_content"    android:layout_height...
Before
After
styles.xmlvalues<style name="ButtonStyle">	 <item name="android:paddingLeft">@dimen/                              button_s...
styles.xml  values-large<style name="ButtonStyle">	 <item name="android:paddingLeft">@dimen/                              ...
Cancel Button<Button android:id="@+id/cancel_timer_button"    android:layout_width="wrap_content"    android:layout_height...
Before
After
Conclusion• Benefits of using dimens.xml and styles.xml  instead of multiple layout resources   • Smaller .apk sizes   • Ea...
Upcoming SlideShare
Loading in …5
×

Android Meetup Lightning Talk

709 views
663 views

Published on

Published in: Technology, News & Politics
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
709
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Android Meetup Lightning Talk

    1. 1. Optimizing layouts fordifferent screen sizes Irene Duke Founder & CEO Angle Labs 03/27/2012
    2. 2. Phone Layout
    3. 3. Countdown TextView<TextView android:id="@+id/countdown_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="10" android:ellipsize="end" android:gravity="center" android:singleLine="true" android:textColor="@color/white" android:textSize="64sp" />
    4. 4. Cancel Button<Button android:id="@+id/cancel_timer_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="25dp" android:paddingRight="25dp" android:text="@string/cancel" />
    5. 5. Tablet Layout
    6. 6. Tablet Layout
    7. 7. Multiple xml layoutsUse multiple xml layouts for different screensizes• layout• layout-small• layout-large• layout-xlarge
    8. 8. Multiple xml layoutsOnly do this when defining completelydifferent layouts• Rearranging views on screen• Adding views to screen
    9. 9. dimens.xml and styles.xmldimens.xml• dp - density-independent pixels• sp - scale-independent pixelsstyles.xml• properties such as padding, font size, font style, background color, and much more
    10. 10. dimens.xmlvalues <dimen name="button_side_padding">25dp</dimen> <dimen name="countdown_text_size">64sp</dimen>values-large <dimen name="button_side_padding">50dp</dimen> <dimen name="countdown_text_size">164sp</dimen>values-small...values-xlarge...
    11. 11. Countdown TextView<TextView android:id="@+id/countdown_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="10" android:ellipsize="end" android:gravity="center" android:singleLine="true" android:textColor="@color/white" android:textSize="@dimen/ countdown_text_size" />
    12. 12. Cancel Button<Button android:id="@+id/cancel_timer_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="@dimen/ button_side_padding" android:paddingRight="@dimen/ button_side_padding" android:text="@string/cancel" />
    13. 13. Before
    14. 14. After
    15. 15. styles.xmlvalues<style name="ButtonStyle"> <item name="android:paddingLeft">@dimen/ button_side_padding</item> <item name="android:paddingRight">@dimen/ button_side_padding</item></style>
    16. 16. styles.xml values-large<style name="ButtonStyle"> <item name="android:paddingLeft">@dimen/ button_side_padding</item> <item name="android:paddingRight">@dimen/ button_side_padding</item> <item name="android:textSize">32sp</item> <item name="android:textStyle">bold</item></style>
    17. 17. Cancel Button<Button android:id="@+id/cancel_timer_button" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/ButtonStyle" android:text="@string/cancel" />
    18. 18. Before
    19. 19. After
    20. 20. Conclusion• Benefits of using dimens.xml and styles.xml instead of multiple layout resources • Smaller .apk sizes • Easier to maintain• Use multiple layout files only when creating completely different layouts

    ×