Im trying to add 3 imageview with text, but i have problems with the image.
there coming some emty space under and over the image, so the image is been like a square.
And i have problem to change the other image and text.
It is like a layer around the image.
Like this:
This is my code.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/tuna" />
Set adjustViewBounds to true and mess around with the scale types.
This is happening because of your image file. It consists of transparent pixels.
you can either remove those using photoshop if you are adding images manually. or if you are getting that image from the server you try below answer to remove it via code. remove transparent pixels from bitmap
try to adjust the width and height of the image file using photo editor (ex. Adobe photoshop)
Related
In my application I am importing and displaying many images. To set img uri I am using Img.setImageUri(R.mipmap.myimage) But the result is making image croped in device determined way for example on my phone i have square app icons and layout looks like this
so it's square shaped and on emulator which has circular icons it looks like this
so it's in shape of circle
What i want is to resize images to fit image views
Images are stored as uri in database so i NEED to get result based on that.
my xml for it
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
android:layout_height="120dp"
android:id="#+id/foodlay"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardElevation="10dp"
app:cardCornerRadius="20dp"
android:layout_width="120dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:id="#+id/imago"
android:background="#null"
/>
</androidx.cardview.widget.CardView>
In code i just use Img.setImageUri(cursor.getString(6)) in adapter
i suggest to you use ShapeableImageView instead of this way, however if you want use your solution replace this
android:scaleType="centerCrop"
property instead of centerInside
Hello I'm trying to resize images to the size of the card view but some images fit properly and some of them don't I want that all the images fit into the card view properly
I have used all scale type but the best I found is center crop but still after using it some images doesn't fit properly
here is the XML code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:layout_marginStart="1dp"
android:layout_marginTop="11dp"
android:layout_marginEnd="1dp"
app:cardCornerRadius="13dp"
app:cardElevation="1dp"
app:cardMaxElevation="4dp">
<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/todo"
android:scaleType="centerCrop"
app:shapeAppearanceOverlay="#style/RoundedCorner" />
</com.google.android.material.card.MaterialCardView>
</RelativeLayout>
Inside card view use:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/todo"
android:scaleType="centerCrop"
app:shapeAppearanceOverlay="#style/RoundedCorner" />
I dont think there's a built-in way to accomplish this.
Also "fit" suggests your target ImageView and the image you want to display on it, have the same width to height ratio. Otherwise, while you can "fit" it, the image will be squished or stretched in one dimension.
Once you confirm that, you can use one of the many image processing libraries to do this.
Popular ones are
Glide
Picasso
Coil
Both Glide and Picasso have very similar APIs, so if you pick one and later want to change to the other, it is very easy.
Checkout the FitCenter transformation for Glide. I think that's what you're looking for, however remember that if your widt to height ratio doesn't match, the image will look weird.
If you want Picasso instead, check this answer.
I'm trying to put an image header at the top of the constraintlayout but when i run the app in a real device it is wrong and the header is not in the top:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="207dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_header" />
</androidx.constraintlayout.widget.ConstraintLayout>
below we can see how looks it in a real device:
There is a space between the action bar and the header.
I tried to remove the action bar but also does not work.
Thanks in advance.
This is my content of ic_header:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="360dp"
android:height="180dp"
android:viewportWidth="360"
android:viewportHeight="180">
<path
android:pathData="M0,0h360v180h-360z"
android:fillColor="#fbc711"/>
</vector>
I think the issue is with the src drawable and the ImageView both having a fixed height.
Try using android:scaleType="centerCrop" in your ImageView xml, so that the source image expands to cover the empty area.
I tried running your code and found out that given constraints are right but your SVG isn't scaling to the total length for your ImageView. You can see the view bounds below
Solution:
You can consider adding this line.
android:scaleType="fitXY"
The result will be like the following image.
and the alternate solution is you can also use shape drawable if all you need is a solid layout.
And if you drawable isn't a solid color and some complex vector image. try not to resize your image view.
keep
android:layout_height="wrap_content"
This is ridiculous, no error, I already did the same on some other projects and works fine but it still shows nothing...
Someone knows why my background image is fine in the editor (in the Android Studio editor it shows the background image), but when I run the app on my device, it shows the only white background with just my 2 buttons...
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ale.mediaspectrumplayer.MainActivity"
android:background="#drawable/background">
<Button
android:id="#+id/ID_MediaPlayer_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="24dp"
android:text="#string/main_MediaPlayer"
app:layout_constraintBottom_toTopOf="#+id/ID_SpectrumView_Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/ID_SpectrumView_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:text="#string/main_SpectrumView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Neither with code it works and I dunno why (layout.setBackgroundResource(R.drawable.background), and neither with image view and scale fitXY...that's absurd
Sometimes, if the image you are using to set as background is of high resolution or is heavy, system just avoids loading it to save the memory. In case you want that image in the background of the whole content, you have to set an image view whose height and width matches that of the parent layout. Then use an image loading library eg : Picasso, Glide etc to efficiently load the high resolution image in that ImageView without burdening the system
Have you tried using the android:scaleType attribute? This can change the position of the background image to cover the screen, sometimes if the image is too small it won't show up. Setting scaleType to center or centerCrop might help.
Here's the documentation: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
try Changing parent layout to RelativeLayout or any other layout.
I've got a linear layout with layout_height set to wrap_content, so that the layout height is depending of the number of text lines in it.
The problem (that has driven me crazy all morning) is that I want to set an image as background of the layout, but to be sure the image can be used whatever the layout size, I've made the image quite big in height. The goal is for the image to be cropped in height if the layout is small. But I can't manage to do that: whatever I try, the layout is resizing according to the image height.
So, how can I set an image as background of something, but cropping itself so that it doesn't reisze parent layout (of course, I don't know the parent layout size because it depends on the text inside).
As english is not my first language, hope my question is clear...
Thank you in advance.
Edit: some code sample and screenshots:
This is the original card, without the image in background.
This is the code with the image view added:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout
... and the result is my card is stretched to the height of my image. But I don't want that. I want the card the same size. But I cannot reduce image height, because, the card can have more text and be more tall, and so my image will have to be taller.
This is code for a Linear Layout that will be in center and adapt the size of text inside.
I have tested it .
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvInfo"
android:textColor="#ffffff"
android:background="#drawable/toast_frame"
android:gravity="center" />
</LinearLayout>
Give it a try it should work. Here I am using an Image that is small enough to fit the smallest size. Android will automatically strech it. I use 9patch Images for such cases. To know more about 9patch visit this Link from developer.android.com
Simple online tool to generate 9patch
Also check this SO Answer
I have uploded toast_frame.9.png file here so that you can test it with the code I have given above
**EDIT **
change
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
to
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/drill_background_img">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
I hope this will work.
I don't think you can crop the image when using it as "background" attribute for any view.
Image will always be stretched to fill the whole background. Normally for background you should use Nine Patches. Get familiar with it and maybe you can change your functionality or UI spec to use them instead of normal images.
The only way I know of cropping the image is in the ImageView and it's image set by "src", not "background".
I would generally avoid using fixed size images in the components that can change size. You also have to remember that in Android almost everything change size when you think about different orientations, screen sizes, screen densities.
I think that background is always resized to fit container size. But you can use FrameLayout or RelativeLayout and ImageView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
...your content here...
</LinearLayout>
</RelativeLayout>