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
Related
I have a case where have to dynamically change width of a button placed alongside another button in a horizontal linear layout. Button width change depend upon certain condition.
I have already tried many of solutions posted at stackoverflow, but the animation is never smooth. Lags on low-end devices. Some time the text within button seems to be sliding in which I don't want.
Here is what I want to achieve, pls see here how smoothly button width changes in google messages just want to achieve same animation.
Just for reference i've already top voted solutions here, for example Resizing layouts programmatically (as animation)
I have created an overlay menu that is a rectangle.
It displays on top of everything else while active. All other apps, the home screen, etc.
If you click anywhere outside of this rectangle your click hits
whatever is visible.
If you click the red part it allows you to drag the menu around the
screen. Clicking the green part performs some function.
I have created this rectangle from inflating layout xml. The rectangle itself is a relativeLayout and the green and red parts are both imageView children.
Since I'm unable to move the relativeView off screen and since the background needs to be clickable my only solution was to calculate margins and apply them to the relative view to imitate the desired effect.
However, the code to calculate these margins is almost 50 lines and fairly complex and hard to understand at a glance if someone else needs to refactor. I can post the code but I don't believe it's relevant to the actual problem's context.
Is there a much simpler way to do this that I'm missing? Is my approach wrong?
I hope this simple project may help you Android Floating Widget
I am designing my activity screen using eclipse but whenever I move an object e.g. a button it snaps around and I find it hard to position things where i want them.
Is there some setting I can change as as soon as I add a second button it snaps the other button to another position it is so annoying!
Also if I have an image button why can't i resize this, even with a normal button if i try to make it larger it just fits to the text and wont make the button bigger or it just flicks to a random place on the activity?
thanks
Probably you're trying to place components freely in the View but you're not considering the LayoutManager behavior. If you try to position your component in a LinearLayout, for example, the components will be placed following its rules, and these components will not stay where you drop them.
Try to understand better how the layouts works on Android. But for now, the AbsoluteLayout or RelativeLayout may be what you're looking for.
About the components size, you'll need to understand better how to use layout properties for these components. See the question How to size buttons for more information.
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?
I'm a beginner Android developer and I'm making my first app. I'd like to make a simple view that is overlayed on the map with a semi-transparent background. This is what it would hopefully look like:
As you can see, one of these dialogs/windows has a simple integer displayed and the other will have a rendered graph/chart.
What would be the best way to go about making this? A dialog? The problem with that might be that I would for the user to be able to work with the mapview below while this is displayed. And I'm not sure if a simple transparent rectangular canvas is the right way to get this done.
Any suggestions/ideas would be much appreciated. Thanks so much.
two ways to go
-Make it a FrameLayout so add MapFragment first then add a Linearlayout with orientation horizontal and make gravity top and translucent background,so it will be displayed on top of map, and it will also involve the elements inside,
-Instead of FrameLayout make it a RelativeLayout and the same process as above.
-Make the overlay as seperate Activity(which is the worst case scenario)
Sample code for overlay can be like this
<LinearLayout
....
android:divider=".." // some drawable or color whatever you want
android:showDividers="middle"
android:orientation="horizontal"
android:background="a000">
<TextView
....
android:value="58"/>
<com.example.custom.view
..../>
</LinearLayout>
I think you can use a RelativeLayout on the top of the MapFragment, with a black background and some opacity (for that you can use a drawable).
Then, on the RelativeLayout you can add other controls like TextView and ImageView
I don't recommand you to use a Dialog, since it sounds like it's not corresponding to your needs.