• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Really nice Presentation. I gained a lot from this. thanks
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
562
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Optimizing layouts fordifferent screen sizes Irene Duke Founder & CEO Angle Labs 03/27/2012
  • 2. Phone Layout
  • 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. 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. Tablet Layout
  • 6. Tablet Layout
  • 7. Multiple xml layoutsUse multiple xml layouts for different screensizes• layout• layout-small• layout-large• layout-xlarge
  • 8. Multiple xml layoutsOnly do this when defining completelydifferent layouts• Rearranging views on screen• Adding views to screen
  • 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. 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. 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. 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. Before
  • 14. After
  • 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. 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. 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. Before
  • 19. After
  • 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