Here is the scenario; I have 3 PNG photos i wanna use as background of buttons or ImageViews and they are overlapping in a relative layout. kinda like this:
so the red button will be the biggest and go under all of them, then i will add green button on top of red and then yellow button on top of green. so that's how it looks like. each button has a PNG background as i said at the beginning.
Problem is I cant make the only visible area of each Button/ImageView clickable! Android kinda considers each at rectangle button/ImageView.
Any solution for this?
In your onTouchListener you should check whether the event (MotionEvent) is in the transparent area of the background or not.
Either you can make a separate onTouchListener for each view/button and return false if the event is in the transparent area (of the View argument) or you can make a single listener for all of the buttons, ignore the View argument and check all of your three views to determine in which one the event is.
Related
I was trying to make an area so when ToggleButton is on, you are able to toggle buttons within this area and if ToggleButon is off, you won't be able to toggle the buttons within this area.
For this specific area I used a FrameLayout, so I can stack two LinearLayout on top of each other. So when I hit the Edit-Button, the one on top which is half transparent disappears with setVisibility(View.GONE) and you are now allowed to click the buttons now.
PROBLEM: The buttons in this area are always clickable
I was able to toggle them separately with button.setClickable(true/false) but is there a solution so you just can't click through the LinearLayout that is on top (like "not-through-clickable")?
Link to an image of the Layout: https://i.imgur.com/eTyhCDc.png
Desired behavior:
Hit EDIT -> half transparent Layout on top of blue Layout disappears -> TESTOFF1 and TESTOFF2 are now clickable.
-> Hit DONE -> the half transparent Layout appears on top again and the buttons below it are not clickable anymore (without using .setClickable for every single button).
The view on top gets first crack at any touch events. If the top view doesn't handle the touch then the view below get a chance on down to the bottom view. The top layer is a LinearLayout so, but default, it doesn't handle touches, so it allows the touch events to percolate down to the buttons which are happy to respond.
One way to resolve this is to place a touch listener on the semi-transparent view that just returns true. Thus, the LinearLayout will consume the events and not let the buttons see them.
When the view is gone, the buttons become the top view so they will see the clicks.
If you want to know more about how touch events are handled, read this Stack Overflow answer for an excellent explanation.
editButton.setOnClickListener {
button1.isEnabled = !button1.isEnabled
button2.isEnabled = !button2.isEnabled
editButton.setText(
if (button1.isEnabled) {
R.string.done
} else {
R.string.edit
}
)
transparentView.isInvisible = button1.isEnabled
}
This example is using kotlin and the Android KTX libraries
Java version
editButton.setOnClickListener(new OnClickListener {
button1.setEnabled(!button1.isEnabled());
button2.setEnabled(!button2.isEnabled());
editButton.setText(button1.isEnabled() ? R.string.done : R.string.edit);
transparentView.setVisibility(button1.isEnabled() ? View.INVISIBLE : View.VISIBLE);
});
I have a grid of buttons (using grid layout group). I created this by adding a UI element and duplicating it 9 times (10 buttons) and then just applying a grid layout group to the parent object while all of the buttons were still at 0,0,0. This laid out the buttons exactly as i wanted in the grid shape that i chose. When i run this on PC and click a button, it registers perfectly. When i build it down to an apk and put it on my android, the buttons don't click when you press on them, but rather when you press way off to the right in some empty field space. But the "clickable grid area" as i'll call it, is perfectly transposed into that open field space. So i have my 5x2 visible button elements on the screen. If i touch them, nothing happens. Randomly touch in empty space until one of the buttons activates, and the clickable grid is in the exact shape of the visible elements except not on top of the elements. I'm not 100% familiar with resolution settings yet but i don't think that has all too much to do with this. What am i missing and what settings can i change?
so the problem ended up being that the anchors were not set to center, they were set to top left. This was set automatically by the grid layout group component. Remove grid layout, set positions manually, all is well.
You need to define column and row for each button
So here's the tricky or buggy thing.
I have an activity that displays a mapview (I don't believe this is important at all, but the mapview is from Carto Mobile SDK), and I have a few actions that trigger two fragments to be displayed over the current activity layout.
The first one, takes the whole screen and is fully interactive. There is a Toolbar, a few Spinners and some TextViews.
The second fragment that gets displayed, takes a portion of the screen (almost the lower half), and the elements I included are interactive (3 Image Buttons). However, if I click over a part of that layout that's on the lower half of the screen, that has a white background, is like it's 'invisible' to the touch event.
Let me rephrase it. There's a white box, that if I touch over it and I perform a movement, like if I was moving the map (the mapview behind it, which I can partially see), I can then see the map moving. Even though I'm seeing the white LinearLayout, with 3 Image Buttons in it, if I click somewhere where there isn't any of the Image Buttons, is like the LinearLayout isn't there and the map moves.
I attached a screenshot at the end. The area that I talk about is just on top of the Image Buttons (Route to, Route from and View details).
Can I stop that from happening? Is this due to Carto or is an Android thing?
You don't put any code above so I assume your root view doesn't have click event, only the 3 buttons have.
Add clickable="true" to your white panel's root view to capture all the touch event
Is there any way to make following Layout in Android..? If yes please suggest how to make and how to set clickListener's of overlapping areas of Views...? i.e View 2's area overlaps 1's area and View 3's area overlaps 2'sand 4's area and so on others views overlaps..? If there is any android library to make non-rectangle buttons/Views also suggest.. Thanks.
Here is one way that this may work:
Use a rectangular ImageView for each shape. Make sure each shape is clickable.
Shape images will have a transparent portion where they fit together.
Use FrameLayout or some similar layout that will allow overlapping of Views. You will have to work with how each View overlaps.
Make the transparent portions un-clickable. See this Stack Overflow question and its accepted answer regarding one way to do this. (N.B. I have not tested this.) You should be able to work it so that clicks propagate downward to an underlying ImageView when a transparent region is clicked.
An alternate way would be just to have two views (left and right) and implement a View.OnTouchListener to determine where the click occurs by looking at adjoining pixels: their color and placement.
Good luck!
I have a layout similar to the capture. The green rectangles are placed in horizontal scrollers and when the user touches one, another activity is launched. The blue rectangles are other layers, like the horizontal scrollers.
My problem: when the user touches a green rectangle, I need to know in which RED rectangle the touched green rectangle is placed in.
Is there any easy way to get a particular ancestor of a view? I would like to be able to add and remove more "blue rectangles", so I don't want something like view.getParent().getParent().getParent() .
Thanks!
Two ways,
Simpler one:
Set the red ones as tag to all the child it contains, now when a child receive Touch you can easily figure out who is the parent among red, by getTag method.
Little Complex but cooler:
a. Maintain a list of all the red view
b. Implement on Touch on green one
c. Get the x,y when you receive touch
d. Once you receive Touch, loop through list of red view, getting Hit Rect for each red view, once you get the hit rect, just check if it contains ur received x,y. Once you found match return. Wollah you have your parent view.
Hope it help.