CODEWITHSUNDEEP
androidandroid-layoutandroid-viewandroid-viewholder
bene25
bene25

Reputation: 588

Make transparent part of the view pass over touches and keep touches on a visible part

There is views container (blue) which is set for the almost full width of the screen. Sometimes views which are displayed inside this container require not to have the full width of the container - thus we show only visible part (green) and other part of the view is transparent(area inside container except visible view). At the same time other views (purple) can be placed behind the transparent part of the views container.

The question is - how to make such views clickable through the transparent part of container? At the time visible view (green) should proceed touches with its own manner.

View declaration is done with help of XML not compose.

Upd1: by design visible view (green) should be always on top. Thus purple view is always behind visible view (green) and container

Upd2: in theory its possible to assign correct width to visible view and container, thus X button of the purple view wont be overlapped by transparent part of the container and clickable, but it would be hard to achieve in existing codebase because many views and their sizes should be rewritten

Upd3: purple view is showed by third party app (not by us)

Upd4: the green view is swipable - left&right, so that's why the container is needed

enter image description here

Upvotes: 0

Views: 105

Answers (2)

Martin Marconcini
Martin Marconcini

Reputation: 27246

To Recap:

  • You have a transparent "full-width" container, that inside contains GreenViews.
  • Behind this container, you have 3rd-party PurpleViews (with a X close button).
  • You want to ensure that the purple views can be closed, so as long as they are (or should) be visible given the existing transparency.
  • You also want to make sure that if a user taps your Green Views, that those views receive the events, as they are clickable.

I don't see a "drag-and-drop" solution out of this, considering you have several restrictions in what you can change and not.

One option I can think of, is to add a view inside your container, to intercept the tap and deliver it to the purple view.

                  _____________
[ container  [green][fake view]]
                 |             |
                 |   purple    |
                 |_____________|

So now your "fake" view could simulate and pass the touch to the Purple view.

Another option would be to set a touch interceptor on your container (or above) and decide based on the X/Y of the touch, to which view the event should be dispatched (this may be more work, but again, we don't have your project in front of us, so only you can tell that).

A discarded idea was to restrict the width of the green view, but that was not possible because it would be too much work according to you.

UPDATE Based on Update4: if the green view is swipeable, if you elect to use a fake view, you may need to "resize" it, as you swipe left/right to enlarge/shrink its area. Good luck ;)

Upvotes: 0

Jayesh Suthar
Jayesh Suthar

Reputation: 59

As long as I know, you cannot change whether certain part of the view is clickable and certain is not. Its either full view clickable or not.

In your case, since the container is taking full width it'll be either entirely clickable or not.

Solution to your problem would be:

A: Don't render full width and make the left out part transparent. Since there's no use of the transparent part, just render till the part which is visible(green). This way the purple view will be visible.

B: If you somehow know that your visible view(green) is taking full width, then place a cross icon above the green view, let purple view behind. and set a click listener on the cross icon.

As a reference, take a look at this answer: Pass touches to the view under

Upvotes: -1

Related Questions