|
1 | | - |
2 | 1 | # AndroidYCoreUI |
3 | 2 | ================== |
4 | 3 |
|
| 4 | +## Y Tags |
| 5 | +================== |
| 6 | + |
| 7 | +Y Tag is a UI element in Android (some times referred to as chips) which displays a piece of |
| 8 | +information. |
| 9 | +It consist of a leading icon(optional), Text and a trailing icon (optional). |
| 10 | + |
| 11 | +### Features |
| 12 | +================== |
| 13 | + |
| 14 | +- Fully customizable |
| 15 | + - Shape |
| 16 | + - Leading and Trailing Icons |
| 17 | + - Border |
| 18 | + - Background |
| 19 | + - Text style |
| 20 | + - Shadow |
| 21 | +- Provides a container called Tag view container which holds multiple tags |
| 22 | + - Container size can be fixed or variable |
| 23 | + - If container does not have enough space to accommodate the given tags, it will show over flow |
| 24 | + tag which is configurable. |
| 25 | +- Built with Compose UI |
| 26 | + |
| 27 | +### Usage |
| 28 | +================== |
| 29 | + |
| 30 | +**Basic** |
| 31 | + |
| 32 | +``` |
| 33 | +TagViewData(text ="Default") |
| 34 | +``` |
| 35 | + |
| 36 | +**Customizations** |
| 37 | + |
| 38 | +``` |
| 39 | +val text = "Y Tag" |
| 40 | +val tagViewModifiers = TagViewModifiers.Builder() |
| 41 | + .width(140.dp) |
| 42 | + .shape(CircleShape) |
| 43 | + .backgroundColor(backgroundColor) |
| 44 | + .enableBorder(true) |
| 45 | + .borderColor(Color.Red) |
| 46 | + .textColor(Color.Black) |
| 47 | + .maxLines(1) |
| 48 | + .overFlow(TextOverflow.Ellipsis) |
| 49 | + .build() |
| 50 | +val leadingIcon = { tagViewData -> |
| 51 | + IconButton( |
| 52 | + onClick = {}) { |
| 53 | + Icon(painter = painterResource(id = R.drawable.ic_location_24px), |
| 54 | + contentDescription = null, |
| 55 | + tint = iconTint |
| 56 | + ) |
| 57 | + } |
| 58 | + } |
| 59 | + |
| 60 | +val trailingIcon = { tagViewData -> |
| 61 | + IconButton( |
| 62 | + onClick = {}) { |
| 63 | + Icon(painter = painterResource(id = R.drawable.ic_close_20px), |
| 64 | + contentDescription = null, |
| 65 | + tint = iconTint |
| 66 | + ) |
| 67 | + } |
| 68 | + } |
| 69 | + |
| 70 | +TagViewData(text, tagViewModifiers, leadingIcon, trailingIcon) |
| 71 | +``` |
| 72 | + |
| 73 | +** Y Tag Container ** |
| 74 | + |
| 75 | +``` |
| 76 | + val tagViewData = remember { |
| 77 | + mutableStateListOf<TagViewData>() |
| 78 | + } |
| 79 | + |
| 80 | + tagViewData.addAll( |
| 81 | + TagViewData( |
| 82 | + text = "capsule", |
| 83 | + tagViewModifiers = TagViewModifiers.Builder() |
| 84 | + .width(90.dp) |
| 85 | + .shape(CircleShape) |
| 86 | + .backgroundColor(backgroundColor).textColor(textColor).style(textStyle).build() |
| 87 | + )) |
| 88 | + |
| 89 | + val tagViewContainerModifiers = TagViewContainerModifiers.Builder() |
| 90 | + .shape(RoundedCornerShape(4.dp) |
| 91 | + .tagSpacingVertical(8.dp) |
| 92 | + .tagSpacingHorizontal(8.dp) |
| 93 | + .width(360.dp) |
| 94 | + .height(50.dp) |
| 95 | + .moreTagConfiguration( |
| 96 | + TagViewData( |
| 97 | + overFlowText = { count -> |
| 98 | + "+ $count more" |
| 99 | + }, |
| 100 | + tagViewModifiers = TagViewModifiers.Builder() |
| 101 | + .backgroundColor(colorResource(id = R.color.light_blue_300)) |
| 102 | + .shape(CircleShape).width(80.dp).textAlign(TextAlign.Start).height(30.dp) |
| 103 | + .maxLines(1).overFlow(TextOverflow.Ellipsis).textAlign(TextAlign.Center) |
| 104 | + .textColor(Color.Black).fontWeight(FontWeight.Medium).onCLick { }.build() |
| 105 | + ) |
| 106 | + ).onCLick {} |
| 107 | + .build() |
| 108 | + |
| 109 | + TagViewContainer(tagViewData, tagViewContainerModifiers) |
| 110 | +``` |
| 111 | + |
| 112 | +### Screenshots |
| 113 | + |
| 114 | + |
| 115 | + |
5 | 116 | ### How to generate test report |
| 117 | + |
6 | 118 | - Generating jacoco test report |
7 | 119 | - Gradle command `clean build createMergedJacocoReport` |
8 | 120 | - From android studio |
9 | 121 | - Open gradle menu bar from android studio right side panel |
10 | 122 | - Click on the gradle icon and |
11 | 123 | - In command popup window type `clean build createMergedJacocoReport` and press enter |
12 | 124 | - Wait for the execution completion, |
13 | | - - After successful execution each module level execution report will be stored in 'module\build\reports\jacoco\html\index.html'. |
| 125 | + - After successful execution each module level execution report will be stored in ' |
| 126 | + module\build\reports\jacoco\html\index.html'. |
14 | 127 |
|
15 | 128 | ### How to generate dokka report |
16 | | -- Gradle command single module `clean build dokkaHtml` for multi module `clean build dokkaHtmlMultiModule` |
| 129 | + |
| 130 | +- Gradle command single module `clean build dokkaHtml` for multi |
| 131 | + module `clean build dokkaHtmlMultiModule` |
17 | 132 | - From android studio |
18 | 133 | - Open gradle menu bar from android studio right side panel |
19 | 134 | - Click on the gradle icon and |
20 | 135 | - In command popup window type `dokkaHtml` for multi module `dokkaHtmlMultiModule` |
21 | 136 |
|
22 | 137 | ### How to check KTLint |
| 138 | + |
23 | 139 | - Gradle command for checking lint error `ktlintCheck` |
24 | 140 | - Gradle command for formatting code `ktlintFormat` |
25 | | -======= |
| 141 | + ======= |
26 | 142 |
|
27 | 143 |
|
0 commit comments