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.
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
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
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 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.
I made a Grid View with 6 columns and 60 rows. Where I can add, move and erase images. But I'm having trouble to set the distance between columns (I don't want any space between columns). Since it will change deppending on screen size. I set it up for my phone, then tried it at a friends phone and there where like 10dp between columns. Heres the xml for the GridView EDIT: and if I try it in a smaller phone the images where to big to fit the cell.
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/image_grid_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:numColumns="#integer/num_columns"
android:stretchMode="columnWidth" />
Heres the java code for the layout
ImageCell v = null;
if (convertView == null) {
v = new ImageCell (mContext);
v.setLayoutParams(new GridView.LayoutParams(80, 80));
v.setScaleType(ImageView.ScaleType.CENTER_CROP );
} else {
v = (ImageCell) convertView;
}
I tried changing that v.setLayoutParams... to
v.setLayoutParams(new GridView.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT ));
and
v.setLayoutParams(new GridView.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
But those two maked the GridView unable to use. If anyone have any idea of what am I doing wrong please tell me, if someone needs something else also ask for it (I can't post screenshots)
I had a similar problem, and i used another approach with getDisplayMetrics.
DisplayMetrics metrics = this.getResources().getDisplayMetrics();
int screenWidth = metrics.widthPixels;
And divide between number of columns.
v.setLayoutParams(new GridView.LayoutParams(screenWidth/2, screenWidth/2));
v.setPadding(8, 8, 8, 8);
It's not so elegant, but its easy. :-)
The problem is that you are hardcoding the width and height for your cells.
This makes the cells 80 pixel wide on all phones. If the phone has a bigger resolution (the real pixels get smaller) your view will be smaller. If you really want to create the whole view in Java and not in xml at least load the dimension for your cells from a ressource file. This will enable you to save the value in density independent pixel and have the phone adjust the value to something that matches the actual screen resolution.
Read the supporting multiple screens sections in the documentation for more insight into this.
In addition to Janusz's comment, you may need to set your stretchMode to none so that Android would not stretch anythings automatically. Further, if you don't need to have any spacing between columns, then set horizontalSpacing to 0. You may end up with this XML:
<GridView
...
android:stretchMode="none"
android:horizontalSpacing="0dp"
</GridView>
See
http://developer.android.com/guide/practices/screens_support.html
If your graphics are too big on small phones use additional drawable directories like drawable-mdpi or sth.
Also u should try android:stretchMode="none" in your gridview (xml).