I would like to fill the screen with a rotated ImageView. The question of how to fill the screen with an ImageView and how to rotate an ImageView has been answered seperately mutlipe times on the site. My XML code looks as follows.
<ImageView
android:id="#+id/video_frame"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:rotation="270"
/>
The problem is that the rotation happens after the image has been fitted with no rotation applied and I end up with an image that does not fill the screen.
I could of course just rotate the images (and remove the ImageView rotation) as follows:
Matrix mMatrix = new Matrix();
mMatrix.postRotate(-90);
ImageView video = (ImageView)findViewById(R.id.video_frame);
Bitmap frame = BitmapFactory.decodeFile("path/to/file.jpg");
Bitmap frame2 = Bitmap.createBitmap(frame, 0, 0, frame.getWidth(), frame.getHeight(), mMatrix, true);
video.setImageBitmap(frame2);
Here the problem is that the application is realtime and I am serving multipe frames per second (20+). The rotation per frame seems to be quite heavy and even if in this case the images fill the screen, the result is lagging and not as responsive as without the matrix rotation.
My question would therefore be if I could solve this issue with XML only or in any other way without rotating every image I want to display?
You can use RotateLayout and put your ImageView in RotateLayout and pass your rotation in setAngle() method of RotateLayout, So It rotates only view not Image or we can say bitmap it's much faster than any other rotation of Images.
you can add its dependency in Gradle file.
Usage
In your layout file add
<com.github.rongi.rotate_layout.layout.RotateLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:angle="90"> <!-- Specify rotate angle here -->
<YourLayoutHere
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</YourLayoutHere>
</com.github.rongi.rotate_layout.layout.RotateLayout>
Voila! Your layout will be rotated 90 degrees.
Download
compile 'rongi.rotate-layout:rotate-layout:3.0.0'
Features
Handles all touch events in a correct way. You press the same button you touch!
Layout measures itself in a correct way. This means that if the original view is 50x100, then 90 degrees rotated it will measure itself as 100x50 and can fit in another layout with this dimensions.
RotateLayout Link
Related
I've searched this up many times, but couldn't find an answer which worked for me. So basically, my issue is that I get an image from a backend provider and should display it in the ImageView with an opacity gradient of 100% at the bottom and 0% at the top so the image behind it slowly shows up. Applying a transparent gradient overlay doesn't work since the pixels to be transparent are the actual image I get from the backend service. Any help or ideas would be appreciated! The UI is in XML not Compose
This is the xml for the view I want to add an opacity gradient to. The image comes as a bitmap variable I assign to it's background currently:
<ImageView
android:id="#+id/bottom_container_background"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_container_height"
android:adjustViewBounds="true"
android:alpha="0.7"
android:src="#drawable/cardview_gradient_shape"
app:layout_constraintBottom_toBottomOf="#+id/iv_epg"
app:layout_constraintEnd_toEndOf="#+id/iv_epg"
app:layout_constraintStart_toStartOf="#+id/iv_epg"
tools:src="#drawable/cardview_gradient_shape" />
val croppedBlurredThumbnail = BitmapDrawable(thumbnailBottomBackgroundBlurred)
cardLayout.bottom_container_background.background = croppedBlurredThumbnail
Im working on an android app were you can setup your own Ring.
Now I want to give the user a preview of the ring, when they selected multiple rings.
Here a preview of how it should look like
The setup of how i thought to make it is this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp">
<ImageView
android:id="#+id/generator_ring_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e7e7e7"/>
<FrameLayout
android:id="#+id/generator_ring_addon_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</FrameLayout>
I'm going to add the addon rings programmatically by just creating a new ImageView in the code.
Now the hard part of this is to place the image over the other ring, and have the view the same on every screen size..
Is ther anybody who can help me getting the correct code for placing the image on the correct position on every screen size?
thanks for reading
EDIT:
the moment I am selecting the addons rings the Base Rings is already visible, so I can get the height of the image
User Paint API: https://developer.android.com/reference/android/graphics/Paint.html
https://developer.android.com/reference/android/graphics/Canvas.html
Like that you can add whatever pictures you want, programatically, move them, even create animations if you want.
Also you will have just a view, which contains the canvas. So no need to have convoluted FrameLayouts into FrameLayouts.
Example on how to draw images on a canvas.
draw object/image on canvas
Using canvas you can get (x,y) coordinates of the ring.
First create canvas with ring image and than use canvas.draw() to draw another image on base image.
I have a drawable that is located inside my res folder, name being cute1.
So the current plan is to use the drawable to put inside an ImageView, and using the ImageView to replace all the bounding boxes in an image.
So let's say that image has 4-5 bounding boxes, as example here, I want to replace the bounding boxes with the ImageView, but from what I know, an ImageView itself can only be used once, I can't keep using the same ImageView to replace all the bounding boxes because it will keep replacing the old one with the new one.
I've already found the bounding boxes coordinate (x, y, width, height).
The thing is, how am I suppose to approach it by replacing over it?
I've already done the following
ImageView test = (ImageView)findViewById(R.id.cute1);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) test.getLayoutParams();
params.topMargin = x;
params.leftMargin = y;
params.width = width;
params.height = height;
test.setLayoutParams(params);
and the ImageView appears, but apparently it is very dynamic, the imageview always appear NEAR to the bounding boxes coordinate, but never at the right coordinate replacing them, why is that so?
As below is the XML File
<RelativeLayout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:id="#+id/cute1"
android:adjustViewBounds="true"
android:maxWidth="120dp"
android:maxHeight="150dp"
android:layout_marginBottom="120dp"
android:src="#drawable/cute1"
android:layout_marginTop="0dp"
android:layout_marginLeft="0dp" />
</RelativeLayout>
So I've 2 questions:
1) How do I solve so that the ImageView can actually fit nicely inside the bounding box and replace it?
2) How can i use the same drawable to replace multiple bounding boxes at the same time?
Really appreciate some help here, thank you. :)
I just learned about TextView.setCompoundDrawables() and I'm using it in a ListView to place an image to the left of my text. The problem is that the thumbnail images are different sizes, so the text wanders all over the place. Is there a simple way to get the text to line up nicely on the left-hand side?
Code:
TextView machineText = (TextView) v
.findViewById(android.R.id.text1);
machineText.setCompoundDrawablesWithIntrinsicBounds(thumbnail,
null, null, null);
Screenshot:
You can play around with setCompoundDrawablePadding (int pad) to dynamically changed the padding between the drawable and the text. What you should really do though is write your own ListAdapter and layout each image and text in a custom listitem layout. Would be much easier. My experience is that bitmap compoundDrawables can look a lot different on different devices.
Imageview / ImageButton are the only views I am familiar with that give you scaling control.
If you put the pics in imageviews and the textviews to the right, you will get the same effect with more control. You can then scale the images. ScaleType = fitxy will ensure the image is drawn to both xy borders. The downside is the images may appear stretched, if they don't fit naturally. But there's other scaletypes you can play with too.
<ImageView
android:id="#+id/my_iv"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/overflow"
/>
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_toRightOf="#id/my_iv"
/>
I haven't used the TextView + drawable option, but you can also try ensuring that the images are the same size intrinsically. I'm not sure how android chooses the drawable size when part of the textview, so i'm not sure if that will work.
try this:
TextView machineText = (TextView) v.findViewById(android.R.id.text1);
thumbnail.setBounds(60, 60, 60, 60);
machineText.setCompoundDrawables(bd, null, null, null);
instead of 60 set the bounds as you need it.
I am trying to make a small image appear on my screen. I want it to be a small square. With the below code, it shows up as a long flat rectangle. I have attached a picture of what it looks like below.
java code
ImageView q1Image = (ImageView)findViewById(R.id.q1Image);
q1Image.setScaleType(ScaleType.FIT_XY);
xml code
<TableRow
android:id="#+id/row4"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/q1Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_weight=".1"
android:textSize="8sp"
android:gravity="center_horizontal" />
EDIT
If I make the width and height equal to 50dp each, the image gets bigger but is still a flat looking rectangle.
Your scaling the Image wrong. Here are all scaletypes:
Top row (l-r) center, centerCrop, centerInside.
Bottom row (l-r): fitCenter, fitStart, fitEnd, fitXY.
You probably need fitCenter:
q1Image.setScaleType(ScaleType.FIT_CENTER);
FIT_XY will stretch your image to fit all yout ImageView.
Use scale type fitCenter to preserve aspect ratio by placing the image in center if your ImageView
q1Image.setScaleType(ScaleType.FIT_CENTER);
Refer to http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
For other options.
Without the full layout XML this is just speculation, but seeing as you don't appear to have fixed the problem by changing the scale type, here are some other suggestions:
Wouldn't it be better if the layout_weight of the ImageView was zero?
Are you specifying android:stretchColumns on the TableLayout?
The image looks like it is being stretched to match the width of the text below. How many columns have you got in your table? It looks like the text in the other rows is in column 0 (as is the image in your first row) and the text in the first row is in column 1. If you want to leave column zero blank for the other rows, you need to specify android:layout_column on the text views.