DOCSEARCHbyAlgolia
Submit Docs

FlatUI Android Library

repository·master·Indexed 23 days ago

https://github.com/eluleci/flatui

An Android library providing customized, modern-looking native widgets. FlatUI supports custom themes, fonts, and colors via XML or Java, and enables runtime theme switching. It includes specialized widgets such as FlatTextView, FlatEditText, FlatButton, FlatCheckBox, FlatRadioButton, FlatToggleButton, and FlatSeekBar.

Tokens
1.7K
Snippets
5
Records
7
Agent score
32%

What's inside FlatUI

  1. Use custom colors with FlatUI

    master

    You can implement custom color schemes in two ways:

    1. Via XML (Color Arrays)

    Define a color array in your colors.xml and an <integer-array> containing the theme colors (typically: darker, dark, primary, and light). Reference this array using the fl_theme attribute in your layout.

    2. Via Java

    Create an integer array of colors in Java and apply it directly to a widget's attributes (e.g., FlatSeekBar).

    <!-- 1. XML Method: Define in colors.xml -->
<color name="custom_theme_darker">#ad843d</color>
<color name="custom_theme_dark">#d4a14a</color>
<color name="custom_theme_primary">#fbbf58</color>
<color name="custom_theme_light">#fae8c8</color>

<integer-array name="custom_theme">
    <item>@color/custom_theme_darker</item>
    <item>@color/custom_theme_dark</item>
    <item>@color/custom_theme_primary</item>
    <item>@color/custom_theme_light</item>
</integer-array>

<!-- Reference in layout -->
<com.cengalabs.flatui.views.FlatButton
    ... 
    flatui:fl_theme="@array/custom_theme" />
    // 2. Java Method: Set colors programmatically
int[] myColors = {Color.RED, Color.BLUE, Color.GREEN, Color.BLACK};
((FlatSeekBar) findViewById(R.id.seekbar)).getAttributes().setColors(myColors);

  2. Use custom fonts with FlatUI

    master

    FlatUI includes Roboto and Open Sans by default. To use custom fonts:

    1. Place your font file in the assets/fonts/ folder.
    2. Name the file using the format fontname_fontweight.ttf (e.g., myfont_bold.ttf).
    3. Use fl_fontFamily, fl_fontWeight, and fl_fontExtension attributes in your XML.

    Note: If using .otf files, you must specify the extension using fl_fontExtension.

    <!-- Example using custom font configuration -->
<com.cengalabs.flatui.views.FlatTextView
     ...
     flatui:fl_fontFamily="roboto"
     flatui:fl_fontWeight="light"
     flatui:fl_fontExtension="ttf"/>

  4. Initialize FlatUI and manage default themes

    master

    Use the FlatUI class to initialize default values and manage global themes.

    • FlatUI.initDefaultValues(context): Converts default values (radius, size, border) to dp to ensure compatibility across different screen densities. This should be called to avoid layout issues on different devices.
    • FlatUI.setDefaultTheme(theme): Sets a default theme globally so you don't have to specify the fl_theme attribute in every XML element. You can use predefined themes like FlatUI.DEEP or reference a custom theme from your resources using R.array.your_custom_theme.

  5. Set the ActionBar background

    master

    You can change the ActionBar background at runtime using FlatUI.getActionBarDrawable. If the background does not update correctly, try setting the ActionBar title to invalidate it.

    // Getting action bar drawable and setting it
getActionBar().setBackgroundDrawable(FlatUI.getActionBarDrawable(FlatUI.DEEP, false));
getSupportActionBar().setBackgroundDrawable(FlatUI.getActionBarDrawable(FlatUI.DEEP, false));

  6. Configure specific FlatUI widget attributes

    master

    Different widgets support specialized attributes for fine-grained control:

    • FlatTextView: fl_textColor (set to main), fl_backgroundColor (darker), or fl_customBackgroundColor (hex code).
    • FlatEditText: fl_fieldStyle (e.g., flat).
    • FlatButton: fl_touchEffect (e.g., fl_ripple), fl_blockButtonEffectHeight (dimension).
    • FlatCheckBox / FlatRadioButton: fl_dotMargin (dimension).
    • FlatToggleButton: fl_space (dimension).
    • FlatSeekBar: No special attributes; uses standard behavior.
    <!-- Namespace requirement -->
xmlns:flatui="http://schemas.android.com/apk/res-auto"

<!-- FlatButton with ripple effect -->
<com.cengalabs.flatui.views.FlatButton
    ...
    flatui:fl_touchEffect="fl_ripple"
    flatui:fl_blockButtonEffectHeight="3dp" />

<!-- FlatTextView with custom background -->
<com.cengalabs.flatui.views.FlatTextView
    ...
    flatui:fl_textColor="main"
    flatui:fl_backgroundColor="darker"
    flatui:fl_customBackgroundColor="#00aff0" />

  7. Reference FlatUI common attributes

    master

    The following attributes are common across most FlatUI views. Ensure you include the xmlns:flatui="http://schemas.android.com/apk/res-auto" namespace in your root layout element.

    AttributeDescription
    fl_themeTheme of the element (reference: @array/themeName)
    fl_textAppearanceText color relative to theme (none, dark, or light)
    fl_fontFamilyName of the font family (string)
    fl_fontWeightFont weight (extralight, light, regular, bold, extrabold)
    fl_fontExtensionExtension of the font (e.g., ttf, otf)
    fl_borderWidthBorder width of the element (dimension)
    fl_cornerRadiusCorner radius of the element (dimension)
    fl_sizeSize of the element (dimension)