Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI updates for ButtonWidget #4594

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

UI updates for ButtonWidget #4594

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
62c4dc2
Changed layout of ButtonWidget
PizzaMarinara Aug 26, 2024
ce5a9fb
Added customizable color to ButtonWidget icon
PizzaMarinara Aug 26, 2024
619b846
Fixed ktlint issue
PizzaMarinara Aug 26, 2024
9b2ade0
Uniformed padding for the ButtonWidget component
PizzaMarinara Aug 27, 2024
fd55790
Validated the icon color text and fixed layout for different widget s…
PizzaMarinara Aug 27, 2024
816b8c6
Minor layout fixes
PizzaMarinara Aug 27, 2024
07fb974
More UI fixes
PizzaMarinara Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions app/src/main/java/io/homeassistant/companion/android/widgets/button/ButtonWidget.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,14 @@ class ButtonWidget : AppWidgetProvider() {
internal const val EXTRA_ACTION_DATA = "EXTRA_SERVICE_DATA"
internal const val EXTRA_LABEL = "EXTRA_LABEL"
internal const val EXTRA_ICON_NAME = "EXTRA_ICON_NAME"
internal const val EXTRA_ICON_COLOR = "EXTRA_ICON_COLOR"
internal const val EXTRA_BACKGROUND_TYPE = "EXTRA_BACKGROUND_TYPE"
internal const val EXTRA_TEXT_COLOR = "EXTRA_TEXT_COLOR"
internal const val EXTRA_REQUIRE_AUTHENTICATION = "EXTRA_REQUIRE_AUTHENTICATION"

// Vector icon rendering resolution fallback (if we can't infer via AppWidgetManager for some reason)
private const val DEFAULT_MAX_ICON_SIZE = 512
private const val SMALL_MAX_ICON_SIZE = 80
}

@Inject
Expand Down Expand Up @@ -202,6 +204,9 @@ class ButtonWidget : AppWidgetProvider() {
val icon = DrawableCompat.wrap(iconDrawable)
if (widget?.backgroundType == WidgetBackgroundType.TRANSPARENT) {
setInt(R.id.widgetImageButton, "setColorFilter", textColor)
setInt(R.id.widgetImageButton, "setBackgroundColor", Color.TRANSPARENT)
} else {
setInt(R.id.widgetImageButton, "setColorFilter", Color.TRANSPARENT)
}

// Determine reasonable dimensions for drawing vector icon as a bitmap
Expand All @@ -210,11 +215,11 @@ class ButtonWidget : AppWidgetProvider() {
val maxWidth = (
awo?.getInt(AppWidgetManager.OPTION_APPWIDGET_MAX_WIDTH, DEFAULT_MAX_ICON_SIZE)
?: DEFAULT_MAX_ICON_SIZE
).coerceAtLeast(16)
).coerceAtLeast(16).coerceAtMost(SMALL_MAX_ICON_SIZE)
val maxHeight = (
awo?.getInt(AppWidgetManager.OPTION_APPWIDGET_MAX_HEIGHT, DEFAULT_MAX_ICON_SIZE)
?: DEFAULT_MAX_ICON_SIZE
).coerceAtLeast(16)
).coerceAtLeast(16).coerceAtMost(SMALL_MAX_ICON_SIZE)
val width: Int
val height: Int
if (maxWidth > maxHeight) {
Expand All @@ -228,6 +233,10 @@ class ButtonWidget : AppWidgetProvider() {
// Render the icon into the Button's ImageView
setImageViewBitmap(R.id.widgetImageButton, icon.toBitmap(width, height))

widget?.iconColor?.let {
setCustomColorToIcon(it, this)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will overwrite the color set to the icon in line 204/206, which is fine if you have set a custom color but when using the transparent theme it might create a mismatch (black icon on a colored circle with white text, while the option says it'll color text + icon, and it just looks odd).
Transparent widget: blue circle with black icon, and white text below

}

setOnClickPendingIntent(
R.id.widgetImageButtonLayout,
PendingIntent.getBroadcast(
Expand Down Expand Up @@ -363,6 +372,7 @@ class ButtonWidget : AppWidgetProvider() {
val label: String? = extras.getString(EXTRA_LABEL)
val requireAuthentication: Boolean = extras.getBoolean(EXTRA_REQUIRE_AUTHENTICATION)
val icon: String = extras.getString(EXTRA_ICON_NAME) ?: "mdi:flash"
val iconColor: String? = extras.getString(EXTRA_ICON_COLOR)
val backgroundType = BundleCompat.getSerializable(extras, EXTRA_BACKGROUND_TYPE, WidgetBackgroundType::class.java)
?: WidgetBackgroundType.DAYNIGHT
val textColor: String? = extras.getString(EXTRA_TEXT_COLOR)
Expand All @@ -383,7 +393,7 @@ class ButtonWidget : AppWidgetProvider() {
"label: " + label
)

val widget = ButtonWidgetEntity(appWidgetId, serverId, icon, domain, action, actionData, label, backgroundType, textColor, requireAuthentication)
val widget = ButtonWidgetEntity(appWidgetId, serverId, icon, domain, action, actionData, label, iconColor, backgroundType, textColor, requireAuthentication)
buttonWidgetDao.add(widget)

// It is the responsibility of the configuration activity to update the app widget
Expand All @@ -393,4 +403,14 @@ class ButtonWidget : AppWidgetProvider() {
onUpdate(context, AppWidgetManager.getInstance(context), intArrayOf(appWidgetId))
}
}

private fun setCustomColorToIcon(colorString: String, remoteViews: RemoteViews) {
val validColor = try {
Color.parseColor(colorString)
} catch (e: Exception) {
null
}
remoteViews.setInt(R.id.widgetImageButton, "setColorFilter", validColor ?: Color.TRANSPARENT)
remoteViews.setInt(R.id.widgetImageButtonBackground, "setColorFilter", validColor ?: Color.TRANSPARENT)
}
}
20 changes: 20 additions & 0 deletions ...n/java/io/homeassistant/companion/android/widgets/button/ButtonWidgetConfigureActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import android.app.PendingIntent
import android.appwidget.AppWidgetManager
import android.content.ComponentName
import android.content.Intent
import android.graphics.Color
import android.graphics.PorterDuff
import android.graphics.PorterDuffColorFilter
import android.os.Build
Expand Down Expand Up @@ -239,6 +240,7 @@ class ButtonWidgetConfigureActivity : BaseWidgetConfigureActivity() {
val actionText = "${buttonWidget.domain}.${buttonWidget.service}"
binding.widgetTextConfigService.setText(actionText)
binding.label.setText(buttonWidget.label)
binding.iconColor.setText(buttonWidget.iconColor)

binding.backgroundType.setSelection(
when {
Expand Down Expand Up @@ -436,6 +438,7 @@ class ButtonWidgetConfigureActivity : BaseWidgetConfigureActivity() {
val actions = actions[selectedServerId].orEmpty()
val domain = actions[actionText]?.domain ?: actionText.split(".", limit = 2)[0]
val action = actions[actionText]?.action ?: actionText.split(".", limit = 2)[1]
val iconColorText = validateIconColorText(binding.iconColor.text.toString())
intent.putExtra(
ButtonWidget.EXTRA_DOMAIN,
domain
Expand All @@ -444,6 +447,10 @@ class ButtonWidgetConfigureActivity : BaseWidgetConfigureActivity() {
ButtonWidget.EXTRA_ACTION,
action
)
intent.putExtra(
ButtonWidget.EXTRA_ICON_COLOR,
iconColorText
)

// Fetch and send label and icon
intent.putExtra(
Expand Down Expand Up @@ -507,4 +514,17 @@ class ButtonWidgetConfigureActivity : BaseWidgetConfigureActivity() {
showAddWidgetError()
}
}

private fun validateIconColorText(input: String): String {
return if (input.isEmpty()) {
input
} else {
try {
Color.parseColor(input)
input
} catch (e: Exception) {
""
}
}
}
}
5 changes: 5 additions & 0 deletions app/src/main/res/drawable/rounded_image_background.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorDynamicWidgetPrimary" />
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved
<corners android:radius="250dp" />
</shape>
47 changes: 26 additions & 21 deletions app/src/main/res/layout/widget_button.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,58 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/widgetLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="40dp"
android:minWidth="40dp"
android:background="@drawable/widget_button_background"
android:padding="4dp">
android:padding="8dp">

<LinearLayout
<RelativeLayout
android:id="@+id/widgetImageButtonLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingVertical="4dp"
android:layout_height="wrap_content"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The size change will create visual problems with longer labels and/or smaller widget sizes:
Widget with text overlapping icon
(default size, and this label isn't even that long)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has not been resolved. It may be less obvious now, but text is cut off (note the bottom of the g/p), and especially for users with larger font sizes configured this will happen quite easily.
image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I figured the issue is now caused by the text's size rather than its layout overlapping the above icon. I can reproduce it only if I manually set my font size in the phone's setting to the maximum, otherwise it looks good to me. Is that the case here as well?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, this is on the default text and display size for me (Pixel 7a; text size 2/7, display size 2/5).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please see this review comment.

android:orientation="vertical">

<ImageView
android:id="@+id/widgetImageButtonBackground"
android:layout_width="40dp"
android:layout_height="40dp"
android:importantForAccessibility="no"
android:translationZ="-2dp"
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved
android:alpha="0.4"
android:src="@drawable/rounded_image_background"/>

<ImageButton
android:id="@+id/widgetImageButton"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="@drawable/ic_flash_on_24dp"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@android:color/transparent"
android:contentDescription="@string/widget_button_image_description"
android:gravity="center"
android:tint="?colorWidgetPrimary"
tools:ignore="UseAppTint" />
android:src="@drawable/ic_flash_on_24dp"/>

<LinearLayout
android:id="@+id/widgetLabelLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp">
android:layout_alignParentBottom="true"
android:layout_below="@id/widgetImageButtonBackground"
android:gravity="bottom">

<TextView
android:id="@+id/widgetLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:maxLines="2"
android:minLines="1"
android:text="@string/widget_label_placeholder_text_button"
android:textSize="12sp"
android:textAlignment="center"
android:gravity="center"
android:textAlignment="textStart"
android:textColor="?colorWidgetOnBackground"
android:minLines="1"
android:maxLines="2" />
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

<ProgressBar
android:id="@+id/widgetProgressBar"
Expand Down
21 changes: 21 additions & 0 deletions app/src/main/res/layout/widget_button_configure.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,27 @@

</androidx.constraintlayout.widget.ConstraintLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:text="@string/label_icon_color" />

<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/icon_color"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/widget_text_hint_icon_color"
android:inputType="text" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
Expand Down
Loading