I'm developing an app that shows a camera preview on a SurfaceView but I only want to show the top half of the preview.
Is there a way of cropping/clipping the view or will I have to resort to obscuring the bottom half with something like an image,other view or drawing?
regards
Simon
I am currently using this method to do the cropping (basically using the clip child ability of an absolute layout to clip a surfaceview child)
<AbsoluteLayout android:clipChildren="true" android:layout_alignParentRight="true" android:layout_width="240dp" android:id="#+id/absoluteLayout1" android:layout_height="80dp">
<SurfaceView android:id="#+id/swSurfaceView" android:layout_width="240dp" android:layout_height="160dp" android:visibility="visible"></SurfaceView>
</AbsoluteLayout>
Overlaying the SurfaceView with another view is the easiest way to do it... however, it's quite ugly if you ask me.
Why don't just set the SurfaceView height manually? Make it take the 50% of the screen space and it will do what you want. You don't provide code so we'll have to do some guesses: let's suppose you have a LinearLayout, then inside it you put two views: your surface view and another kind of view. Then, you set their height to be 0dip, and their weight to be 1... that should do it.
Related
Now I know how to make the translateAnimation, in order to go through the picture, and show it on the screen.
What I do not know how to do, is put the picture on the screen, and make it in such a way so that it will not scale it by the scale type. So I can start the translateAnimation.
I saw some posts about this, and a lot of suggestions are saying I should use a HorrizontalScrollView, in order to put a picture bigger than the device screen. But I need to make a animation go thought it, and not for me to be able to move the picture, so in my opinion that might not be the perfect way to go.
Do you guys have any other suggestions?
Did not use a horrizontalScrollView, instead, forced the width of the whole layout to be the size of a picture, set a RelativeLayout inside, with the size of the screen, and then made the animations.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="1103dp"
android:layout_height="736dp"
android:background="#color/white">
<ImageView
android:id="#+id/background"
android:visibility="invisible"
android:src="#drawable/story1"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/screen_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
-----------------CODE inside relative layout for normal page--------
</RelativeLayout>
</RelativeLayout>
Then inside my code I set the screen width and height for my screen container (containing everything except the background picture which will translate):
screenContainer.setLayoutParams(new RelativeLayout.LayoutParams(Math.round(Constants.screenWidth), Math.round(Constants.screenHeight)));
This is my Translation for the ImageView that matches the parent (the size of the background pic):
TranslateAnimation translateBackground = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_PARENT,from,
TranslateAnimation.RELATIVE_TO_PARENT,-0.5f,
TranslateAnimation.RELATIVE_TO_PARENT,0.0f,
TranslateAnimation.RELATIVE_TO_PARENT,0.0f);
translateBackground.setDuration(15000);
background.setVisibility(View.VISIBLE);
background.startAnimation(translateBackground);
I have an image like this used as background in a RelativeLayout:
This image is used as background for all the levels of my game. Every level is drawn onto the blue area.
I want to keep fixed the aspect-ratio of the blue area, changing the size of the red edges to avoid to show to the user unused pixels of their screen. The green area must be fixed to 80dp for all phones. Then I must add a View (a GLSurfaceView) in my layout in such a way that it fit perfectly the blue area. Thus all levels of my Android game will be perfectly the same in all Android device.
How can I solve this problem?
The real image that I use is a little more complex. You can look it here:
Real image
I would use a FrameLayout for the middle part of the screen(blue), add an ImageView, containing the BackgroundImage you want to display, and put the GLSurfaceView on top of it.
Since the aspect ratio is always the same, you could set the ImageViews sclaing to fit xy and the image should always look the same.
Lets assume you are using a simple SurfaceView, the xml code id use to put a ImageView begind it would look like this
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<SurfaceView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
As i dont know how you build your View i cant post the code that does the job, but just add a FrameLayout instead of your GLSurfaceView to your View, with the Same Dimensions, the GLSurfaceView would have.
To that FrameLayout first add the ImageView, then the GLSurfaceView. Both with height and width set to match_parent.
To Figure out the size of your SurfaceView...
Retrieve Display Dimensions
Substract Green Bar Dimensions
Calculate the size of the Blue View, get the Height/Width (whatever is bigger) calculate the missing Dimension
Set the Red Views to Occupie the empty space.
So you would have to do this programmatically :)
I am creating a Camera application where I want to restrict the camera preview to be centered and around 60% of total size of the phone screen.
One way is to have the FrameLayout of Preview with padding so that the usable screen size is restricted , but I also want to show borders (around the corners) inside the restricted area which is not possible in this options.Also it not possible to show padding in percentage so that I can restrict user to 60% of screen size.
Other way is to have a image having a transparent center rectangular area and having border in inner rectangle corners . But I somehow need to restrict the FrameLayout of preview inside this rectangle which I am not able to do . Any suggestions on this option ?
Please also let me know if there are any other options .
Thanks.
Unless I don't fully understand your issues with using android:padding to provide space around your layout, you should be able to use android:layout_margin instead to accomplish the same goal but overcome the problems you mentioned. Adding padding creates space between the border of the View and its content. However, adding margin creates space between the border of the View and its parent, so the content still fills the View itself to the edges. However, you still can't define your view spacing in terms of percentage direct from XML...you would need to define the margin as static or apply the LayoutParams in Java code where you could calculate the required margin based on the current screen size.
Another option is to take advantage of the android:layout_weight property inside of a nested LinearLayout. The calculated weight sum could give you the 60% you're looking for directly in XML. Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:weightSum="1.0" >
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:gravity="center"
android:weightSum="1.0">
<SurfaceView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6" />
</LinearLayout>
</LinearLayout>
Where the SurfaceView is the location of your Camera Preview, now centered with 20% of the screen on all sides. If you wanted to place things over or under this preview you would obviously want to place this entire block into a RelativeLayout or FrameLayout along with other components.
HTH!
I have an image which is 450px square below some text in a linear layout and wanted it to fill the width of the device, which I done by using;
ImageView android:id="#+id/my_image_container"
android:src="#drawable/my_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:scaleType="fitStart"
This has worked in a fashion, but the ImageView element fills the rest of the screen and any elements placed under do not show.
Does anyone know of a way to trim the bottom of the space that the ImageView uses.
Hopefully this image can explain it better - I want to crop the empty area under the image (orange background).
I recommend you to use a RelativeLayout instead of a LinearLayout. You can then use android:layout_above="" and android:layout_below="" to ensure that you get the layout you want.
I have surfaceView class that is modeled after this, I populated it with 6 bitmaps. Is there a way to wrap the surfaceView around the bitmaps, instead of it covering the entire screen.
I have try this in my xml file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<com.android.customclasses.Panel
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</com.android.customclasses.Panel>
</LinearLayout>
but this does not work. it just fill the parent.
Thanks.
I don't think that SurfaceView has a notion of "wrap_content" (other than perhaps interpreting it to mean "fill_parent"). You would have to override onMeasure in your custom class Panel and call setMeasuredDimension with the appropriate size.
If you think about this it makes sense: your bitmaps are not inside the SurfaceView in the view hierarchy. They are simply being drawn by graphics commands to a SurfaceView which has a predetermined size.