So, I'm trying to make the background to one of my apps look "futuristic." I thought of an idea to make the screen look almost transparent yet have views over it. So, it would look something like this:
(source: rackspacecloud.com)
I'm thinking that I can use the camera to capture the background of the phone (without taking a picture, just having the real time view in the background) and then, if possible, place a semi-transparent slightly blurred ImageView over that. Finally, on top of that I can place the other views including the ImageButtons.
So, my question is how would I go about doing this? I have searched but haven't found anything relevant. It must be possible; its just how to do it? I don't expect you to give me all the code as an answer, just if you have any ideas that can help or links or code that can point me in the right direction, it would be greatly appreciated! Thanks!
It shouldn't be too hard to get started. There are samples located here that show you how to open the camera and draw the preview onto a SurfaceView. Since you want to overlay your other Views on top of the camera preview, just make sure that the SurfaceView that you are using for the camera preview is contained inside a FrameLayout (docs located here). The FrameLayout lets you insert child views and they are z-indexed using the order they are inserted. Therefore, if you insert your SurfaceView and then insert a Button of some kind it will be z-ordered in front of the SurfaceView and you can set its alpha value so that it can be more or less transparent. All that said, you will have to do some trial and error for how you want to position your views that are being rendered in front of the camera preview because a FrameLayout used on different screen sizes might position the Views differently. Also, I'd stay away from layering too many Views on top of one another because the compositor will have to figure out how to render all of it into a single window which could impact performance.
Related
I'm not sure if this is possible, or If I am approaching this challenge wrong. I am making a 2D Platformer, so when you hit the edge of the screen(Width), a new portion of the map would appear. Currently, I made single Images for each Portion of the map. Problem is, on larger devices, this would leave a lot of blank screen, and the Image would only fit a specific device.
Now I am wondering, can I make my ImageView (MAP) at a negative X value then when the character hits the edge, the map would move right (X would go higher).
I am using XML (Java is also fine), and I have NO CLUE how to approach this.
Since you are using constraint layout, you need to set android:layout_width="0dip".
This will fit any image to its screen width.(Image width should be greater than screen horizontal width).
Apply some conditions something like,
If image width < screen width then call next image to remaining screen, else call next image for entire screen.
Hope it helps for code-flow.
:)
You could use android:translationX or Android:translationY which actually support negative values. But in your particular case I think you are trying to use a nail clipper to cut your hair... You are using stuff that are not designed for that purpose. Using multiple big Image views can become a performance issue (I don't know about your particular case), I recommended you instead to be brave and make your own wiew and paint it dynamically (it can sound difficult but I'm sure will be easier than what you are trying), or make a comprehensive googling for a view meant for what you want.
Specifically for games you should try andengine lib or something like that, believe me... It would be easier in the end and you may earn something new :)
An alternative solution is to draw a layout (e.g. RelativeLayout) larger than your screen size, with an equal amount of padding on all sides.
For example, if you want to make a 50dp x 50dp ImageView appear from off the right hand side of the screen, your RelativeLayout would be 100dp taller and wider than your screen (50dp on each side). You could then position your ImageView at the far right of the RelativeLayout, and move it onto the visible area at will. So drawing something at -20dp, would actually be drawing it at 30dp in this example.
Programmatically getting the screen size and resizing a layout is very straightforward, and this approach would let you control your map loading in the manner you described.
I'm developing and Android application, but I have some doubts about the
feasibility of my project.
I have to implement a custom layout composed from a ImageView that show an image, in particular a VectorDrawable.
Overlapping the ImageView there is a SurfaceView that :
Capture every coordinates of the touches;
Draw a Bitmap (in a certain position) everytime I touch the screen.
The purpose is to show a background image and use it as a reference, each time the user touches the screen a marker on SurfaceView must be inserted, this technique allows to simulate the insertion of a marker on an image.
The question is:
There are other better method to do this?
I have implemented yet, the idea works, but I have some limitation about the SurfaView (for example I can't insert it in a ScrollView).
And at last:
Taking into consideration the reasoning made up to now, assuming to have a ImageView that show a VectorDrawable, is it possible create a function that magnify and lessen the image (VectorDrawable)?
p.s. I apologize for having put two questions but the whole is closely related, I thought it was foolish to open two threads
Task 1: Your task is doable using a SurfaceView but I'm assuming that after you draw your image you would want it to stay if that is the case you may have to keep track of each image separately. If your task is just drawing an image you can also override a View which can do the same task but will also provide transparency and basic layout implementations. Difference between View and SurfaceView is performance, SurfaceView is pretty low level with a double buffer and gives you more control. Also if the number of images are small you can override a FrameLayout and spawn ImageView. Its not very efficient but it will be easier to implement.
Task 2: You can scale an ImageView easily by using setScaleX and setScaleY. But this may pixelate the image. Loading a large Bitmap then drawing it on a custom view would be a better way.
Currently I seek a solution to simple situation, which appeares to become tricky. I need 7 togglebuttons in android app, which are a simple black circles, but I need them to be in the row and fill parent (screen) horizontally. As a resource I use big .jpeg image of a circle. To make them fill all screens in the same mode, I put them into LinearLayout with
#android:layout_width = "fill_parent";
#android:layout_height = "wrap_content";
#android:weight="70";
Weight is 70, so each button received 10. The problem is that source image is too big, which unfortunately results in...this:
(because I dont have enough reputation for posting images, here is the link
http://postimg.org/image/f8wvs5si1/ )
Sorry for small amount of code and this picture taken via phone, I do not have an internet access on the computer with eclipse and this project for some time. I tried of course to change layout_height on other possibilites, but it didnt work. I could put a weight sum also on the vertical position, but on different screens it wouldn't look same.
I also tried to change the height programmatically in onCreate method,
buttonX.setHeight(buttonX.getWidth());
or do the same with a layout, but nothing helped
Perhaps the question is dumm, but I would be glad to hear some ideas.
This is due to screen density variations. There are several things you can do to fix this:
Use different images for each density (but I'm assuming you're looking for another solution)
Use DisplayMetrics to get the actual width of the screen and then set width/height accordingly.
This code:
buttonX.setHeight(buttonX.getWidth());
probably doesn't work because you are calling it before the layout is drawn, and therefore the width is not the drawn width. You can fix this using ViewTreeObserver like here:
How can you tell when a layout has been drawn?
Use an XML attribute like scaleType="centerFit" Personally, I find these confusing because scaleType attributes don't always seem to behave the same way to me. You might have to try different ones, but sometimes they come in handy if you need an XML only solution.
So without a screenshot you guys won't know what I'm talking about.. So here we go:
This particular part of my application I need to do an overlay over the camera interface as seen in the screenshot. 2 rectangles - And when you take the picture, I want to end up with 2 images, the cuttings taken from the 2 rectangles.
If this doesn't make sense, please comment and ask for clarification. I honestly don't even know where to begin with this one. What would be a good starting point? Is this even possible?
I guess you will have to create your own Custom Camera:
http://developer.android.com/guide/topics/media/camera.html#custom-camera
where you can implement your own preview layout - thus you can put those frames over camera preview as you wish
but it won't be easy as many of devices exists with many different camera resolutions, some work only in landscape, even though their native interface is portrait, it's a fake landscape; and also aligning those frames with the picture you'll be actually getting will be a challenge; but definitely this is Custom Camera - good luck
i am trying to do the folowing: set up a large image (larger than the screen or zoomed in at some point) and by swiping left or right to be able to focus the users view to a specific part on the image(pan and zoom to that point). similar to the map view when you center on some location (or zoom to). any pointers for how i can achieve this?
i saw the zoom and swipe examples JohnNick has provided and went to search further and i found these 2 tutorials for creating scroll and zoom on an image
link Long-press and Scroll Large Images Using Low Level Events
link Large Image Scrolling Using Low Level Touch Events
but i still need a way to swipe to a specific part of an image. but now i have a dillema. as i read on there seem to be some issues with outOfMemoryException when working with large bitmaps, so my problem is: is it better to make the swipes as changing small bitmaps like the view transition example or is there a way to maybe only render the visible part of the image or something like that or maybe a map-like functionality ( dividing the image in ex. 8 parts and showing only the ones visible)?
Click Here Example for Image Zoom and Pan
Click Here Example for Image swiping