Styling Presentation

Styling Presentation

Goals

  • Learn how to change the styling of Views
  • Learn how to specify colors and measurements

Styling Views in Android

  • The styling system is not as versatile as CSS in the HTML world, but there are a few similar concepts
  • Change style of View by setting attributes on the xml element
  • Multiple attributes can be collected into a Style
    • A Style and its attributes are put in its own xml file and referenced in the View element. An Android Style is somewhat similar to a CSS class.
  • Themes is a way to apply multiple styles automatically for an Activity
    • Themes are specified on the Activity (or the Application as a whole). Themes are also the way for different Android platform versions to update its appearence of the same View objects. An Android Theme is somewhat similar to a CSS stylesheet.

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 (or a Drawable) for the background of the view
  • android:padding
    • Space between view edge and its contents. Can be specifed as a single attribute, or in individual components paddingLeft, paddingTop, paddingRight and paddingBottom.

Units

  • Units that can be used when specifying sizes like padding, margin, layout_width etc
  • px
    • Screen pixels. 1px is simply always one pixel on the screen.
  • dp (or dip)
    • Density-independent pixels. This unit is based on the physical density of the screen, relative to a screen with 160 pixels/inch. A size with this unit should have the same physical size on all screens from tiny 3 inch to tablet 10 inch sizes, independently of the pixel resolution of those screens. This is the recommended unit for all sizes except textSize.
  • sp
    • Size-independent pixels. This is like the dp unit, but is also scaled according to an optional user setting for font size. This is the recommended unit for textSize.
  • Colors are specified as hex values with 6 characters plus the

Colors

  • Specified in xml attributes as hexadecimal value prefixed with
    <TextView android:textColor="#a05528"
    
  • Exactly as in HTML/CSS
    • Two hexadecimal digits for each of the colors red, green and blue
  • Also supports a forth value for opacity (alpha channel) which is the first, if specified
    <TextView android:background="#880000ff"
    

Alignment for Views

  • android:gravity
    • How content inside of the View is aligned horizontally and vertically. Two values can be combined with the pipe "|" character.
  • android:layout_gravity
    • How the actual View is aligned horizontally and vertically with regards to its container or "available area". Also depends on the type of layout that is used. If the View has "match_parent" for its width and/or height, this attribute will not have an effect.

Style the text of the Spinner

  • Compound views are harder to style
    • Spinner is a compound view, meaning it actually consists of multiple views
    • Attributes on view element have no effect on internal views
    • Solution might be a bit different depending on the view
  • Spinner item (text) styling by changing the theme in styles.xml
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
      <item name="android:spinnerItemStyle">@style/spinner_text_view</item>
    </style>
    <style name="spinner_text_view">
      <item name="android:gravity">center</item>
      <item name="android:textSize">40sp</item>
    </style>
    

Some styling requires resources or even custom drawing

  • When the styling attributes are not enough
  • Some extra features can be done with resource XML files
    • Rounded corners
    • Gradient colors
  • When no built in styling exists
    • Create your own class derived from View (or other View class)
    • Override onDraw method
    • Paint whatever you like inside the View's rectangle
    • Pixel perfect control

Good design

  • Important to use the mobile medium to its fullest and create beautiful and useful applications
  • Use inspiration and visual design from other platforms, but keep the user interface patterns on the platform you are targeting
  • Don't be too inventive so users are confused
  • Learn from the source

Design inspiration