"> ">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Styles and Themes. Tell me about this XML snippet <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5"

Similar presentations


Presentation on theme: "Styles and Themes. Tell me about this XML snippet <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5""— Presentation transcript:

1 Styles and Themes

2 Tell me about this XML snippet <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

3 Notice any problems? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

4 What if I want to change the bg color? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

5 Who knows CSS? CSS allows the separation of design from content. Promotes reusability Easier to maintain

6 Does Android support CSS? No However, android provides a similar philosophy with styles and themes.

7 Android Styles A style is a collection of properties that specify look and format for a View. Styles can specify width, height, font color, font size, background color, etc. Styles are defined in a separate XML resource to separate layout from style.

8 What a difference style can make <TextView android:id="@+id/name" style="@style/loginTextTheme" /> <TextView android:id="@+id/serial" style="@style/loginTextTheme" />

9 O Style Where Art Thou Place your styles in a new xml file in your res/values directory Typically the file is called styles.xml

10 Defining Styles 0dp wrap_content.5 5dp #AAFF0000 @drawable/seven_up

11 1. Add a element 0dp wrap_content.5 5dp #AAFF0000 @drawable/seven_up 1 For each style you want to create, add a element with a name attribute that uniquely identifies the style. The name attribute is required.

12 2. Specify style properties 0dp wrap_content.5 5dp #AAFF0000 @drawable/seven_up 2 Define each style property using a element.

13 2A. Specify property name 0dp wrap_content.5 5dp #AAFF0000 @drawable/seven_up The name attribute specifies which property of the view you want to style. Any XML property supported by the View/ViewGroup is supported. 2 2A

14 2B. Specify property value 0dp wrap_content.5 5dp #AAFF0000 @drawable/seven_up The value for the specifies what value the property should have. The value for the item can be a keyword string, hex color, reference to another resource type, or other value depending on the style property. 2 2B

15 Accessing the Style The style can be referenced in XML layout resources by specifying a style attribute with a value equal to the desired style name. style="@style/loginTextTheme"

16 3. Inheriting Platform Styles 0dp wrap_content.5 5dp #AAFF0000 @drawable/seven_up 3 Use the parent attribute to inherit from styles defined by the Android Platform. The parent attribute is optional. Unfortunately, Platform styles aren’t well documented so you’ll have to dig around in source code to really understand what they look like. See here for details.here

17 4. Inheriting from your own styles #FF0000 4 Prefix the new style name with the style name you would like to inherit from separated by a period. This example inherits everything defined in the loginTheme and simply adds a text color property of red.

18 4. Inheriting from your styles #FF0000 4A4A 1.4A is the style you’re inheriting. 2.4B is the name of the new style you are creating. 4B4B

19 4. Inheriting from your styles #FF0000 All attributes that are redefined in your style will overwrite any attributes of the same name that were defined in the parent style.

20 Inapplicable Styles If you define attributes in a style and then apply the style to a view that doesn’t have these attributes, the style will silently fail but you won’t see an error. It’s up to the developer to design and apply styles in a meaningful way

21 Style Documentation Android Style and Theme Documentation

22 Themes Themes are styles that are applied to an entire application or activity. If you know how to do styles then Themes are easy. See documentation here.here

23 Shape Drawables A declaratively defined and dynamically rendered graphical element Can used in any place where drawables are allowed, for instance for view backgrounds.

24 Types of Shapes Rectangles Ovals Line Ring

25 Shape Styles Fill Stroke Gradient

26 Shape Drawable Example

27 Shape Drawable Links Android Shape Drawable Documentation XML Drawables 3 Part Tutorial


Download ppt "Styles and Themes. Tell me about this XML snippet <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5""

Similar presentations


Ads by Google