I am having two different circular images with different sizes.I have to place both in same place where the center point will be same.These two imageviews are in a relative layout.
please help..
When using a relative layout the only option to do that is to center both images in the layout, but if you start adding more elements, such as some text above/below any of the images, the result will not be as expected.
So my recommendation is to do it programatically. You can define a View and override the onDraw() method. Then you would load the bitmaps by means of two ImageView (or BitmapFactory). Then you paint it to the canvas at the desired location. To find out the center of each image you can use the Rect class that you obtain from the View method getDrawingRect after you apply the layout properties (so the size is calculated),, or by hand (create a Rect with de dimensions of the loaded Bitmap if you use BitmapFactory)
Other alterative is using LayerDrawable and define the image positions so they are centered (you need to know the image dimensions before hand).
Difficult to help without your layout XML code. Having said that, the moment you see "one on top of the other", you need to consider FrameLayout.
Use Framelayout, and set the background for the same with an image and then add images on top with setting layout gravity to left or right or middle.
In stead of creating a new sublayout, you can potentially have the ImageViews align on all sides and set the scaleType attribute to something like center:
<ImageView
android:id="#+id/circle_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:scaleType="center"/>
<ImageView
android:id="#+id/circle_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:layout_alignTop="#+id/circle_a"
android:layout_alignBottom="#+id/circle_a"
android:layout_alignLeft="#+id/circle_a"
android:layout_alignRight="#+id/circle_a"
android:scaleType="center" />
This will give the circle_b ImageView actually the same dimensions as circle_a, but setting the appropriate scaleType will prevent the image from being stretched or misaligned.
//Edit: ups, I meant to say center... corrected.
Related
I went through the documentation for the tag android:cropToPadding here, it only says:
If true, the image will be cropped to fit within its padding.
May be a boolean value, such as "true" or "false".
which is quite confusing for me to understand.
I have an ImageView inside my app, (which was developed by someone else):
<ImageView
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:maxWidth="100dp"
android:padding="20dp" />
This ImageView had cropToPadding tag inside it, there were like 20 ImageView on main screen, which all had this tag inside them, and the app was obviously taking time to load as there were more Images, but then removing images was not an option, so I was finding stuff that was useless and trying to optimize the layout when I came across this tag.
Removing this tag did no change to the images that were shown inside the ImageView, but there must be some reason that every image contained this tag. So I started finding what this tag did, and documentation wasn't much clear as to why this tag should be used.
Can someone please explain what this tag does to the Image? I found out not many resources, all that I found was "This crops the Image to padding", what does that mean! I know what padding is, I know what cropping is, but what does "Sets whether this ImageView will crop to padding" mean?
This is a complex question to answer, because we have to drill into some nitty-gritty details of how ImageView actually draws the image to the screen.
The first thing to establish is that there are two rectangles that affect ImageView drawing behavior. The first is the rectangle defined by the ImageView's dimensions ignoring padding. The second is the rectangle defined by the ImageView's dimensions considering padding. (Obviously, if padding is 0, then these will be the same.)
The next thing to establish is that ImageViews all have a scale type that defines how the image is stretched and/or cropped when the image's intrinsic size doesn't match the size of the rectangle that it is being drawn into.
The default scale type is FIT_CENTER, which scales the image down to fit within the view bounds + padding (that is, the image will be drawn inside the rectangle that considers padding). Since the image is being drawn inside the padding rectangle, android:cropToPadding has no effect.
However, other scale types work differently. The scale type CENTER simply positions the image in the middle of the view, but performs no scaling (so the image will be clipped if it is bigger than the view). In this case, android:cropToPadding defines whether the image will be clipped by only the view's bounds or also clipped by the view's padding.
A picture is worth a thousand words:
This picture shows the same 72x72 image inside a 72x72 view with 16dp padding and CENTER scale type. The left ImageView has android:cropToPadding="false" and the right ImageView has android:cropToPadding="true".
I am a bit of an android noob, and have been struggling with this problem for far too long.
What I'm aiming for:
Two ImageViews. The first will be the width of the screen, and drawn to match the proportions of its src image (so far so easy). The second ImageView needs to be scaled, so that its width is a fixed multiple (between 0 and 1) of the first image.
I will ultimately then need to be able to touch-drag the second smaller image around on top of the first, fixed image, although this part is not the point of this question.
This will all generally be done programmatically, as the src images and the scale multiple are not known until runtime.
What I've tried: I can overlay two ImageViews in a RelativeLayout, using alignParentTop and so on. This works fine, but I can't see how to scale the images in this case.
I can alternatively scale the two ImageViews using a LinearLayout, by setting their layout_weights to 1 and the scale multiple respectively. In this case I can't get the images overlapping however (not strictly true - I have managed this with negative margins, but it is a very hacky solution and will make it almost impossible to implement the movement of the top image later).
So my question is: is there a way to fix either of the two solutions I have tried to implement? Or is there perhaps a better way to approach the problem?
(I'm not necessarily looking for an answer in code, just the approach I should take)
Well with what I understand,
You can use a Constraint Layout
Place 1st ImageView on your desired place
with constraints to your parent
Place Second ImageView on your desired place
with constraints to the parent (NOT WITH ANY OTHER CHILD VIEW)
The Approach is if you put a SubView In ConstraintLayout with Constraints to Parent, you can manipulate (Scale / translate) without any effect on other views.
to change the position of the View in runtime you can use
view.setTranslationX() and view.setTranslationY();
you can also create a view programmatically with Constraints to the parent
(my personal preference)
you can use this to overlay different Views in ConstraintLayout
<ImageView
android:id="imageID1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="yourImageStable"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
// put your own constraints-
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</ImageView>
<ImageView
android:id="imageID2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="yourImageUnStable"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
Note: This two constraint value will draw an ImageView from the Top-Left
corner of the Parent View (on Position x=0, y=0)
Remember: the View which you want to overlay should be written next to the other,
like here ImageID2 can overlay ImageID1.
</ImageView>
I have an image like this used as background in a RelativeLayout:
This image is used as background for all the levels of my game. Every level is drawn onto the blue area.
I want to keep fixed the aspect-ratio of the blue area, changing the size of the red edges to avoid to show to the user unused pixels of their screen. The green area must be fixed to 80dp for all phones. Then I must add a View (a GLSurfaceView) in my layout in such a way that it fit perfectly the blue area. Thus all levels of my Android game will be perfectly the same in all Android device.
How can I solve this problem?
The real image that I use is a little more complex. You can look it here:
Real image
I would use a FrameLayout for the middle part of the screen(blue), add an ImageView, containing the BackgroundImage you want to display, and put the GLSurfaceView on top of it.
Since the aspect ratio is always the same, you could set the ImageViews sclaing to fit xy and the image should always look the same.
Lets assume you are using a simple SurfaceView, the xml code id use to put a ImageView begind it would look like this
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<SurfaceView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
As i dont know how you build your View i cant post the code that does the job, but just add a FrameLayout instead of your GLSurfaceView to your View, with the Same Dimensions, the GLSurfaceView would have.
To that FrameLayout first add the ImageView, then the GLSurfaceView. Both with height and width set to match_parent.
To Figure out the size of your SurfaceView...
Retrieve Display Dimensions
Substract Green Bar Dimensions
Calculate the size of the Blue View, get the Height/Width (whatever is bigger) calculate the missing Dimension
Set the Red Views to Occupie the empty space.
So you would have to do this programmatically :)
I have an image view whose background is a xml shape drawable i.e. a rectangle shape drawable.My app's orientation is fixed to landscape view.
The imageview is in relative layout.
I am trying to move it to the right of the screen by setting the appropriate value of layout_marginRight but this does not work .The imageView always stays in its's original position.
I have tried the following other options also but none helped.
The other options which I tried are:
Creating a new relative layout params and setting the right margin
Creating new margin layout params and setting the position
Trying padding option
Setting the imageview to right position relative to another imageview...
Using display metrics to get width of screen and accordingly setting the margin....
I am stuck since a week setting the position of this imageview...
I was thinking the best approach is to set this imageview in between two imageview as I am not able to move it by setting margin but that does not work either...
Here is the current xml of my imageview in main.xml:-
<ImageView
android:id="#+id/rect1"
android:background="#drawable/rect"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginRight="70dp"
android:scaleType="fitCenter"/>
I don't see why adding a margin to the right of the image would help move the image to the right, it just extends the right side bounds of the imageview by the margin. As long as the imageview isn't actually on the right side of the parentview, it would be allowed to grow without changing position. I suggest using layout_alignParentRight="true" on the imageview if you want it on the right of your relativelayout, and then you can use the marginRight to control how far off the right side you want it.
Make the layout_width attribute of the RelativeLayout to fill_parent and see it work :)
My issue was that my parent layout's width was set to wrap_content, which doesn't have a defined width during the editor, I think. Thus, I couldn't use marginRight to get an offset. I had to change the width to a fixed size like match_parent or a constant dp size.
put the image view in a linearlayout, then use android:layout_marginRight="70dp
I have an image which is 450px square below some text in a linear layout and wanted it to fill the width of the device, which I done by using;
ImageView android:id="#+id/my_image_container"
android:src="#drawable/my_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:scaleType="fitStart"
This has worked in a fashion, but the ImageView element fills the rest of the screen and any elements placed under do not show.
Does anyone know of a way to trim the bottom of the space that the ImageView uses.
Hopefully this image can explain it better - I want to crop the empty area under the image (orange background).
I recommend you to use a RelativeLayout instead of a LinearLayout. You can then use android:layout_above="" and android:layout_below="" to ensure that you get the layout you want.