Hey, I'm having some trouble with ImageView in my XML file.
My layout is as follows:
<LinearLayout android:id="#+id/row"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:id="#+id/image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
android:layout_weight="4"/>
</LinearLayout>
Basically, what I am trying to achieve in something similar to the android contact list, where there is a picture (taking up about 1/5 width of the screen), followed by a text box with information in the other part of the screen. I tried to use weight to make the TextView more important, and thus receive more space, but that doesn't seem to what.
What's even stranger is that the scale seems to be working in reverse. If I set the weight of the ImageView to something high, like 10, it scales the image down.
Related
I have a list view, which I was populating with 75x75 px images, and some text:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingLeft="0dp"
android:paddingBottom="10dp"
android:minHeight="90dp"
android:minWidth="90dp" />
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:textSize="20sp"
android:textIsSelectable="false"
android:layout_gravity="center_vertical" />
</LinearLayout>
I am now using an image server that can retrieve images of any size (I am requesting images that are 30% of the devices's width), so I would like to make my ImageView always take up 30% of the width of the list view. I tried using android:layout_weight=".3", and android:layout_weight=".7" for the ImageView and TextView, but this caused two problems:
Since my images are loaded asynchronously, the text moves to the right when the image is loaded, instead of already being in the correct place. This wasn't a problem before, since I could use android:minHeight and android:minWidth.
The text and images are no longer nicely aligned (some are further to the left or right, and setting gravity and layout_gravity did not help.)
So, how can I make the ImageView take up 30% of the width (even before an image is set), and have all the images and text aligned properly?
This is my first question on stackoverflow and I tried to make some of the given answers work but failed.. So, without much adieu, here goes.. :>
I'm trying to make a section of an app about a saint telling his life story in a sequence of images and short text lines detailing the images - a sort of image slide show with text.
What I'm trying to do is an ImageView on top with a Textview at the bottom with the image filling the available screen size. On a user horizontal swipe, the next Image-Text slide loads up different content - replacing the previous content - Imageview filling the screensize completely again.
Basically, a Gallery-esque horizontal swipe/scroll implementation plus the textview (minus the gridview, the pinch-zoom functionality)
I'm a noobie with Java and I tried doing this in XML with HorizontalScrollView but the Imageview doesn't fill the total available screensize or exceeds the screensize making it very non-user-friendly. In Landscape, the textview is hidden completely and even after using weight in LinearLayout, I couldn't make them visible. :S
EDIT:
Current XML Layout
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/horizontalScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dbyouth000" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/dbyouth001"
android:text="#string/dbystring001"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dbyouth001b" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView3"
android:text="#string/dbystring001b"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</LinearLayout>
</HorizontalScrollView>
Potrait Screenshots:
Postimg Gallery 1
Landscape Screenshots:
Postimg Gallery 2
Thanks for reading and I would really appreciate any help :>
I have a centered background image with a pattern that I am showing using an ImageView. I want it to fill the width and height of all the different screen sizes/densities, but maintain its aspect ratio. I think I have that part figured out, but then I have a foreground image (in a ToggleButton) that is smaller and centered and needs to scale at the same rate of the background image. This is important because the button image has graphical elements that need to align perfectly with the background. How do I get it to scale correctly? Here's what I've got so far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relmain"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:src="#drawable/bg_img" />
<ToggleButton
android:id="#+id/button"
android:background="#drawable/btn_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_centerInParent="true"
android:textOff=""
android:textOn=""
android:onClick="toggleLight" />
</RelativeLayout>
Thanks for taking a look!
I think you should do it like this according to my skills
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:background="#drawable/bg_img" />
May be it will look as you want.
I have a linear layout with 4 images with horizontal orientation. My problem is that the first image is cropped and i cant see both of them in my galaxy s,only in some emulators..any help please?this is my linear layout code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_new_3"
android:layout_weight="1"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn1"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn2"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/header_btn3"
/>
</LinearLayout>
this is what i want
and this is what i get
#Jamo: image1:
image2,3,4:
Your containing layout is fill_parent, meaning it's restricted to the width of its parent (probably the whole screen). Each ImageButton is set to width wrap_content, meaning it just fits the width of its content. If the widths of the backgrounds of the images you're using sum up to more than the total parent width, you're going to have problems. This seems to be what's happening. You can't fit more pixels into a screen than what you have.
Update:
With your provided graphics, the "hello" image is 138px and the star is 60px. 138 + 60 * 3 = 318. If your screen is 480px wide (I think the Galaxy S is 480 wide) then you should be able to fit. If you put these into the default or mdpi folder (and the Galaxy S is hdpi) then these will be scaled to 1.5x that, which is 477px. That should still fit.
The only way I know to create something similiar is to use RelativeLayout like this:
<RelativeLayout android:layout_height="wrap_content"
android:layout_width="fill_parent">
<ImageView android:layout_alignParentRight="true"
android:id="#+id/iv4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv4"
android:id="#+id/iv3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv3"
android:id="#+id/iv2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"/>
<ImageView android:layout_toLeftOf="#id/iv2"
android:id="#+id/iv1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="#drawable/icon"/>
</RelativeLayout>
We chatted about this in a previous question. Please post the whole layout file. The layout_weight won't do much, as hinted at in other posts, if the total width is being constrained by whatever is the parent of the outer LinearLayout.
Also, some thoughts.
You have "fill_parent" for the ImageView heights. I think those should be "wrap_content". You're setting the images with 'background' rather than 'src', which is kind of weird.
Also, that first image should be in another layout container, to allow stretching that doesn't screw up the 'hello'.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_new_3"
android:layout_gravity="center"
/>
</LinearLayout>
Not 100% sure on that being exactly what you want, but the ultimate goal would be to stretch the first image without shearing it in any way.
I have a PizzaOverview.
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
If the picture is too big the date is invisible.
add scroll view to your layout or fix the size of imageview
add the scroll view to your layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Ensure that the images you supply to the activity are the correct resolution and size.
Also make sure that you have separate layouts for separate screen size categories.
Read this section of the android documentation for more details on layouts and managing different screen sizes. It tells you the basics you'll need.
You could place your image with the rating bar and the text below it in a RelativeLayout. Give a marginBottom to your RelativeLayout equal to the height of your Button. Then place your text, give it an id and add android:layout_alignParentBottom="true". Set the height of the image to fill_parent and add attribute android:layout:below="id_of_text".
You can as the other answer states make the screen scrollable. But if your content is dynamic (and depending on device it is arguable to say you content will ALWAYS by dynamic) you should make sure the that ImageView has it's bounds set correctly.
In the source code you have:
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
You should instead have:
<ImageView android:layout_height="0dp"
android:weight="1"
android:layout_width="match_parent"
android:id="#+id/pizza_iv"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside"/>
The extra attribute of weight will make your view fill any available space along the orientation set in the bounding LinearLayout. This is dependant on the weight of other views along that orientation (as the other views have no weight value in this case it will fill all space up until the edge of your fixed views).
The extra attribute of scaleType="centerInside" will make your image sit in the center of the bound's you have suggested (which are the width of the screen and all available space vertically) without ever growing large enough to overlap the bounding container.
When using ImageView you should keep in mind that the ImageView is a bounding container for an Image. It can be as large or as small as possible but is only a mechanism for telling the UI where to place an image. The scaleType attribute is what you use to say how you want the image placing within this bounding countainer. Using "wrap_content" on an ImageView isn't effective and can lead to trouble later in the design (especially when considering different devices).