Selector to resize views

Question

Let's say I want to give the user the ability to resize a view by presenting a white rectangle with dots in the corners which he can drag around. The resizing itself is pretty easy but my problem is the rectangle.

If I place it exactly at the edges of the view then one-quarter of the dots will be cut off. By adding some margin or padding to the target two view next to each other will be pushed away from each other... Also, according to the material design guidelines, a touch target should be 48dp but my dots shouldn't fill that whole space.

So how should I do this? Is all of this possible with a selector or do you need a helper view for this? Also, how would something like this work in a Recaclerview where I can resize items?

Answer 1

If I understood your question correctly.

In your xml file where the dots are add this to a view that is a parent for the dots:

<ParentViewWhatever
    android:clipChildren="false"
    android:clipToPadding="false">

    <DotView ... />

    <DotView ... />

    <DotView ... />

</ParentViewWhatEver>

or in code:

parentViewWhatever.clipChildren = false
parentViewWhatever.clipToPadding = false

This way your dots won't be cut off.

Answer 2

I would suggest first having an operation that "enables" this feature (eg. getting focus, a long-press, or a menu item), then use a ViewOverlay to draw on top of the view the user is editing. The overlay can be as simple or complex as desired and will site on top of the view being edited.

Once the editing is finished (perhaps by losing focus, another log press, or via a menu item), just hide/remove the view overlay.

You should be able to create a general purpose View to display your rectangles etc and use it on multiple controls if desired.

By adopting this approach you don't make your app "messy" all the time, and you give clear UI signals to the user.