We Keep Coding

clickable areas over an image in android studio (java)

I've inherited an Android Studio project with a challenging goal. Basically, the idea is that the app displays an image which is the map of a building (museum). When a user clicks on a room, the app displays the name of that room, and then they have some other options to do things. This works fine as long as we design the app for use one a single device and don't ever plan to use it on anything else, which of course is silly. I have been able to get the map image to be responsive to different size screens just fine. The problem I have is with the buttons, which were drawn over portions of the map during design.
I have used ConstraintLayout, but it isn't doing what I need. For one, the buttons don't really move the way I would expect. For example, when I run the app on a tablet, the image resizes fine, but the buttons are all clustered in one quadrant; they didn't really move with the image resize the way I expected.
The second issue is the button size. Even if the buttons did move when on a larger screen (let's just assume they did), the buttons themselves don't resize. I have tried WRAP_CONTENT, but then it sizes it larger than I want it even in design. Setting it to 0dp just makes a 1 pixel button (not sure why). Is there some way to get the button size to grow in proportion to the image growth when responding to different screen sizes? In other words, in the layout design, I want to be able to specify the button dimensions so that they cover the exact portion of the map image I want, but then when the image grows, I want the button to grow a proportional amount, so that it mostly stays lined up with the room to which it corresponds.
I have read about using an overlay image with colored areas as a workaround, but this won't be practical in some room images where there will be in excess of 20 clickable areas.
I hope that explanation is clear enough. Thanks in advance for any help.
The buttons (there are many of them) are defined in the layout like this:
<Button
android:id="#+id/LateGothicHallBtn"
android:layout_width="46dp"
android:layout_height="102dp"
android:layout_marginEnd="80dp"
android:layout_marginBottom="221dp"
android:background="#00FFFFFF"
app:layout_constraintBottom_toBottomOf="#+id/FirstFloorMap"
app:layout_constraintEnd_toEndOf="#+id/FirstFloorMap" />
And then there is a listener for when the button is clicked:
Button LateGothicHallBtn = findViewById(R.id.LateGothicHallBtn);
LateGothicHallBtn.setOnClickListener(this);
If you need it the ImageView code is this:
<ImageView
android:id="#+id/FirstFloorMap"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:contentDescription="#string/first_floor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/gui2" />
Is that what you need?

In your position, I would advise you to look at libraries that have the functionality you need, for example, AndroidImageMap. If necessary, you can download them, insert them into your project as a module and change the code. Also check these questions, I think it will make it clearer: clickable area of image, How to make certain areas in an image clickable in android

That's not that hard to achieve, you need to override onMeasure in the parent ViewGroup that has the image in the background, and knowing its original size you get the scale to the new dimension you wanna fit then you multiply all coordinates by it: the background image and all buttons l,t,r,b in a similar way AbsoluteLayout works
I myself also prefer to override onDraw and onTouchEvent and draw/click the buttons in the same component, but you can make it work with the android.Button
I can provide more help if you add your code

Android: Horizontal Image Gridview/Scroll?

Have any of you tried out any Horizontal Scrolls/Gridviews to display Images similar to the Facebook mobile image viewer that allows the user to scroll images horizontal one after the other. The android gallery is another example.
I tried to implement this using THIS tutorial but I didn't get the desired output. Any other codes and layouts you guys have tried?
EDITED:
What I basically want is to implement a horizontal scrolling of images as seen on THIS image. As you can see the gridview displays image one after the other. That tutorial caused some errors therefore I didn't continue with it.
I tried the following layout
XML Layout:
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
</android.support.v4.view.ViewPager>

You can do something like that with Viewpager:
Multiple pages at the same time on a ViewPager
As for horizontal scroll in GridView here're some links:
https://github.com/jess-anders/two-way-gridview
https://stackoverflow.com/a/5537327
https://stackoverflow.com/a/15919257

Android buttons placement

I have a button and I am testing on a Samsung galaxy S3 the screen size according to android is normal now when I test it on the emulator with the normal screen size the buttons are placed in a different location and If I fix one the other get messed up or vice-versa
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lefteyeoff"
android:background="#null"
android:layout_marginLeft="230dp"
android:layout_marginTop="100dp"/>

Every gadget has its own resolution. When you are developing an app, you must consider that not everyone will have the same resolution as you might expect. Now that is yours to judge: Are you willing to support them all?
You seem to be stuck because your components position is relative one to another. There are two ways of positioning visual components in your activity: relative or absolute.
As I said before, knowing that nobody uses the same gadget with the same resolution, almost everybody uses relative positioning, because it allows for flexibility. This means that say your button A will be positioned in the top left corner, and the button B will be positioned to the right of button A. So if you move Button A, button B will follow. This seems to be your case right now. This is fine, if you know what you are doing.
Now there's also absolute positioning, which doesn't bother if things fit in the page or not, it displays them where you tell them to be. This might come in handy here and there, but I wouldn't even bother using this if you consider publishing the app.
Also, you can choose which device/resolution you are developing on through eclipse, and testing on through AVD, if both are set to the same device, you shouldn't have any troubles.

have you declared multiple layouts for different screen sizes multiple screen layouts in android ? add a screen shot of your project layout directories so the issue could be understood more clearly and which layout you are using?

2D scrolling View for Images and Buttons (on smaller screens)

How can you create larger views than the screen real-estate in Android?
I am trying to recreate a view from my iOS project in Android. The view consists of a first column of static images and then a 20x13 grid of buttons (yes that's 260 in total!) which will generate another activity when clicked:
Each button throws out an integer and there is a daily background image change.
The problem for phones is screen real-estate. Fitting everything on one screen makes the buttons too small to touch properly. In the iPhone app I created bigger buttons set offscreen within a ScrollView that the user could then scroll to. To my knowledge Android does not do a 2d version of ScrollView. I have tried to use gridview dynamically, for example:
However, the dynamic buttons generated need to go VERTICALLY, they are too small to press on smaller screens AND it only scrolls in one direction.
I have also been thinking about 14 Vertical Linear/RelativeLayouts but again I am limited to screen dimensions which will make the buttons too small.

I did implement code from this link which works perfectly well. You create a custom scrollView and then insert it within your XML file:
<RelativeLayout
android:id="#+id/scene_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawingCacheQuality="low"
android:orientation="horizontal" >
<com.example.yourappname.TwoDScrollView
android:id="#+id/scene_scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawingCacheQuality="low" >
</com.example.yourappname.TwoDScrollView>
</RelativeLayout>
You can then put your items in a layout and be sure to sort the width/height parameters to what you need - match_parent will fix your layout to the screen.

Android. How to make dialog buttons appear a bit outside the dialog

I need to have a dialog (it's a game dialog) where buttons are at the lower corners of the dialog. Not inside the dialog but rather on the very corners (i.e. part of the button will reside over the dialog and the part will be outside of it).

First, as far as I know you can't move layout children outside their parent.
I've never tried exactly what you're going for, but I think it can be done. The trick would be to go with an activity with a dialog theme (you can find examples of these on the developer site or the API demos). Make sure your layout's root node has width and height set to wrap_content. Your root layout should be a RelativeLayout and have NO background (android:background="#0000").
Next, add another layout to your root node (FrameLayout would probably work) with a custom drawable for a background (or use the one that the default dialog uses from the framework) and width and height set to fill_parent or match_parent. Set android:padding to some dip value which pulls the background in from the edge of the dialog.
The only thing left to do would be to add your other layout elements to the root node. The FrameLayout will be drawn beneath everything else, and the padding will create the illusion of borders which do not encompass your UI.
Update
Yikes, just tried the above with good and bad results. First, you'll definitely want to look at the "Custom Dialog" example from the API demo, which makes use of:
CustomDialogActivity.java
layout/custom_dialog_activity.xml
xml/styles.xml
drawable/filled_box
Create an activity which uses the above xml layout file, and set the style for the activity to Theme.CustomDialog that you defined in xml/styles.xml. This will get you a red background for your activity. You can then edit the filled_box shape file to just have one background attribute set to invisible ("#0000"). The result should be an dialog-shaped activity with no background.
Next I tried to hack a background using my thoughts from above. The idea should be that there's a phony background drawn behind the other UI elements which does not encompass them, so it could be "shrunk" using layout_margin and not affect them. The problem here is that the phony background needs to have width and height set to relative to the other UI elements, so it sort of HAS to encompass them, so it can properly measure its own width and height relative to them.
So I think the solution could be to do most of what I've said above, except don't try the phony background thing. Just use a 9-patch drawable for your root layout background, and shrink the edges of your background to be drawn farther in than your content. You'd still use the custom theme stuff from above with an invisible window theme.

Here is a sample layout which i tried:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:orientation="vertical"
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_frame">
</FrameLayout>
<Button android:layout_width="wrap_content"
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:layout_centerHorizontal="true"
android:text="Button"></Button>
</RelativeLayout>
here is the screenshot:
hope u get the hint , goodluck