styles views layouts User interface PART 1

styles.md

PART 1

1. Styles and themes are time-saving ways to create a consistent look and feel across your Android application.
2. Styles and themes are essentially the same thing: a collection of properties.
3. These properties can be anything from button color to the "wrap content" attribute or the size of your text.
4. The crucial difference is how they’re applied to your project:
5. A style is applied to a View.
6. A theme is applied to individual activities or an entire application.

Why Should I Use Themes and Styles?

**Implementing styles and themes has several benefits.

**Efficiency: If you’re going to be using the same collection of attributes throughout your application, defining them in advance turns this:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#ff0000ff"
     android:textStyle="italic"
    android:typeface="serif"
    android:text="@string/disclaimer" />

Into this:

<TextView
    style="@style/disclaimerFont"
    android:text="@string/disclaimer" />

PART 2

STEP 1: Create a Custom Style

Defining and referencing custom styles in Android is similar to using string resources, so we’ll straight implement a custom style.

Open

//This is where you’ll define your styles.

res/values/styles.xml 

Ensure the styles.xml file has opening and closing "resource" tags:

<resources>
 
</resources>

Give your style a unique identifier. In this tutorial, we’ll use "headline":

<style name="headline">

Add your attributes and their values as a list of items.

<item name="android:textStyle">bold</item>

Once you’ve finished adding items, remember the closing tag:

</style>

This is the custom style we’ll use in this tutorial:

<resources>
 
    <style name="headline">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">#ff0000ff</item>
            <item name="android:textStyle">bold</item>
            <item name="android:textSize">20dp</item>
   </style>
    
</resources>

Step 2: Apply Your Style

Applying a style to a View is easy. Open your layout file, and then locate the View and add:

<TextView
       style="@style/headline"
  android:text="Hello, world!" />

Tip: Note the missing ‘android:’ XML prefix. This prefix is omitted because the "headline" style isn’t defined in the android namespace. Boot up the emulator and take a look at your custom style in action.

##Step 3: Examine the Predefined Styles

Android platform features plenty of predefined styles, too. You can access these by examining the Android source code.

1. Locate the Android SDK installed on your hard drive
2. follow the path: platforms/android/data/res/values
3. Locate the ‘styles.xml’ file inside this folder.
4. This file contains the code for all of Android’s predefined styles.

Step 4: Apply a Default Style

Pick a style to apply. In this example, we’ll use the following:

https://cdn.tutsplus.com/mobile/authors/jessica-thornsby/android-textappearance-style.png

Return to your layout file, and add the following to your View:

<TextView
       android:id="@+id/textView1"
       style="@android:style/TextAppearance.StatusBar.EventContent.Title"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="TextView" />

Experiment with other default styles to see what different effects can be achieved.

Step 5: Create a themes.xml File

Now that you’re familiar with custom and default styles, we’ll move onto themes. Themes are very similar to styles, but with a few important differences.

Before we apply and define some themes, it’s a good idea to create a dedicated themes.xml file in your project’s "Values" folder. This is especially important if you’re going to be using both styles and themes in your project.

create this file:

res/values/themes.xml

Step 6: Apply a Default Theme

**Unlike styles, themes are applied in the Android Manifest, not the layout file.

1. Pick a theme to work with by opening the ‘themes’ file in platforms/android/data/res/values
2. scroll through the XML code.
3. In this example, we’ll use the following:

• notitlebar theme

1. Open the Android Manifest file.
2. Depending on the desired scope of your theme, either apply it to:

A single activity:

<activity android:theme="@android:style/Theme.NoTitleBar"

Or the entire application:

<application android:theme="@android:style/Theme.NoTitleBar"

Finally, check how this looks in the emulator:

how to work with the styles and themes that are predefined by the Android platform.

PART 3

creating your own, by using inheritance.

Step 7: Cut Corners Using Inheritance

Although you can define custom themes from scratch, it’s usually more efficient to extend one of the Android platform’s predefined themes using inheritance. By setting a “parent” theme, you implement all of the attributes of the predefined theme, but with the option of re-defining and adding attributes to quickly create a tailor-made theme.

In values/themes.xml, set the unique identifier as normal, but specify a “parent” theme to inherit from.

<style name="PinkTheme" parent="android:style/Theme">
</style>

Tip. Check platforms/android/data/res/values/themes for parent themes to extend.

Define each attribute that’s being added or modified. In this example we’re implementing the default ‘Theme’ but with a new font colour:

<style name="PinkTheme" parent="android:style/Theme">
       <item name="android:textColorPrimary">#FF69B4</item>  
   </style>

Open the Android Manifest and locate either the application or activity tag.

Apply your theme:

<application android:theme="@style/PinkTheme">

As always, check your work in the emulator: