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

Jump to bottom

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 4 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
19 changes: 16 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,13 @@ class ButtonWidget : AppWidgetProvider() {
// Render the icon into the Button's ImageView
setImageViewBitmap(R.id.widgetImageButton, icon.toBitmap(width, height))

widget?.iconColor?.let {
if (it.isNotBlank()) {
setInt(R.id.widgetImageButton, "setColorFilter", Color.parseColor(it))
setInt(R.id.widgetImageButtonBackground, "setColorFilter", Color.parseColor(it))
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved
}
}

setOnClickPendingIntent(
R.id.widgetImageButtonLayout,
PendingIntent.getBroadcast(
Expand Down Expand Up @@ -363,6 +375,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 +396,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 Down
5 changes: 5 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 @@ -239,6 +239,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 @@ -454,6 +455,10 @@ class ButtonWidgetConfigureActivity : BaseWidgetConfigureActivity() {
ButtonWidget.EXTRA_ICON_NAME,
binding.widgetConfigIconSelector.tag as String
)
intent.putExtra(
ButtonWidget.EXTRA_ICON_COLOR,
binding.iconColor.text.toString()
)
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved

// Analyze and send action data
val actionDataMap = HashMap<String, Any>()
Expand Down
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>
40 changes: 21 additions & 19 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,55 @@
<?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:translationZ="-2dp"
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved
android:alpha="0.4"
android:contentDescription="@string/widget_button_image_description"
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved
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">

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

<ProgressBar
android:id="@+id/widgetProgressBar"
Expand Down
22 changes: 22 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 @@ -117,6 +117,28 @@
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:imeOptions="actionDone"
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved
android:inputType="text" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:orientation="horizontal">
jpelgrom marked this conversation as resolved.
Show resolved Hide resolved

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
Expand Down
Loading