IT1918

App Design
Styles and Themes
Drawables • A style is a collection of attributes that define the look and format
• A drawable is a graphic that can be drawn to the screen. The of a view.
Drawable class is used for adding rich images in an app with a • The styles that Android provides are called platform styles.
minimal impact on its performance. • To create a style, add a <style> element inside a <resources>
• Android supports the following image formats: element in any XML file located in the values folder inside the
o WebP – a modern image format developed by Google that project's res folder.
provides superior lossless and lossy compression for • A <style> element includes the following:
images on the web. o name
o PNG (Portable Network Graphics) o parent (optional)
o JPG/JPEG (Joint Photographic Experts Group) o Any number of <item> elements as child elements of
o GIF (Graphics Interchange Format) <style>. Each <item> element includes one (1) style
o BMP (Bitmap) attribute.
• WebP, PNG, and JPG are the recommended image formats. <resources>
• The image file should be saved in the app/src/main/res/drawable <style name="MyFont">
folder of the project. <item name="android:typeface">monospace</item>
• To display a drawable, create an ImageView element in XML: <item name="android:textColor">#D7D6D7</item>
<ImageView </style>
android:id="@+id/ic" </resources>
android:layout_width="wrap_content"
android:layout_height="wrap_content" • To apply the style to a component:
android:src="@drawable/ice_cream" /> <TextView
style="@style/MyFont"
• To use an image in the Java file: android:text="@string/code_string" />
ImageView img = new ImageView(this);
img.setImageResource(R.drawable.ice_cream); • Inheritance allows a style to inherit the properties of an existing
style.
• To match the bounds of the image with the dimension of the • To inherit a platform style, use the parent attribute to specify the
drawable: resource ID of the style you want to inherit.
img.setAdjustViewBounds(true); <style name="Text1" parent="@android:style/TextAppearance">
img.setLayoutParams(new ViewGroup.LayoutParams( <item name="android:textColor">#00FF00</item>
ViewGroup.LayoutParams.WRAP_CONTENT, </style>
ViewGroup.LayoutParams.WRAP_CONTENT));
To apply this style, use @style/Text1.
• To add the image to the layout and set the layout as the content • To inherit a custom style, use the name of the style you want to
view: inherit as the first part of the new style's name and separate the
ConstraintLayout cl = new ConstraintLayout(this); parts with a period. Syntax: name="StyletoInherit.NewStyle"
cl.addView(img);
setContentView(cl);

06 Handout 1 *Property of STI

<style name="MyFont.BlueLarge">
<item name="android:textColor">#0000FF</item>
<item name="android:textSize">36sp</item>
</style>
The original text color is overridden.
To apply this style, use @style/MyFont.BlueLarge.
• A theme is a collection of attributes that define the look and format
of an activity or an entire app. Any style can be used as a theme.
• A default theme looks like this:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
• To apply a theme to an app, declare it inside an <application>
element in the manifest file.
Ex. android:theme="@style/AppTheme"
• To apply a theme to an activity, declare it inside an <activity>
element in the manifest file.
Ex. <activity android:theme="@android:style/Theme.Dialog">
References:
DiMarzio, J. (2017). Beginning Android programming with Android Studio. Indiana: John Wiley
& Sons, Inc.
Google Developers Training Team. (2018). Android developer fundamentals (version 2).
Retrieved from https://google-developer-training.github.io

06 Handout 1 *Property of STI