I'm using something like that to present my logo or user profile picture:
<ImageView
android:id="#+id/logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/circle_bg"
android:src="#drawable/account_circle_grey"
android:layout_gravity="center_horizontal" />
#drawable/circle_bg:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#color/colorWhiteOpacity"/>
<size
android:width="100dp"
android:height="100dp"/>
</shape>
and #drawable/account_circle_grey is just an image I took from MaterialUI(the black 192x192) and used Final-Android-Resizer.
The problem is that I get something like that:
Basically the problem is that when the user clicks and pick a picture, I use glide to load the picture to replace the default #drawable/account_circle_gray but as you can see the padding is gone:
The picture takes the full space, as it should!, what I wanted to add is padding="5dp" and that will give a bit of padding between the background and the Glide loaded user picture, the problem is that there is already a weird padding to #drawable/account_circle_grey, I noticed however that not all drawables get the padding, when I chosen an old picture I used as a full page background I didn't get the padding, maybe I can force android to pick bigger picture, why do I get this padding?
Edit:
To clerify I used this tutorial to try all possible(scaleType+adjustViewBounds) values but nothing worked.
This is likely happening when you're using images that are physically smaller than the size of your ImageView. You can scale the image to fill the space or use a larger image. A mix of both is likely the best solution.
To achieve the former of the two, try this:
<ImageView
android:id="#+id/logo"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/circle_bg"
android:src="#drawable/account_circle_grey"
android:layout_gravity="center_horizontal"
android:scaleType="fitXY"
android:padding="5dp" />
Notice that I reduced the width and height by 2x the padding. That is because adding padding to a view increases the entire view's size by the size of the padding. In this particular case we're adding 5dp to the left, to the right, to the top, and to the left. This means we must subtract left and right from the width, and top and bottom from the height.
set the scaleType of your ImageView to centerFit or you can add only high dpi drawable to your drawables
thanks for the answers, the problem was so obvious but I made it complicated, although I used many "account_circle" images, what I didn't think was that they all comes with a transparent padding, so if the image is 192x192 for instance it's actual size is about 182x182 with 5px transparent padding on each side, anyway the simple solution is to open it on photoshop, go to Image>Trim and that's it.
Related
I want to blur the text of a TextView, but the text is cut off left and right.
Image of the cut off text
I tried to increase padding, margin. Changed gravity, Enabled/disabled font padding. Set a fixed height, lowered font size etc. All to the same result: The sides were cut off.
The setting of the mask filter is just two lines:
textView.paint.maskFilter = BlurMaskFilter(radius, BlurMaskFilter.Blur.NORMAL)
textView.postInvalidate()
This is how my XML layout looks like:
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="-1dp"
android:includeFontPadding="false"
android:layerType="software"
android:textSize="48sp"
tools:textColor="#color/solid_white"
tools:text="132" />
I'm looking for a solution to see the text fully without cutoffs on the edges.
Remove this attribute from your <TextView> tag:
android:layerType="software"
Hardware acceleration is required for views to draw outside of their bounds. Note that padding doesn't help here because view contents are clipped by padding as well.
After attempting a ton of alternatives, using a LeadingMarginSpan.Standard(margin) to offset the text did the trick. I overrode the class and added the blur mask there rather than using a MaskFilterSpan.
I am working on an App which shows images (by capturing using camera or choose from gallery) in some activity. The problem I am facing is showing images of different sizes. The actual size of image is very big even those which are captured by camera of same phone are large in size. So if I show them in an ImageView the get stretched.
I have seen in some apps like Facebook, when image is displayed in Full Screen mode, it maintains the aspect ratio I guess. The whole image, whatever its size may be, is shown in the screen but it doesn't get stretched. The image automatically adjusts its height and width as per the need. How to achieve the same functionality?
How to make ImageView which would be able to adjust its height and width (maximum already defined) as per the need.
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="matrix"
android:src="#drawable/defaultimage"
android:padding="10dp" />
You need a different android:scaleType in your layout. The ImageView.ScaleType documentation lists the different ones that are available. It sounds like you probably want to change matrix to fitCenter in your example.
Alright, this seems like it can be a very confusing question but I'm going to try anyway.
I am developing an application right now, and the only thing that you should know is that there are two drawables in this application.
Both drawables have the same exact width. There is a background drawable that obviously goes in the background of the XML. And then theres an ImageView of a simple line. This line is a drawable aswell.
On some devices/emulators, the line is not the full width of its resolution. Despite the fact that both drawables have the same exact width. And both are viewed in the same portrait mode.
Is there any fix to this? Basically this line moves upwards and represents something important, but I can't have it be a different size than the background. I really don't fully understand why the background with a width of 600, and a line with a width of 600 isn't the same size on some devices. Despite putting both drawables in the Drawable folder, and not one for the different resolutions. I currently do not have any screenshots, I will make some if need be, but I hope someone knows why this problem is bugging me and if I am doing something wrong. Can I perhaps tell the application that its resolution must be 800x600, so that all devices that are capable of showing that many pixels, will do so? If this is possible, how do I do this? I hope someone is able to help
a newbie out :)
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:gravity="top"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-60dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:src="#drawable/line" />
</RelativeLayout>
Try setting the scaleType of the imageview to fitXY.
android:scaleType="fitXY"
I have an ImageView and I want to to scale CENTER_CROP. If I set the image src and scale type in XML it works great. But I need to set the image in code. The following fails to scale correctly. Instead of center cropping it stretches the image to fill the width.
imageView.setBackgroundResource(R.drawable.my_image);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
I tried reordering these lines and I tried leaving out the setScaleType and leaving that to the XML. Neither helps.
setBackgroundResource sets imageView's background so it is normal behaviour that stretches...
Use setImageResource instead, it will set imageview's source so it will follow your scaleType definition.
and not forget that your ImageView must be NOT:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
but ONLY:
android:layout_width="match_parent"
android:layout_height="match_parent"
for proper transformation
How can I prevent my bitmap from being scaled automatically in an ImageView or ImageButton if the view or button is stretched using "fill_parent" or using "weight"?
This will be useful, for example, to create a 4-button toolbar at the top of the screen where the buttons are equally spaced, but the images inside the buttons keep getting streched even if I use scaleType="center", which should prevent scaling according to the doc, but it doesn't.
Any insight is appreciated!
Thanks,
I have found that when using android:background automatically scales the image you are using there to the size of the View.
I tried using the android:src to put the image in the view. The image did not scale, but I could not get the image to center relative to the size of the View.
So I tried making the whole Button it's own relative layout and this is what I used:
<RelativeLayout android:id="#+id/RelativeLayout01"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<ImageButton android:id="#+id/ImageButton01"
android:layout_height="fill_parent"
android:layout_width="fill_parent"></ImageButton>
<ImageView android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cardback1"
android:layout_centerInParent="true"></ImageView>
</RelativeLayout>
The ImageButton is in the background and will always be the same size as the layout.
The ImageView however will always stay centered in the RelativeLayout and will not scale.
This way the RelativeLayout itself can grow and move and the Image on top of the button will always stay the same size, but the button will grow. The image will however shrink if the Layout becomes smaller than the image itself.
I think that's what you were looking for. There may be a better way to do this, but this is all I can come up with right now.
Simply modify your drawable, apply a larger transparent background. Say my drawable in hdpi is 41*48 px icon.png . I created a new image 60*60 px with a transparent background , copy-paste the previous icon.png and save under the same name. This way you don't need to touch your layouts .
Then you can check the button zone larger if you apply a non transparent android:background:
<ImageButton android:id="#+id/widget_open"
android:src="#drawable/icon_widget_arrow_up"
android:background="#ff777777"
android:layout_height="wrap_content"
android:layout_width="wrap_content"></ImageButton>
Apply the previous and new drawable to android:src , you should clearly see ImageButton area.
By the way, I am running the app in compatibility mode.
If the image is scaled, make sure you are not running your app in compatibility mode (for instance if you target Android 1.5/1.6 without supporting multiple densities and you run the app on Android 2.0.)