How to Make Android Apps 9

Android Styles and ThemesIn this part of my Android tutorial I will focus on Android Styles and Themes. A style specifies a collection of properties that specify how a widget looks. A theme is a series of styles that are applied to an Activity.

We’ll make different styles for different versions of Android. We’ll create styles to apply to single and multiple widgets. We’ll cover inheriting styles, default themes, applying themes and much more.

If you like videos like this it helps if you share it on Google Plus with a click here

Here is the URL I mentioned in the video Android R.stylable

Cheat Sheets From the Video

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.newthinktank.derekbanas.androidthemes" >

    <!-- android:theme="@style/AppTheme" specifies the theme for the app -->

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MyActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

values/styles.xml

<resources>

    <!-- Themes and styles allow you to separate your design from the content. This makes your app design consistent and easier to maintain.

    A style is a collection of properties that specify how a widget looks.

    A theme is a series of styles that are applied to an Activity or app

    Built in Android Themes
    1. Theme.Light : Prior to Android 3.0
    2. Theme.Holo.Light : Introduced in Android API 11
    3. Theme.Holo.Light.DarkActionBar : Introduced in Android API 14

    Android 4.0 included the action bar that can display buttons as well

    -->

    <!-- Base application theme inherits the theme based on the Android API. -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!-- Customize your theme here. -->
    </style>

    <style name="AppTheme" parent="AppBaseTheme">

        <!-- Customizations that won't be specific to any API go here -->

    </style>

</resources>

values-v11/styles.xml

<resources>

    <!-- Base application theme in values-v11. -->
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light">
        <!-- Theme customization for Android API 11 - 13 -->
    </style>

</resources>

values-v14/styles.xml

<resources>

    <!-- This is known as a style sheet which is a collection of styles that
    you can use in your application -->

    <!-- Base application theme in values-v14 -->
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Theme customization for Android API 14+ -->

        <!-- http://developer.android.com/reference/android/R.styleable.html#Theme
        Provides a list of attributes you can override -->

        <!-- You can change the text color in all widgets across the whole app -->
        <item name="android:editTextColor">#ffb62a23</item>
        <item name="android:textColorPrimary">#ffb62a23</item>
        <item name="android:textColorSecondary">#ffb62a23</item>
        <item name="android:textColorTertiary">#ffb62a23</item>
        <item name="android:textColorPrimaryInverse">#ffb62a23</item>
        <item name="android:textColorSecondaryInverse">#ffb62a23</item>
        <item name="android:textColorTertiaryInverse">#ffb62a23</item>

        <!-- You can change the background -->
        <item name="android:windowBackground">#ffedeba6</item>

        <!-- Change the font family with API 16+
        android:fontFamily="sans-serif"
        android:fontFamily="sans-serif-light"
        android:fontFamily="sans-serif-condensed"
        android:fontFamily="sans-serif-thin" -->
        <item name="android:fontFamily">sans-serif</item>

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

        <!-- More font stuff from URL above
        android:fontFamily	 Font family (named by string) for the text.
        android:shadowColor	 Place a shadow of the specified color behind the text.
        android:shadowDx	 Horizontal offset of the shadow.
        android:shadowDy	 Vertical offset of the shadow.
        android:shadowRadius	 Radius of the shadow.
        android:textAllCaps	 Present the text in ALL CAPS.
        android:textColor	 Text color.
        android:textColorHighlight	 Color of the text selection highlight.
        android:textColorHint	 Color of the hint text.
        android:textColorLink	 Color of the links.
        android:textSize	 Size of the text.
        android:textStyle	 Style (bold, italic, bolditalic) for the text.
        android:typeface	 Typeface (normal, sans, serif, monospace) for the text.
        -->

    </style>

    <!-- You can define styles for single widgets. You can then assign that style to the
     element in activity_my.xml with style="@style/TextView" for example -->
    <style name="TextView1">
        <item name="android:textSize">30sp</item>
        <item name="android:textStyle">bold</item>
    </style>

    <!-- You can inherit a style you defined as well. You can also override parts.
     You can't do this with Android styles, but only with yours. -->
    <style name="EditText" parent="@style/TextView1">
        <item name="android:textStyle">normal</item>
    </style>

    <!-- You can both inherit and add to a style as well -->
    <style name="TextView1.TextView2">
        <item name="android:padding">30dp</item>
    </style>

    <!-- You just keep adding periods to add to additional styles -->
    <style name="TextView1.TextView2.TextView3">
        <item name="android:layout_marginTop">15dp</item>
    </style>

    <!-- You can also define styles that are applied automatically without needing
    to define style in activity_my by overriding settings
     -->

    <!--
    <style name="TextView" parent="@android:style/Widget.TextView">
        <item name="android:textSize">55sp</item>
        <item name="android:textStyle">bold</item>
    </style>
    -->

    <!-- In the graphical layout you can try different default themes
    by clicking on the Theme button
    -->

</resources>

activity_my.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MyActivity">

    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/TextView1"
        android:id="@+id/textView1" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:text="Enter Here"
        style="@style/EditText"
        android:layout_below="@+id/textView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView2"
        android:layout_below="@+id/editText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        style="@style/TextView1.TextView2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView3"
        android:layout_below="@+id/textView4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        style="@style/TextView1.TextView2.TextView3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_below="@+id/textView5"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

6 Responses to “How to Make Android Apps 9”

  1. Carla says:

    Hello Derek, Im a IOS programmer and learning android (thanks to your tutorials).
    I was planning on developing a location based social networking app for iOS in which you would be able to sign in, add friends, create pages… just a small project actually.
    However, I don’t know anything about backend programming, databases or web services. I only know how to program objective-c apps with no networking capabilities whatsoever. What do I need to learn to do so and do you know any good books, tutorial or reference about social networking apps?
    Thank you very much Derek I am a huge fan and I’m really sorry for your loss last week.
    Stay strong!

    • Derek Banas says:

      You’re very welcome 🙂 I’m glad you like the videos. I am going to make a learn PHP in 30 minutes tutorial very soon. That will be followed by a web services tutorial. It should be up in no longer then 2 weeks. I hope it helps

      • Carla says:

        OMG! Thats awesome Derek! Realllyy looking forward to it!! Thank you for your reply!
        Best regards from. Brazil

  2. James Hollingsworth says:

    Hey Derek,

    Thanks as always for posting your videos! I had a question about animating widgets programmatically. I was wondering if there is a way to animate, say a button or image view, around the screen or view and still have it be clickable? I know there are ways to animate it though XML, but is there a way to animate it more than just in a linear direction? The only things I can get to animate around the screen are sprites and drawable objects. Thanks in advance.

Leave a Reply

Your email address will not be published.

Google+