Is there a way for me to tile an image along the right side of an activity view? The image i have is small and square.
i know you can tile the entire activity view like this:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/actual_pattern_image"
android:tileMode="repeat" />
but is there a way to restrain it? to make it just tile one image under the other along the right side?
i know i can do something like this:
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
and just keep increasing the margin as i add another imageView below. my only fear with this approach is when scoll-bars come into picture. this is clearly a very static approach...
just a heads up - very new to android development...
If you know the width of your tile, you can create a bitMap whose width is the width of your tile, and whose height is the height of the full view. Then place this view on the right side of your activity view.
It would be easiest if your view had a relative layout that filled your view, and you had your bitmap align with the the right of the relative layout like this:
android:layout_alignParentRight="true"
Related
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.
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
when i start an activity, it populates the screen with an ImageView that is fill_parent, so the view will populate the screen with my example, gives the X and Y values of 600 and 940 respectively.
When i change the orientation of the screen, getting the height and width seems to be returning the same values.
Can I have it so when i rotate, it adjusts the ImageViews dimensions?
I was looking at onConfigurationChanged() to where i put the code, but when i was using
DisplayMetrics dm = new DisplayMetrics();
getManager().getDefaultDisplay().getMetrics(dm);
it would return the full screen size and not the applicable canvas to work with.
How would i make the ImageView resize itself correctly.
Relevent XML data:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageViewer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="matrix"
android:src="#drawable/accept" />
</LinearLayout>
Edit: I could reload the activity on orientation change and perserve data through saved instance..... that would accomplish it if i am thinking correctly, but i dont want to restart the activity as i dont really think it is needed to.
You could use OrientationEventListener for this, and set Image height and width you want to in the handler for orientation event, for example, you could extend OrientationEventListener, then use:
public abstract void onOrientationChanged (int orientation)
Note: The previous method is called when the orientation of the device has changed. orientation parameter is in degrees, ranging from 0 to 359. orientation is 0 degrees when the device is oriented in its natural position, 90 degrees when its left side is at the top, 180 degrees when it is upside down, and 270 degrees when its right side is to the top. ORIENTATION_UNKNOWN is returned when the device is close to flat and the orientation cannot be determined.
In there you could edit the ImageView Height and Width.
Good Luck:)
I currently have a FrameLayout with a background and a foreground image. The foreground image has transparency using alpha in order to see through and watch the background below.
The foreground image needs to mantain the same aspect ratio of the original bitmap because consists of a trasparent circle in a black screen, much like a spyglass effect. I'm looking for any resolution compatibility.
Unfortunately, I am incapable of achieve this and the foreground shows always its circle stretched.
This is part of the XML code:
<FrameLayout
android:id="#+id/layout_parent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:foreground="#drawable/foreground"
android:foregroundGravity="center|fill_horizontal"
>
I am also trying to solve my issue providing two diferent images, one with 4:3 ratio and the other with 16:9 ratio, each one in a different drawable folder with the long and notlong qualifiers.
/drawable-long/foreground.png (16:9 aspect)
/drawable-notlong/foreground.png (4:3 aspect)
Still with no success.
Do you have any idea of how to get this effect?
Thanks for your time.
Change this attribute in your FrameLayout:
android:foregroundGravity="center"
This will place the foreground drawable in the center of the FrameLayout, not changing its size.
"center|fill_horizontal" will place it in the center and stretch its width to fill the FrameLayout width, which is clearly not what you want.
I don't believe you can change the scale type of either the foreground or the background. What I would recommend is to either:
Place an extra ImageView in your FrameLayout to serve as your background, and use the src and scaleType attributes to handle the image and how it scales.
Since it's a simple black background with just a transparent circle, you could convert that into a 9-patch, making sure to stretch it evenly around the circle. The circle will not scale, but the black area will extend to fill the view.
Number 1 is my personal recommendation if the circle needs to scale as well.
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.)