I wan to place Small ImageView on the anchor of CircularView just like below image
My Code is
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.hey.heypickup.UI.UICircularImage xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/contct_imgpic"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_margin="5dp"
android:layout_weight="0.04"
android:padding="10dp"
app:line_color="#color/colorPrimary"
app:line_color_press="#color/green"
android:src="#drawable/ph_1"
app:line_width="1dp"
app:padding="0dp"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_phone_black"
/>
</FrameLayout>
Result of above code:
but the Second imageview not appearing at the achor of circularImageView?
Can we achieve this without using floating action button ?
if yes then how ?
Since your second image is overlapping the first image,
I think it's because your ImageView has a wrap_content height and width. You should make it a fix size, and try it out because if your ic_dialog_email image is large enough then it will take entire space and might overlap the first image.
Would you make height and width fix and try again? For example, make it 15dp each and take a look. Also remove that margin from ImageView along with that change.
You'll just need to trial and check the exact size your need for the second image along with required margin to position itself correctly as per your UI requirements
Related
I would like to have an image always perfectly centered on top of the bottom of another image.
My first thought was setting the background image's bottom constraint to, for example 100dp from another view, and then the foreground image's bottom constraint to 50dp from the same view, and set it's height to 100dp.
This way it will always be on the center of the background image's bottom center, but I am making the foreground view not responsive by giving it a fixed size, which is something I would like to avoid.
Another thought I had was to constraint both the top and bottom of the foreground image to the bottom of the background image, but then the view just collapses.
I can't find any settings that would allow that to work.
*I need to keep a ratio for the foreground image.
I found an answer here:
https://gist.github.com/writtmeyer/f5971266394b2316eb01b566cdeff2a0
It suggests a clever way if using a dummy view.
You can do it by constraining your view to the start and end of the target, so that it will keep centered to it. Here's a sample:
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/targetView"
app:layout_constraintStart_toStartOf="#+id/targetView"
app:layout_constraintEnd_toEndOf="#+id/targetView" />
I think this is what you are looking for.
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/foregroundImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/backgroundImage"
app:layout_constraintEnd_toEndOf="#id/backgroundImage"
app:layout_constraintStart_toStartOf="#id/backgroundImage"
app:layout_constraintTop_toTopOf="#id/backgroundImage"
app:srcCompat="#mipmap/ic_launcher"/>
I have a image view inside of a relative view, as per code below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/maintenance_banner"
android:layout_alignParentTop="false"
android:layout_margin="0dp"
android:padding="0dp"/>
</RelativeLayout>
what i don't understand is the gaps at the top & bottom, as I have set both height to wrap_content, the gaps shouldn't be part of the content, only the imageview it self isn't it? Or does it means the gaps are part of the image view it self? but i set the padding to 0. also, for some reason I can get ride of them by setting scale type.
The image probably has another aspect ratio then your imageView.
Try to set the android:scaleType to centerCrop or whatever else does work for you.
The default scale type is: FIT_CENTER and FIT_XY for buttons.
Hope this helps
EDIT: Sorry I haven't seen the wrap content.
From the screenshot it looks like you have other views below, are you including this layout file into another one?
Cheers
For my GUI i use the RelativeLayout and want to keep it as it is the best for different screeen resolutions.
For example i have this Background, where i want to put an ImageView exactly over the TV-screen (to show some pictures on the TV).
I want this to work in different screen resolutions.
How can i achieve this? Or is this even possible? Examples are welcome :)
My Background Image:
If I were you, I would separate the TV image from the background and make it a new ImageView. Then you can set the position of TV-Screen ImageView regarding to the TV ImageView.
Well i think you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_launcher"></RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:src="#drawable/ic_launcher"
android:layout_alignTop="#+id/back"
android:layout_alignRight="#+id/back"/>
</RelativeLayout>
But i think there could be an issue with different resolution try this and let me know if it worked.
You can have your TV as a PNG. Carve out the screen from this image. This will make the TV image TRANSPARENT for the screen(red outlined portion)
Next, your images/screen-slides must be exactly same as the TV image in terms of width and height. However, the actual content of the image/screen-slides must only be in the hollow portion.
I think i figured out how to do this.
At first i changed the background-picture from a Layout-Background to an ImageView:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:src="#drawable/background1"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:scaleType="fitXY" />
Then i can set the TV-image relative to the Background-ImageView's f.e. top and right margin. (looks hardcoded like this)
<ImageView
android:layout_width="125dp"
android:layout_height="85dp"
android:id="#+id/imageView1"
android:src="#drawable/tvImage"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="44dp"
android:layout_marginRight="169dp"
android:layout_marginEnd="169dp"
android:scaleType="fitXY" />
Basically there are now two things i have handle, to make the TV-image fit when changing the screen resolution:
1) the width and height of the picture.
2) the position of the picture.
To find out 1):
My Background is f.e. 500x250dp.
In an Image program i measured the size i need for the TV-image: 125x85dp.
Now i can calculate the width and height back depending on the background size.
500/125 = 4 for width calculation
250/85 = 2,9 for height calculation
So if the Screen changes for example to 800x400dp the width and height for the TV-image an be calculated like this:
800 / 4 = 200dp
400 / 2,9 = 137dp
So my TV-image should have a size of 200x137
To find out 2)
Again i have to calculate like in Point 1). Find out the position of the TV-screen and then set the layout margins according to the calcualtions. I havent implemented this point yet, so i can't explain more, but i think you get what i want to say. If not feel free to ask :)
And in the end, i can setup the TV-image with this code (hardcoded values should be the calculated variables!)
RelativeLayout.LayoutParams layoutPar = (RelativeLayout.LayoutParams) tvImage.getLayoutParams();
layoutPar.setMargins(0,88,210,0); // or whatever
layoutPar.height = 137;
layoutPar.width = 250;
tvImage.setLayoutParams(layoutPar);
Ok here is the problem...
I have a image background that need some text and additional graphics on it. The background image needs to be in the center of the screen and may not stretch. Here is what i need to do:
The problem is that i need to align the text to the background image.
I've tried to wrap it all into a relative layout - something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bg_image"
android:layout_centerInParent="true"
android:src="#drawable/member_card"/>
<TextView
android:layout_height="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:text="#string/membercard_info"
android:layout_marginTop="40dp"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:layout_marginTop="200dp"
/>
</RelativeLayout>
This will not work since android adds additional padding to the image to avoid it from stretching.
Here is what happens in two different cases:
So how do I align the text to the background image?
I've solved this problem in the past in code by baking it all into one image,- but would like to do this in xml.
If you want to remove padding, you can use manually set it. However, if you want overlapping elements, you generally want to use FrameLayout. Look here: http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/
Set a gravity inside the frame layout to align it.
if you want an ImageView with additional layers drawn on top of that, see this thread: How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?
There a padding around the image because you set the imageView size to fill its parent ( using match_parent )
You should try to set it to wrap its content :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
EDIT : If your picture is bigger that the screen size, you need to have it scaled keeping the aspect ratio.
To do this, use match_parent in vertical with a scaleType to FIT_CENTER
and keep the wrap_content setting for the width ( since we want the image view left/right bounds stuck to the image content )
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
.../>
Is this better ?
I am having two Images in two different ImageView and the Layout in LinearLayout and vertical orientation.
Now I want to Touch Frist image border(bottom part to) to other image's Top part . but in android by default it gives some space between them.
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
I want that , these Images touch each other. Thank you
try
android:layout_marginTop="-12dip"
in your second imageView
and 12dip change to your own num, notice that it is negative num.
and second way, use RelativeLayout can satisfied you.
Set android:padding to "0dp" and android:layout_marginTop/Bottom to "0dp" as well. Then there should be no reason they don't touch.
Also make sure your resources (png/jpg/etc) do not have extra transparency around the edges, as that will count towards the picture.