xpeho_ui_android

This is an Android implementation of the Xpeho UI made with Jetpack Compose.

Import the package

To import the package in your android project, follow theses steps:

• Add the following code to your gradle file on your project (pluginManagement and dependencyREsolutionManagement blocks) :

  maven {
      url 'https://maven.pkg.github.com/XPEHO/xpeho_ui_android'
      credentials {
          username = ""
          password = ""
      }
  }

• As you can see we don't set username and password, that's because we can't compute from an other file in that type of block so we add the following code after these two blocks :

  // Update credentials
  gradle.settingsEvaluated {
    pluginManagement.repositories {
        maven {
            url 'https://maven.pkg.github.com/XPEHO/xpeho_ui_android'
            credentials {
                username = System.getenv('GITHUB_USER') ?: ""
                password = System.getenv('GITHUB_TOKEN') ?: ""
            }
        }
    }
  
    dependencyResolutionManagement.repositories {
        maven {
            url 'https://maven.pkg.github.com/XPEHO/xpeho_ui_android'
            credentials {
                username = System.getenv('GITHUB_USER') ?: ""
                password = System.getenv('GITHUB_TOKEN') ?: ""
            }
        }
    }
  }

• Add the needed environment variables :

  • On a mac/linux you can add them to your .zshrc/.bashrc

    #Github
    export GITHUB_USER="your_github_username"
    export GITHUB_TOKEN="your_github_token"
    

    To fill the GITHUB_TOKEN, make sure to generate a PAT (Personal Access Token) on your github account following the documentation.

    You need to allow the following rights :

• Now we can add in our dependencies block of the build.gradle file the following implementation :

  //XpehoUI
  implementation "com.xpeho.packages:xpeho_ui_android:1.0.0"

• So the implementation is done you can now sync your gradle files and import the package in any file like this:

  import com.xpeho.xpeho_ui_android.*

Use the package

Assets

Icons

You can access icons of the library that are in the drawable directory using the following lines :

import com.xpeho.xpeho_ui_android.R.drawable as XpehoRes

XpehoRes.ICON_NAME

Make sure to replace ICON_NAME by the file name of the drawable you want to use.

Colors

Colors of the library :

• XPEHO_COLOR :
• XPEHO_DARK_COLOR :
• GREEN_DARK_COLOR :
• RED_INFO_COLOR :
• DISABLED_COLOR :
• CONTENT_COLOR :
• BACKGROUND_COLOR :
• GRAY_LIGHT_COLOR :

You can access them using the following lines :

import com.xpeho.xpeho_ui_android.foundation.Colors as XpehoColors

XpehoColors.COLOR_NAME

Make sure to replace COLOR_NAME by the name of the color you want to use.

Fonts

Fonts of the library :

• Rubik : rubik
• Roboto : roboto
• Raleway : raleway

You can access these fonts using the following lines:

import com.xpeho.xpeho_ui_android.foundation.Fonts as XpehoFonts

Text(
    "Text",
    fontFamily = XpehoFonts.FONT_NAME,
    fontWeight = FontWeight.FONT_WEIGHT
)

Make sure to replace FONT_NAME and FONT_WEIGHT by the name of the font and the weight you want to use.

Available components

ClickyButton

Usage :

import com.xpeho.xpeho_ui_android.ClickyButton

ClickyButton(
    label = String,
    size = TextUnit,
    backgroundColor = Color,
    labelColor = Color,
    verticalPadding = Dp,
    horizontalPadding = Dp,
    enabled = Boolean,
    onPress = () -> Unit
)

TagPill

Usage:

import com.xpeho.xpeho_ui_android.TagPill

TagPill(
    label = String,
    size = TextUnit,
    backgroundColor = Color,
    labelColor = Color
)

CollapsableCard

Usage:

import com.xpeho.xpeho_ui_android.CollapsableCard

CollapsableCard(
    title = String,
    date = String,
    keywords = List<String>,
    onOpenPressed = () -> Unit,
    collapsed = Boolean
)

InputText

usage:

import com.xpeho.xpeho_ui_android.InputText

InputText(
    label = String,
    passwordSwitcherIcon = () -> Unit,
    defaultInput = String,
    labelSize = Float,
    inputSize = Float,
    labelColor = Color,
    backgroundColor = Color,
    inputColor = Color,
    password = Boolean,
    focusRequester = FocusRequester,
    keyboardAction = ImeAction,
    onKeyboardAction = () -> Unit,
    onInput = (String) -> Unit,
    isReadOnly = Boolean
)

ChoiceSelector

Usage:

import com.xpeho.xpeho_ui_android.ChoiceSelector

ChoiceSelector(
    label = String,
    choicesAvailable = List<String>,
    defaultSelectedChoice = String,
    size = Float,
    backgroundColor = Color,
    choiceColor = Color ,
    checkIconColor = Color,
    separatorColor = Color,
    onPress = (String) -> Unit
)

FilePreviewButton

Usage:

import com.xpeho.xpeho_ui_android.FilePreviewButton

FilePreviewButton(
    labelStart: String,
    labelEnd: String,
    imagePreview: @Composable()-> Unit,
    tags: List<@Composable()-> Unit> = listOf({TagPill()},),
    height: Dp,
    labelSize: TextUnit,
    backgroundColor: Color,
    labelColor: Color,
    enabled: Boolean,
    labelPosition: LabelPosition,
    onPress: () -> Unit,
    arrowIcon: @Composable() -> Unit,
)

Edit the package

• Clone the repository using git clone
• Launch the folder in Android Studio
• Make your changes
• Send a Pull Request

Deploy the package

A workflow has been created on this repository to automatically deploy the package in artifacts on creating a new release.

The only thing you need to do so is to create a new release on the repository following the GitHub documentation.

You can check the deployed packages by looking at the repository page, it should have your packages on the packages section.

Testing the package

Snapshot testing

https://developer.android.com/studio/preview/compose-screenshot-testing?hl=fr