1. Optimizing layouts for
different 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 layouts
Use multiple xml layouts for different screen
sizes
• layout
• layout-small
• layout-large
• layout-xlarge

8. Multiple xml layouts
Only do this when defining completely
different layouts
• Rearranging views on screen
• Adding views to screen

9. dimens.xml and
styles.xml
dimens.xml
• dp - density-independent pixels
• sp - scale-independent pixels
styles.xml
• properties such as padding, font size, font
style, background color, and much more

10. dimens.xml
values
<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.xml
values
<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