I am trying to make a simple LinearLayout composed of an ImageView and TextView.
The ImageView should scale to match the LinearLayout height and not lose proportions while doing so.
This is the xml I currently have.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#CCCCCC"
android:scaleType="fitCenter"
android:src="#drawable/strip" />
<TextView
android:id="#+id/logoText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:text="what an awesome text"
android:textSize="18sp" />
</LinearLayout>
Using the above xml, the result is that the ImageView height will indeed match the LinearLayout height and it's width will be the same as the src image but the rendered image will scale properly and center, but this leaves the ImageView itself filling about 90% of the Layout's width as it's the src image width, leaving no space for the TextView.
I just would like to scale the ImageView to match the parent's height and it's width should be just as much needed to scale it proportionately.
Add a linear layout on the image view. Just the image view and nothing else. :) hope it helps
EDIT 1: As many of the other answers mentioned Using the layout_weight property will also help resolve this issue.
add weight 1 on imageview so there will be space for the textview
As I mentioned in the comment under your answer post where you cite KISHORE_ZE, it seems to be helpful only with an image of particular size, and on a particular screen density and resolution. So while it looks acceptable on your current device, it might be a mess on a different one. I suggest that you figure out what part of the layout you want to use for the image and use android:weight attributes for your ImageView and TextView to achieve wanted result.
As #KISHORE_ZE said, this solves the problem.
"Put the image view in a linear layout. Just the image view. Nothing else. "
this visual guide is a lot helpful.
link
in your image view add:
android:scaleType="fitCenter"
or
android:scaleType="fitXY"
whichever suites you.
Related
I have a multi level LinearLayout to show 4x6 ImageButtons for an advent calendar. But when I want to set the background of the ImageButton, it is too big. How can I set the image background to fit the ImageButton size? I want to show 24 pieces of present boxes in a nice grid.
<ImageButton
android:id="#+id/buttonOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="25"
android:background="#drawable/present"
android:fontFamily="#font/christmas"
android:onClick="playOne"
android:text="1"
android:textColor="#android:color/white"
android:textSize="#dimen/button_text_size" />
I think that what you want to do can be done changing/adding 2 things:
Its an ImageButton, so dont use the android:background property, but the android:src with the same drawable
Then add the property android:adjustViewBounds="true" which basically adjusts the image to fit the view while maintaining aspect ratio
I think that should do the trick, else you can also try
Use the android:scaleType property, I would try using fitXY but here are all the possible scale types: https://developer.android.com/reference/android/widget/ImageView.ScaleType
EDIT: Also, you might need to change your width and height properties, either specify a size in dp, use constraints, or wrap your ImageButtons in a GridLayout
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
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
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.