Skip to content

Y Tag is a UI element in Android (some times referred to as chips) which displays a piece of information. It consist of a leading icon(optional), Text and a trailing icon (optional).

Notifications You must be signed in to change notification settings

codeandtheory/YTag-android

Repository files navigation

Y Tags

Y Tag is a UI element in Android (sometimes referred to as chips) which displays a piece of information. It consists of a leading icon(optional), Text and a trailing icon (optional).

Features

  • Fully customizable
    • Shape
    • Leading and Trailing Icons
    • Border
    • Background
    • Text style
    • Shadow
  • Provides a container called Tag view container which holds multiple tags
    • Container size can be fixed or variable
    • If the container does not have enough space to accommodate the given tags, it will show an overflow tag which is configurable.
  • Built with Compose UI

Usage

Basic

TagView(text ="Default")

Customizations

val text = "Y Tag"
val tagViewModifiers = TagViewModifiers.Builder()
    .width(140.dp)
    .shape(CircleShape)
    .backgroundColor(backgroundColor)
    .enableBorder(true)
    .borderColor(Color.Red)
    .textColor(Color.Black)
    .maxLines(1)
    .overFlow(TextOverflow.Ellipsis)
    .build()
val leadingIcon =  { tagViewData ->
    IconButton(
       onClick = {}) {
       Icon(painter = painterResource(id = R.drawable.ic_location_24px),
            contentDescription = null,
            tint = iconTint
        )
      }
    }   
    
val trailingIcon =  { tagViewData ->
    IconButton(
       onClick = {}) {
       Icon(painter = painterResource(id = R.drawable.ic_close_20px),
            contentDescription = null,
            tint = iconTint
        )
      }
    }     
    
TagView(text = text,  tagViewModifiers = tagViewModifiers, leadingIcon = leadingIcon, trailingIcon = trailingIcon,  enabled = true)

Y Tag Container

 val tagViewData = remember {
        mutableStateListOf<TagViewData>()
    }
    
   tagViewData.addAll(   
   TagViewData(
        text = "capsule",
        tagViewModifiers = TagViewModifiers.Builder()
        .width(90.dp)
        .shape(CircleShape)
        .backgroundColor(backgroundColor).textColor(textColor).style(textStyle).build()
    ))
    
  val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
      .shape(RoundedCornerShape(4.dp)
      .tagSpacingVertical(8.dp)
      .tagSpacingHorizontal(8.dp)
      .width(360.dp)
      .height(50.dp)
      .moreTagConfiguration(
       TagViewData(
           overFlowText = { count ->
              "+ $count more"
           },
           tagViewModifiers = TagViewModifiers.Builder()
              .backgroundColor(colorResource(id = R.color.light_blue_300))
               .shape(CircleShape).width(80.dp).textAlign(TextAlign.Start).height(30.dp)
               .maxLines(1).overFlow(TextOverflow.Ellipsis).textAlign(TextAlign.Center)
               .textColor(Color.Black).fontWeight(FontWeight.Medium).onCLick { }.build()
              )
     ).onCLick {}
     .build()
     
    TagViewContainer(tagViewData = tagViewData, tagViewContainerModifiers = tagViewContainerModifiers)  

Screenshots

Demo

How to generate test report

  • Generating Jacoco test report
    • Gradle command clean build createMergedJacocoReport
      • From Android studio
        • Open the Gradle menu bar from Android Studio right-side panel
        • Click on the Gradle icon and
        • In the command popup window type clean build createMergedJacocoReport and press enter
        • Wait for the execution completion,
        • After successful execution each module-level execution report will be stored in ' module\build\reports\jacoco\html\index.html'.

How to generate dokka report

  • Gradle command single module clean build dokkaHtml for multi module clean build dokkaHtmlMultiModule
    • From Android Studio:
    • Open the Gradle menu bar from Android Studio right side panel
    • Click on the Gradle icon and
    • In the command popup window type dokkaHtml for multi-module dokkaHtmlMultiModule

How to check KTLint

  • Gradle command for checking lint error: ktlintCheck

  • Gradle command for formatting code: ktlintFormat

    =======

License

    Copyright 2023 YTags

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

About

Y Tag is a UI element in Android (some times referred to as chips) which displays a piece of information. It consist of a leading icon(optional), Text and a trailing icon (optional).

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages