[ShapeableImageView] contentPadding not working when set via Kotlin #2063

seth-gravy · 2021-02-11T21:22:06Z

Description:
When setting contentPadding on a ShapeableImageView in code (Kotlin or Java), it does not work as expected. Setting app:contentPadding via XML works fine.

Expected behavior:
Both elements should match and be like the top element.

Source code:

MainActivity.kt

package com.example.bug

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.TypedValue
import com.google.android.material.imageview.ShapeableImageView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val px = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            8f,
            resources.displayMetrics
        ).toInt()

        findViewById<ShapeableImageView>(R.id.kotlin)?.setContentPadding(px, px, px, px)
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/xml"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/black"
        app:contentPadding="8dp"
        app:layout_constraintBottom_toTopOf="@id/kotlin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/CircleImageView"
        app:srcCompat="@color/teal_700" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/kotlin"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/black"
        app:shapeAppearanceOverlay="@style/CircleImageView"
        app:srcCompat="@color/teal_700"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/xml"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CircleImageView">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>
</resources>

Android API version: 30

Material Library version: 1.3.0

Device: Pixel 3 and others

The text was updated successfully, but these errors were encountered:

seth-gravy · 2021-02-11T21:32:31Z

Likely related to #1871
CC: @drewhamilton @wcshi

drewhamilton · 2021-02-12T15:29:00Z

Ouch, yep I can reproduce this. ShapeableImageView's onMeasure override is causing this if setContentPadding is called before the view is measured and its layout direction is resolved.

For now you can work around it by only calling setContentPadding after the view is measured and its layout direction is resolved. I'm seeing the expected behavior by wrapping the call in a post:

val imageView = findViewById<ShapeableImageView>(R.id.kotlin)
imageView.post { imageView.setContentPadding(px, px, px, px) }

seth-gravy · 2021-02-15T19:14:16Z

Thank you for that solution; it works in simple cases but doesn't work in cases where I need to set both contentPadding and padding. For now I just have two buttons stacked and I show/hide them as the various padding values are needed.

rs-shivani-gupta · 2021-06-30T11:35:39Z

I'm also facing same issue when i use content padding via code (kotlin/java), it adds padding around the background as well. Any update on this? I need to use content padding along with padding for stroke which actually cuts the edges of view.
@drewhamilton

drewhamilton · 2021-06-30T14:24:21Z

@rs-shivani-gupta Does the workaround posted above not work for you?

I think I can fix this actually, gonna take me a bit to write all the test cases though.

rs-shivani-gupta · 2021-07-01T06:49:53Z

@drewhamilton that worked for me, hoping that this would not break something else.

J-Swift · 2022-03-03T20:14:50Z

I think I'm running into this. I see your PR is still on hold @drewhamilton, any idea why?

drewhamilton · 2022-03-03T20:29:40Z

@J-Swift Sorry, I took a long hiatus and changed jobs. My PR needs tests and to address any other review comments which I don't remember the details of.

Life is busy right now so I don't know when I'll get to it – if you want to take a stab at it I wouldn't mind.

J-Swift · 2022-03-04T00:58:03Z

@drewhamilton no worries, I have no expectations on it. I dont have the bandwidth for it either honestly, I can mostly work around it for now. Appreciate you taking the time to put in the PR and document things here.

Context: a270ebd Context: 1bbe79d Context: material-components/material-components-android#2063 Reviewing a GC dump of the device tests, I noticed a `System.Action` keeping the `ImageButton` alive: Microsoft.Maui.Controls.ImageButton System.Action Java.Lang.Thread.RunnableImplementor So next, I looked for `System.Action` and found the path on the `ReferencedTypes` tab: System.Action Microsoft.Maui.Platform.ImageButtonExtensions.[]c__DisplayClass4_0 Google.Android.Material.ImageView.ShapeableImageView Microsoft.Maui.Controls.ImageButton Which led me to the code: public static async void UpdatePadding(this ShapeableImageView platformButton, IImageButton imageButton) { platformButton.SetContentPadding(imageButton); platformButton.Post(() => { platformButton.SetContentPadding(imageButton); }); platformButton.SetContentPadding(imageButton); } ?!? Why is this code calling `SetContentPadding` three times? Reviewing the commit history: * a270ebd * 1bbe79d * material-components/material-components-android#2063 I could comment out the code and the leak is solved, but I found I could also change the code to use `await Task.Yield()` for the same result.

* [ios] fix memory leak in `ImageButton` Context: #18365 Adding a parameter to the test: [Theory("Handler Does Not Leak")] [InlineData(typeof(ImageButton))] public async Task HandlerDoesNotLeak(Type type) Shows a memory leak in `ImageButton`, caused by the cycle * `ImageButtonHandler` -> * `UIButton` events like `TouchUpInside` -> * `ImageButtonHandler` I could solve this problem by creating a `ImageButtonProxy` class -- the same pattern I've used in other PRs to avoid cycles. This makes an intermediate type to handle the events and breaks the cycle. Still thinking if the analyzer could have caught this, issue filed at: jonathanpeppers/memory-analyzers#12 * [android] fix memory leak in `ImageButton` Context: a270ebd Context: 1bbe79d Context: material-components/material-components-android#2063 Reviewing a GC dump of the device tests, I noticed a `System.Action` keeping the `ImageButton` alive: Microsoft.Maui.Controls.ImageButton System.Action Java.Lang.Thread.RunnableImplementor So next, I looked for `System.Action` and found the path on the `ReferencedTypes` tab: System.Action Microsoft.Maui.Platform.ImageButtonExtensions.[]c__DisplayClass4_0 Google.Android.Material.ImageView.ShapeableImageView Microsoft.Maui.Controls.ImageButton Which led me to the code: public static async void UpdatePadding(this ShapeableImageView platformButton, IImageButton imageButton) { platformButton.SetContentPadding(imageButton); platformButton.Post(() => { platformButton.SetContentPadding(imageButton); }); platformButton.SetContentPadding(imageButton); } ?!? Why is this code calling `SetContentPadding` three times? Reviewing the commit history: * a270ebd * 1bbe79d * material-components/material-components-android#2063 I could comment out the code and the leak is solved, but I found I could also change the code to use `await Task.Yield()` for the same result.

seth-gravy added the bug label Feb 11, 2021

drewhamilton linked a pull request Jul 1, 2021 that will close this issue

[ShapeableImageView] Fix padding bugs #2280

Open

3 tasks

drchen added the Widget: ImageView label Nov 3, 2021

drchen added Feature: Shape and removed Widget: ImageView labels Feb 18, 2022

J-Swift mentioned this issue Mar 4, 2022

Implement Padding property in ImageButtonHandler dotnet/maui#4665

Merged

2 tasks

jpmcosta linked a pull request Mar 21, 2022 that will close this issue

[Image View] Fix multiple contentPadding issues #2609

Draft

deniss-mc mentioned this issue May 9, 2022

Fix on hold operatorstatusview salemove/android-sdk-widgets#278

Merged

jonathanpeppers mentioned this issue Nov 9, 2023

[ios] fix memory leak in ImageButton dotnet/maui#18602

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ShapeableImageView] contentPadding not working when set via Kotlin #2063

[ShapeableImageView] contentPadding not working when set via Kotlin #2063

seth-gravy commented Feb 11, 2021

seth-gravy commented Feb 11, 2021

drewhamilton commented Feb 12, 2021

seth-gravy commented Feb 15, 2021

rs-shivani-gupta commented Jun 30, 2021 •

edited

Loading

drewhamilton commented Jun 30, 2021

rs-shivani-gupta commented Jul 1, 2021

J-Swift commented Mar 3, 2022

drewhamilton commented Mar 3, 2022

J-Swift commented Mar 4, 2022

[ShapeableImageView] contentPadding not working when set via Kotlin #2063

[ShapeableImageView] contentPadding not working when set via Kotlin #2063

Comments

seth-gravy commented Feb 11, 2021

seth-gravy commented Feb 11, 2021

drewhamilton commented Feb 12, 2021

seth-gravy commented Feb 15, 2021

rs-shivani-gupta commented Jun 30, 2021 • edited Loading

drewhamilton commented Jun 30, 2021

rs-shivani-gupta commented Jul 1, 2021

J-Swift commented Mar 3, 2022

drewhamilton commented Mar 3, 2022

J-Swift commented Mar 4, 2022

rs-shivani-gupta commented Jun 30, 2021 •

edited

Loading