Android Meetup Lightning Talk

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_height="wrap_content" android:layout_weight="10" android:ellipsize="end" android:gravity="center" android:singleLine="true" android:textColor="@color/white" android:textSize="64sp" />

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" />

Tablet Layout

Multiple xml layoutsUse multiple xml layouts for different screensizes• layout• layout-small• layout-large• layout-xlarge

Multiple xml layoutsOnly do this when deﬁning completelydifferent layouts• Rearranging views on screen• Adding views to screen

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

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...

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" />

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" />

Before

styles.xmlvalues<style name="ButtonStyle"> <item name="android:paddingLeft">@dimen/ button_side_padding</item> <item name="android:paddingRight">@dimen/ button_side_padding</item></style>

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>

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" />

Before

Conclusion• Beneﬁts of using dimens.xml and styles.xml instead of multiple layout resources • Smaller .apk sizes • Easier to maintain• Use multiple layout ﬁles only when creating completely different layouts

Android Meetup Lightning Talk

by Irene Duke

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 7

Statistics

Android Meetup Lightning Talk Presentation Transcript