Android, View width change animation? - android

I'm trying to make a timeout gauge bar animation effect:
The width of a lengthy colorful bitmap image is decreasing, but not x-scaling.
so the image looks not changing and the visible area shrinks.
I couldn't find the sole ImageView clipping or masking support in android.
And I managed to get the clipping effect by surrounding the ImageView in ViewGroup like:
<FrameLayout android:id="#+id/shrink_box" ...>
<ImageView android:src="#drawable/still_image" ...>
</FrameLayout>
then changing the shrink_box's width will clip the portion of the still_image.
But I failed to change the width of the view smoothly.
I tried to change the LayoutParam.width in applyTransformation() but got an Exception, it seems not allowed.
How can I make an Animation that changes the width of the view. OR is there a proper method to achieve the above effect?

You are trying to reinvent the wheel here, just use a ProgressBar and set the progress drawable to your image.
In your xml layout give the ProgressBar this style to make it an actual bar rather than a wheel
style="#android:style/Widget.ProgressBar.Horizontal"

Related

Android, XML: Show only portion of image in layout container without altering aspect ratio

I want to set a background to any layout.
Usually, I would go on about this like here:
<LinearLayout
android:orientation="vertical"
android:background="##drawale/somedrawable"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="100dp"/>
But this will always make the background fit the LinearLayout. But what if the layout was smaller in height than the image I set as background? I do NOT want to destroy the image's aspect ratio but just center the image inside the layout and have the height overlap so that it isn't visible anymore.
To clarify:
Left is what happens currently, but right is how I want to to be. Since the layout container is smaller than the imageview or background image is, it is supposed to stay centered but only show what fits without altering the aspect ratio.
Use an ImageView inside the linear layout with width and height match_parent and set the scaleType="centerCrop"
<ImageView
android:src="#drawable/somedrawable"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
you cannot apply the scaletype property in linearlayout its better to use imageview to achieve this following is the link how to use scaleType attribue, to avoid the stratching behaviour use the 9 patch image, follwoing is the link to convert your image into 9patch

How should I override VideoView's onDraw in order for it to have transparent rounded corners?

Clearly using a background shape doesnt work in the case of VideoView
Also, there are lots of articles how to override onDraw for ImageView and make its corners round.
But how do I do it for a VideoView?
Transparent rounded corners cannot be done with a VideoView or any SurfaceView, as according to the documentation:
The surface is Z ordered so that it is behind the window holding its SurfaceView; the SurfaceView punches a hole in its window to allow its surface to be displayed.
With a TextureView it seems theoretically possible, as its supposed to behave like a normal view. However I was unable too: Tried Porter Duff modes of both the TextureView layer paint and a ShapeDrawable in the foreground of the parent FrameLayout.
With a VideoView, what you can do is make corners of a solid color. Use a 9-patch with transparent content and just the corners of a solid color and set in on an ImageView that gets drawn on top.
Edit: Check this example project.
You can easily achieve this effect by putting a TextureView inside a CardView (from the support library).
You can then set corner radius and shadow on the CardView:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="12dp">
<TextureView
android:id="#+id/video"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</androidx.cardview.widget.CardView>
I think there is no easy way to do this. You could try this for example:
place a video window under a ImageView window
populate the ImageView with a solid color PNG that has a transparent shape in it
use a FrameLayout or RelativeLayout to hold the two views as they allow views to overlap each other easily

Set background behind image

I got a picture that I want to use.
I set it as following:
ImageView menu = new ImageView(this);
menu.setLayoutParams(new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT));
menu.setImageResource(R.drawable.menu);
They annoying thing is that I get white pixels on the sides of it cause I want to keep the aspect of the pic.
I can stretch the image by using menu.setScaleType(ScaleType.FIT_XY); but that will make the person on it look really fat. The picture is dark and the pixels are white so they do show quite well. :/
Is there I way I can first apply black color and then the image above that color?
To set a background color to any view on android you can use android:background attribute in layout xml or by calling setBackgroundColor(int id) in java code.
But if you really want just to set the image in bounds you can give a try to android:scaletype="centerCrop"
Using set BackgroundColor will also remove any padding, borders and what not attached to the object.
If that is the result you want, that is a reasonable approach.
If blasting the objects current style will cause problems, I would look to use CSS to set the background color and change the css styles through code if things are happening after page load.
Consider using a border around the image that is colored the way you want to hide what is underneath?

How can I use this background image for all aspect ratio?

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 :)

Trimming ImageView in Android

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.

Categories

Resources