Android UI - Layouts, Colors, Styles, Themes

View

• The highest-level class of any UI in Android.
• Button, TextView, and other UI elements inherit from it.
• Can be added from code or in xml file
• All views are organized into a single tree
• View Group - container for other views

Layout

• Defines the visual structure of the UI.

Layout Types

Constraint Layout

• Views are positioned relative to other widgetsCommon attributes
• layout_width, layout_height: match_parent, wrap_content.

Linear Layout

• Arranges child views in a single direction (either vertical or horizontal).
• Can be a child of ConstraintLayout.

Relative Layout

• Widgets are arranged in relative positions to each other.
• Supports alignment options like bottom, center, left, right.

Table Layout

• Arranges child views in rows and columns.
• Consists of TableRow elements.

Frame Layout

• Blocks out an area to display a single item.

Style

• A set of attributes applied to a single View.

• Attributes include color, font size, font color, background color, etc.

• Defined in the styles.xml file.

• Defined using the <style> element inside a resource XML file.

• Basic Example (res/values/styles.xml):

  xml
  <resources>
      <!-- Base Button Style -->
      <style name="MyButtonStyle">
          <item name="android:background">#6200EE</item>
          <item name="android:textColor">#FFFFFF</item>
          <item name="android:padding">10dp</item>
      </style>
  
      <!-- Another Style for TextView -->
      <style name="MyTextViewStyle">
          <item name="android:textSize">18sp</item>
          <item name="android:textColor">#333333</item>
      </style>
  </resources>
  Example: Applying a Style in XML
  xml
  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      style="@style/MyButtonStyle"
      android:text="Click Me"/>
  

Theme

• A set of attributes applied to the entire app.

• A collection of multiple styles.

• Located in res/values/themes/.

• The default theme is in themes.xml.

• Defined in XML files.

• A single themes.xml file can contain multiple themes.

• Example:

  xml
  <resources>
      <!-- Light Theme -->
      <style name="Theme.MyApp.Light" parent="Theme.Material3.Light">
          <item name="colorPrimary">#6200EE</item>
          <item name="colorOnPrimary">#FFFFFF</item>
      </style>
  
      <!-- Dark Theme -->
      <style name="Theme.MyApp.Dark" parent="Theme.Material3.Dark">
          <item name="colorPrimary">#BB86FC</item>
          <item name="colorOnPrimary">#000000</item>
      </style>
  
      <!-- Custom Variant -->
      <style name="Theme.MyApp.Custom" parent="Theme.Material3.DayNight">
          <item name="colorPrimary">#03DAC5</item>
          <item name="colorOnPrimary">#000000</item>
      </style>
  </resources>

The theme for an Android app is primarily defined in the AndroidManifest.xml file within the <application> or <activity> tag using the android:theme attribute.

An app can use multiple themes in different ways:

1. Different Themes for Different Activities

• You can assign different themes to different activities by specifying android:theme in each <activity> tag in AndroidManifest.xml.
2. Switch Themes Dynamically at Runtime
3. Using DayNight Theme for Automatic Switching

General Rule:

styles.xml → For reusable component styles (buttons, text views, etc.).

themes.xml → For app-wide themes.

Colors

• Colors are defined in colors.xml.

• You can modify default colors for the app here.

• The app has three default colors, but you can add custom colors later.

• You can create multiple colors.xml files inside res/values/ to keep colors organized.

• For example:

  1. Default colors file (res/values/colors.xml):

     xml
     <resources>
         <color name="colorPrimary">#6200EE</color>
         <color name="colorSecondary">#03DAC5</color>
     </resources>
     

  2. Dark mode colors (res/values-night/colors.xml):

     xml
     
     <resources>
         <color name="colorPrimary">#BB86FC</color>
         <color name="colorSecondary">#03DAC5</color>
     </resources>
     

  3. Custom colors file (res/values/colors_brand.xml):

     xml
     <resources>
         <color name="brandPrimary">#FF5733</color>
         <color name="brandAccent">#FFC300</color>
     </resources>