Styling

Styling

Agenda

  • Common styles for designing views
  • Define colors and measurements
  • Use collection of styles for similar looks

Styling Views in Android

  • Somewhat similar to CSS in the HTML world
    • But not nearly as powerful as CSS
  • Defined by
    • Android platform has defaults
    • Customize with attributes on the XML element
    • Collect multiple attributes into a named style
    • Apply styles automatically using a theme

Applicable styles

  • Easy to apply
    • Widths, heights, sizes
    • Paddings, margins, alignment
    • Text size, color and shadows
    • Backgrounds
  • A little bit more work
    • Gradients
    • Rounded corners
  • Strange omissions, difficult to apply
    • Borders
    • Box shadows

General View attributes

  • android:textColor
    • Color of any text displayed in the view
  • android:textSize
    • Font size of any text displayed in the view
  • android:background
    • Background color for the view
    • Can also be an image (Drawable)

Spacing

  • android:padding
    • Specified for all edges, or individual as in android:paddingLeft
  • android:layout_margin
    • Specified for all edges, or individual as in android:layout_marginLeft

Units

  • px
    • Each unit is equal to one pixel on screen
  • dp (or dip)
    • Each unit is 1/160 of an inch
    • Density Independent Pixels
    • Scales to different screen sizes and densities
    • Recommended for all values except text size
  • sp
    • Same as dp, but with an optional scaling factor applied
    • Visually impaired users can increase scaling factor
    • Recommended for all text sizes

Colors

  • Specified in xml attributes as hexadecimal value
    <TextView android:textColor="#a05528" />
    
  • Same as in html/css
    • Red amount from 00 to ff
    • Green amount from 00 to ff
    • Blue amount from 00 to ff
  • Optional alpha/opacity specified as first value
    • From 00 (fully transparent) to ff (fully opaque)

Styling values in a central place

  • Apply a single styling value for many Views in many Activities
    • Color
    • Measurement (like textSize, padding)
  • Defined in a XML resource file like /res/values/variables.xml
    <resources>
      <color name="dark">#339933</color>
      <dimen name="heading">20sp</dimen>
    </resources>
    
  • Reference in any View attribute that can hold that particular value
    <TextView android:textColor="@color/dark"
      android:textSize="@dimen/heading"
    

Collect multiple styling attributes into a single style

  • Defined in a XML resource file like /res/values/styles.xml
    <resources>
      <style name="checker">
        <item name="android:background">#333399</item>
        <item name="android:layout_margin">5dp</item>
      </style>
    </resources>
    
  • Referenced in any View as a single attribute - NO PREFIX
    <Button style="@style/checker"
    

Style the text of the Spinner

  • Compound views are harder to style
    • Spinner is a compound view
    • It actually consists of multiple views
    • Attributes on Spinner element have no effect on internal views
  • Changed by using a theme
    • And definting a style with a predefined name
    • Requires that the compound view in question has built in support for actually using a style with a specific name

Style the text of the Spinner

  • Create a style you want to apply, use any name
    <style name="my_spinner">
      <item name="android:gravity">center</item>
      <item name="android:textSize">40sp</item>
    </style>
    
  • Define this style for android:spinnerItemStyle in your theme
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
      <item name="android:spinnerItemStyle">@style/my_spinner</item>
    </style>
    

Advanced styling using xml resource files

  • When the styling attributes are not enough
  • Some extra features can be done with resource XML files
    • Rounded corners
    • Gradient colors
    • Different styling for different states - buttons
  • Drawables
    • Generic term for different types of backgrounds

Shape drawables

  • Use for rounded corners
  • Use for gradient backgrounds
  • Add xml resource file with shape as root element
  • /res/drawable/example.xml
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" />
      <gradient android:startColor="#ee8888" android:endColor="#dd3333"
        android:type="linear" android:angle="270" />
    </shape>
    
  • Reference the drawable as android:background in your View

Selector

  • A single drawable consisting of multiple drawables
    • State of view determines which of the multiple drawables are used
  • Button changes in different states
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:state_pressed="true"
        android:drawable="#333333" />
      <item android:state_focused="true"
        android:drawable="#333399" />
      <item
        android:drawable="#8888ff" />
    </selector>
    

Good design

Design inspiration