Skip to content

Commit

Permalink
Update Toolbar component:
Browse files Browse the repository at this point in the history 
- Fix `textLeftUp` and `textLeftDown` alignment bug when RTL enabled.
- Deprecate existing constructor of `ToolbarViewState` with new namings.
- Update `Toolbar` to add new named click listeners and attributes.
- Update `README`.
- Set component version to toolbar-2.2.0.
- Enable publishing sources and java doc.

Update Sample:

- Update `ToolbarActivity` by using new attribute and click listener names on `toolbar4`.
  • Loading branch information
@bilgehankalkan
bilgehankalkan committed May 13, 2024
1 parent 85f0385 commit 0859675
Show file tree
Hide file tree
Showing 12 changed files with 403 additions and 188 deletions.
62 changes: 33 additions & 29 deletions libraries/toolbar/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/toolbar-1.png" width="240"/>
<img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/toolbar-1.png" width="240" alt:"Toolbar preview" />

$toolbarVersion = toolbar-2.1.2 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
$toolbarVersion = toolbar-2.2.0 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

## Toolbar
Toolbar is alternative implementation of Toolbar component on Android.
Expand All @@ -26,28 +26,32 @@ dependencies {

To customize **Toolbar** you can set [ToolbarViewState](src/main/java/com/trendyol/uicomponents/toolbar/ToolbarViewState.kt) via calling `Toolbar.setViewState` or use attributes listed below. All given text attributes will be formatted as [HTML](https://developer.android.com/reference/android/text/Html).

| Attribute | Description | Default Value | Sample Usage |
| ------------- | ------------- | ------------- | ------------- |
| `app:leftImageDrawable` | Left image drawable resource. | ic_arrow_back | `app:leftImageDrawable="@drawable/ic_back"` |
| `app:middleImageDrawable` | Middle image drawable resource. | 0 | `app:middleImageDrawable="@drawable/ic_logo"` |
| `app:rightImageDrawable` | Right image drawable resource. | 0 | `app:rightImageDrawable="@drawable/ic_close"` |
| `app:upperLeftText` | Upper left text resource. | null | `app:upperLeftText="@string/list_title"` |
| `app:lowerLeftText` | Lower left text resource. If upper left text is set and this is not set, upper left text would be centered vertically. | null | `app:lowerLeftText="@string/list_item_description"` |
| `app:middleText` | Middle text resource. | null | `app:middleText="@string/app_name"` |
| `app:upperRightText` | Upper right text resource. | null | `app:upperRightText="@string/action_select_all"` |
| `app:lowerRightText` | Lower right text resource. If upper left text is set and this is not set, upper left text would be centered vertically. | null | `app:lowerRightText="@string/action_clear"` |
| `app:toolbarBackground` | Background color or drawable resource. | android.R.color.white | `app:toolbarBackground="@drawable/toolbar_background"` |
| `app:upperLeftTextMarginStart` | Start margin for upper left text. | trendyol_uicomponents_toolbar_margin_left_side_text | `app:upperLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
| `app:lowerLeftTextMarginStart` | Start margin for lower left text. | trendyol_uicomponents_toolbar_margin_left_side_text | `app:lowerLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
| `app:upperRightTextMarginEnd` | End margin for upper right text. | trendyol_uicomponents_toolbar_margin_outer | `app:upperLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
| `app:lowerRightTextMarginEnd` | End margin for upper right text. | trendyol_uicomponents_toolbar_margin_outer | `app:upperLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
| `app:leftImageDrawableMarginStart` | Start margin for left drawable. | 0 | `app:upperLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
| `app:rightImageDrawableMarginEnd` | End margin for left drawable. | 0 | `app:rightImageDrawableMarginEnd="@dimen/trendyol_uicomponents_toolbar_margin_right_side_icon"` |
| `app:hideLeftImage` | Hide flag for left image. | false | `app:hideLeftImage="true"` |
| `app:leftImageContentDescription` | Text for Left Image of Talkback | "" | `app:hideLeftImage="Back"` |
| `app:rightImageContentDescription` | Text for Right Image of Talkback | "" | `app:hideLeftImage="Add"` |
| `app:rightImageDrawableVerticalMargin` | Vertical margin for right drawable | 0 | `app:rightImageDrawableVerticalMargin="12dp"`|
| `app:enableDotPoint` | Right drawable's dots point enabled status | false | `app:enableDotPoint="true"` |
:warning: Starting from the `toolbar-2.2.0` version, namings are updated from "left-right" to
"start-end" on both ToolbarViewState and resource attributes. Component will still support older
values but its highly recommended to update usages.

| Attribute | Description | Default Value | Sample Usage |
|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------|--------------------------------------------------------|
| `app:StartImageDrawable` ~~`app:leftImageDrawable`~~ | Start image drawable resource. | ic_arrow_back | `app:startImageDrawable="@drawable/ic_back"` |
| `app:middleImageDrawable` | Middle image drawable resource. | 0 | `app:middleImageDrawable="@drawable/ic_logo"` |
| `app:endImageDrawable` ~~`app:rightImageDrawable`~~ | End image drawable resource. | 0 | `app:endImageDrawable="@drawable/ic_close"` |
| `app:upperStartText` ~~`app:upperLeftText`~~ | Upper start text resource. | null | `app:upperStartText="@string/list_title"` |
| `app:lowerStartText` ~~`app:lowerLeftText`~~ | Lower start text resource. If upper start text is set and this is not set, upper start text would be centered vertically. | null | `app:lowerStartText="@string/list_item_description"` |
| `app:middleText` | Middle text resource. | null | `app:middleText="@string/app_name"` |
| `app:upperEndText` ~~`app:upperRightText`~~ | Upper end text resource. | null | `app:upperE dText="@string/action_select_all"` |
| `app:lowerEndText` ~~`app:lowerRightText`~~ | Lower end text resource. If upper start text is set and this is not set, upper start text would be centered vertically. | null | `app:lowerE dText="@string/action_clear"` |
| `app:toolbarBackground` | Background color or drawable resource. | android.R.color.white - #FFFFFF | `app:toolbarBackground="@drawable/toolbar_background"` |
| `app:upperStartTextMarginStart` ~~`app:upperLeftTextMarginStart`~~ | Start margin for upper start text. | trendyol_uicomponents_toolbar_margin_start_side_text - 24dp | `app:upperStartTextMarginStart="@dimen/margin_sample"` |
| `app:lowerStartTextMarginStart` ~~`app:lowerLeftTextMarginStart`~~ | Start margin for lower start text. | trendyol_uicomponents_toolbar_margin_start_side_text - 24dp | `app:lowerStartTextMarginStart="24dp"` |
| `app:upperEndTextMarginEnd` ~~`app:upperRightTextMarginEnd`~~ | End margin for upper end text. | trendyol_uicomponents_toolbar_margin_outer - 8dp | `app:upperEndTextMarginEnd="@dimen/my_margin"` |
| `app:lowerEndTextMarginEnd` ~~`app:lowerRightTextMarginEnd`~~ | End margin for upper end text. | trendyol_uicomponents_toolbar_margin_outer - 8dp | `app:lowerEndTextMarginEnd="16dp"` |
| `app:startImageDrawableMarginStart` ~~`app:leftImageDrawableMarginStart`~~ | Start margin for start drawable. | 0 | `app:startImageDrawableMarginStart="@dimen/my_margin"` |
| `app:endImageDrawableMarginEnd` ~~`app:rightImageDrawableMarginEnd`~~ | End margin for start drawable. | 0 | `app:endImageDrawableMarginEnd="32dp"` |
| `app:hideStartImage` ~~`app:hideLeftImage`~~ | Hide flag for start image. | false | `app:hideStartImage="true"` |
| `app:startImageContentDescription` ~~`app:leftImageContentDescription`~~ | Text for start Image of Talkback | "" | `app:startImageContentDescription="Back"` |
| `app:endImageContentDescription` ~~`app:rightImageContentDescription`~~ | Text for end Image of Talkback | "" | `app:endImageContentDescription="Add"` |
| `app:endImageDrawableVerticalMargin` ~~`app:rightImageDrawableVerticalMargin`~~ | Vertical margin for end drawable | 0 | `app:endImageDrawableVerticalMargin="12dp"` |
| `app:enableDotPoint` | End drawable's dots point enabled status | false | `app:enableDotPoint="true"` |

Sample usage with attributes:

Expand All @@ -59,7 +63,7 @@ Sample usage with attributes:
android:layout_height="?attr/actionBarSize"
app:toolbarBackground="@color/background"
app:middleText="@string/app_name"
app:upperRightText="@string/clear_all" />
app:upperEndText="@string/clear_all" />

```

Expand All @@ -73,7 +77,7 @@ To set click listener, you can use **Toolbar** instance fields like below.

val toolbar: Toolbar = findViewById(R.id.toolbar)

toolbar.leftImageClickListener = { onBackPressed() }
toolbar.startImageClickListener = { onBackPressed() }

```

Expand All @@ -84,9 +88,9 @@ Sample usage with `ToolbarViewState`:
val toolbar: Toolbar = findViewById(R.id.toolbar)

toolbar.viewState = ToolbarViewState(
upperLeftText = "<b>List</b>",
leftImageDrawableResId = R.drawable.ic_arrow_back,
upperLeftTextAppearance = R.style.MyTextStyle_Body_2
upperStartText = "<b>List</b>",
startImageDrawableResId = R.drawable.ic_arrow_back,
upperStartTextAppearance = R.style.MyTextStyle_Body_2
)

```
Expand Down
7 changes: 7 additions & 0 deletions libraries/toolbar/build.gradle.kts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@ android {
}
}

publishing {
this.singleVariant("release") {
withJavadocJar()
withSourcesJar()
}
}

namespace = "com.trendyol.uicomponents.toolbar"
}

Expand Down
44 changes: 44 additions & 0 deletions libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/Extensions.kt
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
package com.trendyol.uicomponents.toolbar

import android.content.res.TypedArray
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.annotation.StyleRes
import androidx.annotation.StyleableRes
import androidx.appcompat.widget.AppCompatImageView
import androidx.core.widget.TextViewCompat

Expand Down Expand Up @@ -55,3 +58,44 @@ fun View.setDebouncedOnClickListener(debounceMillis: Long = 500L, onClickListene
}
}
}

internal fun TypedArray.getDimensionPixelOffsetOrDefault(
@StyleableRes primaryIndex: Int,
@StyleableRes secondaryIndex: Int,
defaultValue: Int,
): Int {
val primaryValue = getDimensionPixelOffset(primaryIndex, -1)
val secondaryValue = getDimensionPixelOffset(secondaryIndex, -1)
return if (primaryValue == -1 && secondaryValue == -1) {
defaultValue
} else if (primaryValue == -1) {
secondaryValue
} else {
primaryValue
}
}

internal fun TypedArray.getResourceIdOrDefault(
@StyleableRes primaryIndex: Int,
@StyleableRes secondaryIndex: Int,
defaultValue: Int
): Int {
val primaryValue = getResourceId(primaryIndex, 0)
val secondaryValue = getResourceId(secondaryIndex, 0)
return if (primaryValue == 0 && secondaryValue == 0) {
defaultValue
} else if (primaryValue == 0) {
secondaryValue
} else {
primaryValue
}
}

internal fun TypedArray.getStringOrEmpty(
@StyleableRes primaryIndex: Int,
@StyleableRes secondaryIndex: Int,
): String {
val primaryValue = getString(primaryIndex)
val secondaryValue = getString(secondaryIndex)
return primaryValue ?: secondaryValue ?: ""
}
Loading

0 comments on commit 0859675

Please sign in to comment.