Merge pull request #15 from Trendyol/feature/toolbar

Feature/toolbar

README.md

@@ -15,6 +15,7 @@ UI Components includes several custom views for Android platform to make develop
 ## Components ## 
 * [Rating Bar](https://github.com/Trendyol/android-ui-components/tree/master/libraries/rating-bar): **RatingBarView**, easy to use and customizable rating view.
 * [Dialogs](https://github.com/Trendyol/android-ui-components/tree/master/libraries/dialogs): **Dialogs** is collection of BottomSheetDialogs to present user an info, agreement or list.
+* [Toolbar](https://github.com/Trendyol/android-ui-components/tree/master/libraries/toolbar): **Toolbar** is customizable and easy to use component.
 
 License
 --------
@@ -31,7 +32,3 @@ License
     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.
-
-
-
-

build.gradle

@@ -1,7 +1,7 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    ext.kotlin_version = '1.3.60'
+    ext.kotlin_version = '1.3.61'
     repositories {
         google()
         jcenter()

libraries/toolbar/.gitignore

@@ -0,0 +1 @@
+/build

libraries/toolbar/README.md

@@ -0,0 +1,101 @@
+<img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/toolbar-1.png" width="240"/>
+
+$toolbarVersion = toolbar-1.0.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.
+
+# Installation
+ - To implement **Toolbar** to your Android project via Gradle, you need to add JitPack repository to your root build.gradle.
+```gradle
+allprojects {
+    repositories {
+        ...
+        maven { url 'https://jitpack.io' }
+    }
+}
+```
+ - After adding JitPack repository, you can add **Toolbar** dependency to your app level build.gradle.
+```gradle
+dependencies {
+    implementation "com.trendyol.ui-components:toolbar:$toolbarVersion"
+}
+```
+:warning: To use **Toolbar**, you have to enable dataBinding from your main project.
+
+# Usage
+
+To customize **Toolbar** you can provide `ToolbarViewState` or use attributes listed below. All text attributes can be HTML formatted, **Toolbar** will style them.
+
+| 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"` |
+
+Sample usage with attributes:
+
+```xml
+
+    <com.trendyol.uicomponents.toolbar.Toolbar
+        android:id="@+id/toolbar"
+        android:layout_width="match_parent"
+        android:layout_height="?attr/actionBarSize"
+        app:toolbarBackground="@color/background"
+        app:middleText="@string/app_name"
+        app:upperRightText="@string/clear_all"/>
+
+```
+
+With `ToolbarViewState` you can also provide TextAppearance resources for all text fields in **Toolbar**.
+
+You can assign every text field and image to click listeners.
+
+To set click listener, you can use **Toolbar** instance fields like below.
+
+```kotlin
+
+    val toolbar: Toolbar = findViewById(R.id.toolbar)
+
+    toolbar.leftImageClickListener = { onBackPressed() }
+
+```
+
+Sample usage with `ToolbarViewState`:
+
+```kotlin
+
+    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
+    )
+
+```
+
+# Contributors
+
+This library is maintained mainly by Trendyol Android Team members. Everybody can contribute **Toolbar** or other UI Components with opening new PR's.
+
+# License
+    Copyright 2019 Trendyol.com
+
+    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.

libraries/toolbar/build.gradle

@@ -0,0 +1,43 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+apply plugin: 'kotlin-kapt'
+apply plugin: 'com.github.dcendents.android-maven'
+
+group = "com.trendyol.uicomponents"
+version = "1.0.0"
+
+android {
+    compileSdkVersion 29
+    buildToolsVersion "29.0.2"
+
+    defaultConfig {
+        minSdkVersion 17
+        targetSdkVersion 29
+        versionCode 1
+        versionName "1.0"
+        vectorDrawables.useSupportLibrary = true
+
+        consumerProguardFiles 'consumer-rules.pro'
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+
+    dataBinding {
+        enabled true
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+    implementation 'androidx.core:core-ktx:1.1.0'
+    implementation 'com.google.android.material:material:1.0.0'
+    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
+}

libraries/toolbar/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

libraries/toolbar/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.trendyol.uicomponents.toolbar" />

libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/BindingAdapters.kt

@@ -0,0 +1,30 @@
+package com.trendyol.uicomponents.toolbar
+
+import android.view.View
+import android.widget.TextView
+import androidx.annotation.DrawableRes
+import androidx.annotation.StyleRes
+import androidx.appcompat.widget.AppCompatImageView
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.widget.TextViewCompat
+import androidx.databinding.BindingAdapter
+
+@BindingAdapter("toolbarDrawableResource")
+internal fun AppCompatImageView.setDrawableResource(@DrawableRes drawableResId: Int) {
+    if (drawableResId != 0) {
+        visibility = View.VISIBLE
+        setImageResource(drawableResId)
+    } else {
+        visibility = View.GONE
+    }
+}
+
+@BindingAdapter("toolbarIsVisible")
+internal fun View.setVisibility(isVisible: Boolean) {
+    visibility = if (isVisible) View.VISIBLE else View.GONE
+}
+
+@BindingAdapter("toolbarTextAppearance")
+internal fun TextView.setStyle(@StyleRes styleResId: Int) {
+    TextViewCompat.setTextAppearance(this, styleResId)
+}

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

@@ -0,0 +1,23 @@
+package com.trendyol.uicomponents.toolbar
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.LayoutRes
+import androidx.databinding.DataBindingUtil
+import androidx.databinding.ViewDataBinding
+
+internal fun <T : ViewDataBinding> ViewGroup?.inflate(
+    @LayoutRes layoutId: Int,
+    attachToParent: Boolean = true
+): T {
+    if (this?.isInEditMode == true) {
+        View.inflate(context, layoutId, parent as? ViewGroup?)
+    }
+    return DataBindingUtil.inflate(
+        LayoutInflater.from(this!!.context),
+        layoutId,
+        this,
+        attachToParent
+    )
+}

libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/Toolbar.kt

@@ -0,0 +1,89 @@
+package com.trendyol.uicomponents.toolbar
+
+import android.content.Context
+import android.util.AttributeSet
+import androidx.constraintlayout.widget.ConstraintLayout
+import com.trendyol.uicomponents.toolbar.databinding.ViewToolbarBinding
+
+class Toolbar : ConstraintLayout {
+
+    var viewState: ToolbarViewState? = null
+        set(value) {
+            field = value
+            if (field != null) {
+                binding.viewState = viewState
+                binding.executePendingBindings()
+            }
+        }
+
+    var leftImageClickListener: (() -> Unit)? = null
+    var middleImageClickListener: (() -> Unit)? = null
+    var rightImageClickListener: (() -> Unit)? = null
+    var upperLeftTextClickListener: (() -> Unit)? = null
+    var lowerLeftTextClickListener: (() -> Unit)? = null
+    var middleTextClickListener: (() -> Unit)? = null
+    var upperRightTextClickListener: (() -> Unit)? = null
+    var lowerRightTextClickListener: (() -> Unit)? = null
+
+    private val binding: ViewToolbarBinding = inflate(R.layout.view_toolbar)
+
+    constructor(context: Context?) : super(context)
+
+    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
+        readFromAttributes(attrs)
+    }
+
+    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
+        context,
+        attrs,
+        defStyleAttr
+    ) {
+        readFromAttributes(attrs)
+    }
+
+    init {
+        binding.imageLeft.setOnClickListener { leftImageClickListener?.invoke() }
+        binding.imageMiddle.setOnClickListener { middleImageClickListener?.invoke() }
+        binding.imageRight.setOnClickListener { rightImageClickListener?.invoke() }
+        binding.textLeftUp.setOnClickListener { upperLeftTextClickListener?.invoke() }
+        binding.textLeftDown.setOnClickListener { lowerLeftTextClickListener?.invoke() }
+        binding.textMiddle.setOnClickListener { middleTextClickListener?.invoke() }
+        binding.textRightUp.setOnClickListener { upperRightTextClickListener?.invoke() }
+        binding.textRightDown.setOnClickListener { lowerRightTextClickListener?.invoke() }
+    }
+
+    private fun readFromAttributes(attrs: AttributeSet?) {
+        context.theme?.obtainStyledAttributes(
+            attrs,
+            R.styleable.Toolbar,
+            0,
+            0
+        )?.apply {
+            val leftImageDrawableResId =
+                getResourceId(R.styleable.Toolbar_leftImageDrawable, R.drawable.ic_arrow_back)
+            val middleImageDrawableResId = getResourceId(R.styleable.Toolbar_middleImageDrawable, 0)
+            val rightImageDrawableResId = getResourceId(R.styleable.Toolbar_rightImageDrawable, 0)
+
+            val upperLeftText = getString(R.styleable.Toolbar_upperLeftText)
+            val lowerLeftText = getString(R.styleable.Toolbar_lowerLeftText)
+            val middleText = getString(R.styleable.Toolbar_middleText)
+            val upperRightText = getString(R.styleable.Toolbar_upperRightText)
+            val lowerRightText = getString(R.styleable.Toolbar_lowerRightText)
+
+            val toolbarBackground =
+                getResourceId(R.styleable.Toolbar_toolbarBackground, android.R.color.white)
+
+            viewState = ToolbarViewState(
+                upperLeftText = upperLeftText,
+                lowerLeftText = lowerLeftText,
+                middleText = middleText,
+                upperRightText = upperRightText,
+                lowerRightText = lowerRightText,
+                leftImageDrawableResId = leftImageDrawableResId,
+                middleImageDrawableResId = middleImageDrawableResId,
+                rightImageDrawableResId = rightImageDrawableResId,
+                toolbarBackground = toolbarBackground
+            )
+        }
+    }
+}

libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/ToolbarViewState.kt

@@ -0,0 +1,54 @@
+package com.trendyol.uicomponents.toolbar
+
+import android.text.Spanned
+import androidx.annotation.DrawableRes
+import androidx.annotation.StyleRes
+import androidx.core.text.HtmlCompat
+
+data class ToolbarViewState(
+    val upperLeftText: CharSequence? = null,
+    val lowerLeftText: CharSequence? = null,
+    val middleText: CharSequence? = null,
+    val upperRightText: CharSequence? = null,
+    val lowerRightText: CharSequence? = null,
+    @DrawableRes val leftImageDrawableResId: Int = R.drawable.ic_arrow_back,
+    @DrawableRes val middleImageDrawableResId: Int = 0,
+    @DrawableRes val rightImageDrawableResId: Int = 0,
+    @StyleRes val upperLeftTextAppearance: Int = R.style.Trendyol_UIComponents_Toolbar_Text_UpperAction,
+    @StyleRes val lowerLeftTextAppearance: Int = R.style.Trendyol_UIComponents_Toolbar_Text_LowerAction,
+    @StyleRes val middleTextAppearance: Int = R.style.Trendyol_UIComponents_Toolbar_Text_Title,
+    @StyleRes val upperRightTextAppearance: Int = R.style.Trendyol_UIComponents_Toolbar_Text_UpperAction,
+    @StyleRes val lowerRightTextAppearance: Int = R.style.Trendyol_UIComponents_Toolbar_Text_LowerAction,
+    @DrawableRes val toolbarBackground: Int = android.R.color.white
+) {
+
+    fun getUpperLeftText(): Spanned? = upperLeftText?.let {
+        HtmlCompat.fromHtml(it.toString(), HtmlCompat.FROM_HTML_MODE_LEGACY)
+    }
+
+    fun getLowerLeftText(): Spanned? = lowerLeftText?.let {
+        HtmlCompat.fromHtml(it.toString(), HtmlCompat.FROM_HTML_MODE_LEGACY)
+    }
+
+    fun getMiddleText(): Spanned? = middleText?.let {
+        HtmlCompat.fromHtml(it.toString(), HtmlCompat.FROM_HTML_MODE_LEGACY)
+    }
+
+    fun getUpperRightText(): Spanned? = upperRightText?.let {
+        HtmlCompat.fromHtml(it.toString(), HtmlCompat.FROM_HTML_MODE_LEGACY)
+    }
+
+    fun getLowerRightText(): Spanned? = lowerRightText?.let {
+        HtmlCompat.fromHtml(it.toString(), HtmlCompat.FROM_HTML_MODE_LEGACY)
+    }
+
+    fun isUpperLeftTextVisible(): Boolean = upperLeftText != null
+
+    fun isLowerLeftTextVisible(): Boolean = lowerLeftText != null
+
+    fun isMiddleTextVisible(): Boolean = middleText != null
+
+    fun isUpperRightTextVisible(): Boolean = upperRightText != null
+
+    fun isLowerRightTextVisible(): Boolean = lowerRightText != null
+}