Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

826 views

Published on

Published in: Technology, News & Politics

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

×