I would like to draw an always centered image overlay in MapView in Android, like a targeting reticle
The way that I am going to approach it is to use the onTouchEvent of Overlay and the
MotionEvent.Move to move the location of the overlay around.
Is there a better way of doing this?
You should be able to accomplish this with a RelativeLayout that contains a MapView and an ImageView for your centered image. Here's some sample XML:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.maps.MapView android:id="#+id/google_maps"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="#string/maps_key"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/mapcenter"/>
</RelativeLayout>
This will center your image and cut down on any processing that would otherwise be needed to center/keep the image centered. There is of course other ways to do this with an OverlayItem, let me know if the XML approach doesn't work and I'll post an Overlay Example.
Related
I'm trying to make an interactable imageView by setting some invisible image buttons on top of it, the user can then click different parts of the image and do things with it, the problem is that i need this image buttons to be in very exact positions in relation to the image view, if the phone size varies even a little, the image buttons will get off the positon i want them to be.
The xml where the image view is:
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".fragments.Offroad18nitro4wdbuggy_frontFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="OffRoad 1/8 nitro 4WD buggy front" /> <!-- Here just to show the programmer which fragment is showing -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/ivLosi4_offroad18nitro4wdbuggy_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/losi4_18scale_front"/>
<ImageButton
android:id="#+id/ibTest"
android:layout_width="50dp"
android:layout_height="41dp"
android:alpha="0"
android:background="#color/colorGreen"
android:layout_alignParentEnd="true"
android:layout_marginEnd="40dp"
android:layout_marginTop="5dp"/>
</RelativeLayout>
As you can see in the second screenshot, the image button is out of place, my phone is the Samsung Galaxy S6.
Screenshot of the image button in the exact position i want it to be
Screenshot of the app being emulated to my phone
I've dealt with this exact problem before. The workaround that I managed to accomplish is to divide the screen up into several sub-layouts so it looks like a grid of layouts. First divide the screen in half at the center point, then place an empty textview with no dimensions in the center of the top and bottom layouts, which will allow you to divide those layouts into four. Then do the same thing for those four to create sixteen if you have to. Then place your image buttons along the sides or the attached to the center point of whichever of these layouts contains your desired area.
The point is to create a grid that is fixed relative to the center of the screen. That way, if the screen size changes, the grid and the buttons attached to it will adjust accordingly. Its not a perfect solution but it worked for my purposes. Here is a link to a sample xml file from the project that I used this strategy in:
https://github.com/ribalding/AdventureAdventure/blob/master/app/src/main/res/layout/activity_kitchen.xml
I have two images that are positioned in the same space, effectively overlapping one another.
They are slightly different but identically sized.
I want to be able to crop the top laying image but retain the initial positioning.
So almost like cutting it in half, and keeping the left half in place, which would perfectly overlap the underlaying image.
The following is the code I have, just two ImageView's within a FrameLayout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center_horizontal"
android:layout_width="380dp"
android:layout_height="wrap_content"
android:src="#drawable/level_off">
</ImageView>
<ImageView
android:layout_gravity="center_horizontal"
android:layout_width="190dp"
android:layout_height="wrap_content"
android:src="#drawable/level_on">
</ImageView>
</FrameLayout>
Any ideas? I've done my best to explain what I mean! Thanks!
You could try an programmatic approach by inheriting ImageView and override onDraw(), doing so will also save you an extra layout group.
In onDraw()you have to:
obtain the imageMatrix from your original image
alter the canvas to left/right half of your original size
draw the second image in that altered canvas with the same matrix as the original image
I've done a similar thing and theoretically it should work for your case as well.
I have a textview which has to use a 9-patch drawable as the background. But the 9-patch drawable has left and right paddings which make the background image not stretch properly to cover the whole text. I tried resetting the paddings for the textview itself but it doesn't fix the problem.
Would anyone have any idea how to make it work?
Thanks.
The black lines on the left and top defines the stretchable are, and those on the right and bottom marks the "content" area in a 9-patch image.
So, if you don't want padding means you want a full-length content area. You should mark full-width content area by drawing a full-length line at the bottom and right of the 9patch image.
In this image, the black lines on the right and bottom represent the content area. You can see the preview on the right side, and notice the content area in light blue color. You can fill the content area by extending the bottom and right lines.
Editing 9-patch file is not a good idea, because this method may deform the background image.
I used a trick to handle this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView"
android:layout_alignTop="#+id/textView"
android:background="#drawable/your_9_patch_image"/>
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="a custom text!"/>
</RelativeLayout>
I have set the 9-patch background drawable for a View behind my TextView in a RelativeLayout. So the there is no unwanted padding :)
Theoretically you cant really change the padding of 9 patch image programatically.
So you have two options:
1) Have several 9 patch images in your drawable folder for each resolution: drawable-hdpi, drawable-xhdpi etc
2) Embed a inner layout:
<RelativeLayout
android:background="#drawable/nine_patch_image_without_padding"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_margin="10dp" // Your padding goes here
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="How you doing"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
It worked for me. I use the second options as it is simpler and quicker to use :)
I would like to see an image on top of Camera SurfaceView\preview.
How do I do that? Any examples?
A great example can be found in ZXing library, Barcode Scanner application.
What they do is they use FrameLayout for SurfaceView and their custom ViewfinderView so that both SurfaceView and ViewfinderView are covering full screen:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SurfaceView android:id="#+id/preview_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"/>
<com.google.zxing.client.android.ViewfinderView
android:id="#+id/viewfinder_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent"/>
</FrameLayout>
Note the fill_parent values in layout_height and layout_width for both views.
And then they draw custom things in ViewfinderView.onDraw() method, just on top of what is being displayed by camera preview.
If you don't want to draw anything, but just use predefined image, then use ImageView instead of ViewfinderView. You might consider calling setAlpha method to make your image transparent (if drawable wasn't already transparent by itself).
Here is a screenshot from Barcode Scanner:
I have a 9 patch png in a RelativeLayout and everything looks great! However, when i create a textView in the RL, the textView is not at the top of the parent... I also tested this on the phone, same result... why does it do this?
Thanks for your assistance!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testLL"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/backrepeat"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="15dp"
android:layout_gravity="center_vertical|center_horizontal"
android:background="#drawable/contentbox">
<TextView
android:text="Test"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
</RelativeLayout>
</LinearLayout>
In looking up how 9patches are rendered, it basically turns the non-stretchable areas into default layout padding. This is to facilitate easy entry of stuff into the target (stretchable) area, without having to go in and define paddings manually. By assigning a 9patch, you are using it's padding. It assigns paddings to top left right and bottom based on how many px the 9patch has until it reaches the stretchable center.
You may try doing something like android:paddingTop="-50px" in your textView and see what happens. I haven't tested this, so I'd be interested to see how it turns out.
Edit to your comment with pic: Since your 9patch's top stretchy region doesnt start for about 90 px, its automatically going to pad the first element 90 px down, to place it within the "stretchy target" region. Try my above suggestion to see how it works, I'm pretty interested to see how it turns out. I don't have my IDE accessible from my Mobile, otherwise I'd test it for you ;)
Edit: I apologize, I've been saying "padding" instead of margin. But the theory is the same. Not modifying the above for permanent documentation of my idiocy.