https://github.com/codeandtheory/ytag-android

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).
https://github.com/codeandtheory/ytag-android

android-ui android-ui-widgets compose compose-ui customui customuicontrol tag taganimation tagcontainer tags

Last synced: 2 months ago
JSON representation

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).

• Host: GitHub
• URL: https://github.com/codeandtheory/ytag-android
• Owner: codeandtheory
• Created: 2023-03-20T08:29:46.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-20T08:53:47.000Z (over 1 year ago)
• Last Synced: 2024-04-18T03:10:16.184Z (9 months ago)
• Topics: android-ui, android-ui-widgets, compose, compose-ui, customui, customuicontrol, tag, taganimation, tagcontainer, tags
• Language: Kotlin
• Homepage:
• Size: 1.03 MB
• Stars: 1
• Watchers: 4
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.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.

```