Skip to content

Commit 15424b2

Browse files
bilgehankalkanbilgehankalkan
authored
Merge pull request #124 from Trendyol/toolbar/update-namings-for-rtl
Update Toolbar for RTL support
2 parents 85f0385 + 0859675 commit 15424b2

File tree

12 files changed

+403
-188
lines changed

12 files changed

+403
-188
lines changed

‎libraries/toolbar/README.md

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/toolbar-1.png" width="240"/>
1+
<img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/toolbar-1.png" width="240" alt:"Toolbar preview" />
22

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

55
## Toolbar
66
Toolbar is alternative implementation of Toolbar component on Android.
@@ -26,28 +26,32 @@ dependencies {
2626

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

29-
| Attribute | Description | Default Value | Sample Usage |
30-
| ------------- | ------------- | ------------- | ------------- |
31-
| `app:leftImageDrawable` | Left image drawable resource. | ic_arrow_back | `app:leftImageDrawable="@drawable/ic_back"` |
32-
| `app:middleImageDrawable` | Middle image drawable resource. | 0 | `app:middleImageDrawable="@drawable/ic_logo"` |
33-
| `app:rightImageDrawable` | Right image drawable resource. | 0 | `app:rightImageDrawable="@drawable/ic_close"` |
34-
| `app:upperLeftText` | Upper left text resource. | null | `app:upperLeftText="@string/list_title"` |
35-
| `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"` |
36-
| `app:middleText` | Middle text resource. | null | `app:middleText="@string/app_name"` |
37-
| `app:upperRightText` | Upper right text resource. | null | `app:upperRightText="@string/action_select_all"` |
38-
| `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"` |
39-
| `app:toolbarBackground` | Background color or drawable resource. | android.R.color.white | `app:toolbarBackground="@drawable/toolbar_background"` |
40-
| `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"` |
41-
| `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"` |
42-
| `app:upperRightTextMarginEnd` | End margin for upper right text. | trendyol_uicomponents_toolbar_margin_outer | `app:upperLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
43-
| `app:lowerRightTextMarginEnd` | End margin for upper right text. | trendyol_uicomponents_toolbar_margin_outer | `app:upperLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
44-
| `app:leftImageDrawableMarginStart` | Start margin for left drawable. | 0 | `app:upperLeftTextMarginStart="@dimen/trendyol_uicomponents_toolbar_margin_left_side_text"` |
45-
| `app:rightImageDrawableMarginEnd` | End margin for left drawable. | 0 | `app:rightImageDrawableMarginEnd="@dimen/trendyol_uicomponents_toolbar_margin_right_side_icon"` |
46-
| `app:hideLeftImage` | Hide flag for left image. | false | `app:hideLeftImage="true"` |
47-
| `app:leftImageContentDescription` | Text for Left Image of Talkback | "" | `app:hideLeftImage="Back"` |
48-
| `app:rightImageContentDescription` | Text for Right Image of Talkback | "" | `app:hideLeftImage="Add"` |
49-
| `app:rightImageDrawableVerticalMargin` | Vertical margin for right drawable | 0 | `app:rightImageDrawableVerticalMargin="12dp"`|
50-
| `app:enableDotPoint` | Right drawable's dots point enabled status | false | `app:enableDotPoint="true"` |
29+
:warning: Starting from the `toolbar-2.2.0` version, namings are updated from "left-right" to
30+
"start-end" on both ToolbarViewState and resource attributes. Component will still support older
31+
values but its highly recommended to update usages.
32+
33+
| Attribute | Description | Default Value | Sample Usage |
34+
|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------|--------------------------------------------------------|
35+
| `app:StartImageDrawable` ~~`app:leftImageDrawable`~~ | Start image drawable resource. | ic_arrow_back | `app:startImageDrawable="@drawable/ic_back"` |
36+
| `app:middleImageDrawable` | Middle image drawable resource. | 0 | `app:middleImageDrawable="@drawable/ic_logo"` |
37+
| `app:endImageDrawable` ~~`app:rightImageDrawable`~~ | End image drawable resource. | 0 | `app:endImageDrawable="@drawable/ic_close"` |
38+
| `app:upperStartText` ~~`app:upperLeftText`~~ | Upper start text resource. | null | `app:upperStartText="@string/list_title"` |
39+
| `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"` |
40+
| `app:middleText` | Middle text resource. | null | `app:middleText="@string/app_name"` |
41+
| `app:upperEndText` ~~`app:upperRightText`~~ | Upper end text resource. | null | `app:upperE dText="@string/action_select_all"` |
42+
| `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"` |
43+
| `app:toolbarBackground` | Background color or drawable resource. | android.R.color.white - #FFFFFF | `app:toolbarBackground="@drawable/toolbar_background"` |
44+
| `app:upperStartTextMarginStart` ~~`app:upperLeftTextMarginStart`~~ | Start margin for upper start text. | trendyol_uicomponents_toolbar_margin_start_side_text - 24dp | `app:upperStartTextMarginStart="@dimen/margin_sample"` |
45+
| `app:lowerStartTextMarginStart` ~~`app:lowerLeftTextMarginStart`~~ | Start margin for lower start text. | trendyol_uicomponents_toolbar_margin_start_side_text - 24dp | `app:lowerStartTextMarginStart="24dp"` |
46+
| `app:upperEndTextMarginEnd` ~~`app:upperRightTextMarginEnd`~~ | End margin for upper end text. | trendyol_uicomponents_toolbar_margin_outer - 8dp | `app:upperEndTextMarginEnd="@dimen/my_margin"` |
47+
| `app:lowerEndTextMarginEnd` ~~`app:lowerRightTextMarginEnd`~~ | End margin for upper end text. | trendyol_uicomponents_toolbar_margin_outer - 8dp | `app:lowerEndTextMarginEnd="16dp"` |
48+
| `app:startImageDrawableMarginStart` ~~`app:leftImageDrawableMarginStart`~~ | Start margin for start drawable. | 0 | `app:startImageDrawableMarginStart="@dimen/my_margin"` |
49+
| `app:endImageDrawableMarginEnd` ~~`app:rightImageDrawableMarginEnd`~~ | End margin for start drawable. | 0 | `app:endImageDrawableMarginEnd="32dp"` |
50+
| `app:hideStartImage` ~~`app:hideLeftImage`~~ | Hide flag for start image. | false | `app:hideStartImage="true"` |
51+
| `app:startImageContentDescription` ~~`app:leftImageContentDescription`~~ | Text for start Image of Talkback | "" | `app:startImageContentDescription="Back"` |
52+
| `app:endImageContentDescription` ~~`app:rightImageContentDescription`~~ | Text for end Image of Talkback | "" | `app:endImageContentDescription="Add"` |
53+
| `app:endImageDrawableVerticalMargin` ~~`app:rightImageDrawableVerticalMargin`~~ | Vertical margin for end drawable | 0 | `app:endImageDrawableVerticalMargin="12dp"` |
54+
| `app:enableDotPoint` | End drawable's dots point enabled status | false | `app:enableDotPoint="true"` |
5155

5256
Sample usage with attributes:
5357

@@ -59,7 +63,7 @@ Sample usage with attributes:
5963
android:layout_height="?attr/actionBarSize"
6064
app:toolbarBackground="@color/background"
6165
app:middleText="@string/app_name"
62-
app:upperRightText="@string/clear_all" />
66+
app:upperEndText="@string/clear_all" />
6367

6468
```
6569

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

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

76-
toolbar.leftImageClickListener = { onBackPressed() }
80+
toolbar.startImageClickListener = { onBackPressed() }
7781

7882
```
7983

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

8690
toolbar.viewState = ToolbarViewState(
87-
upperLeftText = "<b>List</b>",
88-
leftImageDrawableResId = R.drawable.ic_arrow_back,
89-
upperLeftTextAppearance = R.style.MyTextStyle_Body_2
91+
upperStartText = "<b>List</b>",
92+
startImageDrawableResId = R.drawable.ic_arrow_back,
93+
upperStartTextAppearance = R.style.MyTextStyle_Body_2
9094
)
9195

9296
```

‎libraries/toolbar/build.gradle.kts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ android {
2323
}
2424
}
2525

26+
publishing {
27+
this.singleVariant("release") {
28+
withJavadocJar()
29+
withSourcesJar()
30+
}
31+
}
32+
2633
namespace = "com.trendyol.uicomponents.toolbar"
2734
}
2835

‎libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/Extensions.kt

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
package com.trendyol.uicomponents.toolbar
22

3+
import android.content.res.TypedArray
34
import android.view.View
45
import android.view.ViewGroup
56
import android.widget.TextView
67
import androidx.annotation.DrawableRes
8+
import androidx.annotation.StringRes
79
import androidx.annotation.StyleRes
10+
import androidx.annotation.StyleableRes
811
import androidx.appcompat.widget.AppCompatImageView
912
import androidx.core.widget.TextViewCompat
1013

@@ -55,3 +58,44 @@ fun View.setDebouncedOnClickListener(debounceMillis: Long = 500L, onClickListene
5558
}
5659
}
5760
}
61+
62+
internal fun TypedArray.getDimensionPixelOffsetOrDefault(
63+
@StyleableRes primaryIndex: Int,
64+
@StyleableRes secondaryIndex: Int,
65+
defaultValue: Int,
66+
): Int {
67+
val primaryValue = getDimensionPixelOffset(primaryIndex, -1)
68+
val secondaryValue = getDimensionPixelOffset(secondaryIndex, -1)
69+
return if (primaryValue == -1 && secondaryValue == -1) {
70+
defaultValue
71+
} else if (primaryValue == -1) {
72+
secondaryValue
73+
} else {
74+
primaryValue
75+
}
76+
}
77+
78+
internal fun TypedArray.getResourceIdOrDefault(
79+
@StyleableRes primaryIndex: Int,
80+
@StyleableRes secondaryIndex: Int,
81+
defaultValue: Int
82+
): Int {
83+
val primaryValue = getResourceId(primaryIndex, 0)
84+
val secondaryValue = getResourceId(secondaryIndex, 0)
85+
return if (primaryValue == 0 && secondaryValue == 0) {
86+
defaultValue
87+
} else if (primaryValue == 0) {
88+
secondaryValue
89+
} else {
90+
primaryValue
91+
}
92+
}
93+
94+
internal fun TypedArray.getStringOrEmpty(
95+
@StyleableRes primaryIndex: Int,
96+
@StyleableRes secondaryIndex: Int,
97+
): String {
98+
val primaryValue = getString(primaryIndex)
99+
val secondaryValue = getString(secondaryIndex)
100+
return primaryValue ?: secondaryValue ?: ""
101+
}

0 commit comments

Comments
 (0)