I have a simple LinearLayout in Android with two images vertically:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.eataly.android"
android:orientation="vertical"
android:background="#android:color/white"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/img_header1"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/img_header2"
/>
</LinearLayout>
As you can see at the following link, I can't get rid of a a gap at the top and at the bottom of the images:
http://img185.imageshack.us/img185/8484/senzanomev.png
I've tried everything imaginable on the LinearLayout and the ImageViews, i.e.:
android:padding="0px"
android:top="0px"
android:bottom="0px"
android:top="0px"
android:layout_margin="0px"
with no success.
What can I do to remove these empty borders?
I found the solution. I needed to add this attribute to the ImageView:
android:adjustViewBounds="true"
add android:scaleType="fitXY" in xml layout.
To do this in a linearlayout
for the top ImageView: android:gravity="bottom"
for the bottom ImageView: android:gravity="top"
Are you sure you don't want to be using a RelativeLayout? If you're trying to align two images to each other, that seems the way to go for down the road imho.
Related
I'm trying to make a ImageView inside a HorizontalScrollView, but the imageView gets twice the width of the screen and end halfway out of bounds.
My XML:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_gravity="top"
android:baselineAligned="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/penguins" />
</LinearLayout>
</HorizontalScrollView>
And a image of what I get (click me!)
Does anyone know a solution to this problem?
Greetings
I copied your xml and using my resource it looks perfect, i believe your resource is bigger than you think it is, you probably should use layout_width and layout_height as fix size and also set scaleType to centerInside.
I'm trying to position an image below a TextView in a RelativeLayout but it doesn't work. when i set its position using android:layout_below. This is my xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#ccc"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/app_details_1"
android:text="#string/app_details_1"
android:textColor="#347"
android:gravity="center"
android:textSize="9pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/logo"
android:src="#drawable/secs"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/appdetails_1" <!-- I'm setting it here -->
/>
</RelativeLayout>
Instead it just places the image at the top left of the screen. How do I position it? Is layout_below a wrong positioning code?
There's a mistake in your xml. Must be
android:layout_below="#id/app_details_1"
it should be ok, but first try to make sure the textView is positioned on top by using layout_alignParentTop="true" for the textView and see if it does the trick.
I have a problem with my ScrollView. It has an ImageView inside it. The imageView holds an image which is 480 * 3000 px. So It needs to be in a ScrollView so the user will have the ability to scroll down.
The problem is: when I test the application, the ScrollView does not wrap to the image hight. There is a black space under the image which is strange for me.
This is my XML code. I look forward for your opinion
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image"
android:src="#drawable/image01"
android:scaleType="fitStart" />
</ScrollView>
</RelativeLayout>
Update:
This is how my image looks like with #ruhalde code. I can't take a screenshoot since it is big and you'll not see the whole picture so I draw it.
Rewrite your layout. Make the ScrollView the outer most element. Take a look at this good tutorial for more information: http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts
Use a LinearLayout instead of RelativeLayout which is deprecated by now. Set fillViewPort=true in your ScrollView XML or programatically if you want with setFillViewPort(true).
Put imageview inside a LinearLayout and that inside ScrollView, your XML should look like this:
LinearLayout
---ScrollView
----LinearLayout
------ImageView
Check out my XML here working good with a 800 x 4000 pixels image, perfectly scrolling vertical:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView android:id="#+id/scrollView1"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:id="#+id/mapa" android:layout_height="wrap_content"
android:layout_width="wrap_content"></ImageView>
</LinearLayout>
</ScrollView>
</LinearLayout>
To those who might be interested:
My problem was with the image I'm using, not how I organize my layouts. Thanks.
I believe you should use scrollView tag before your layout tag
I have this code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutAnim"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/leftCornerImage"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/btnNight"
android:layout_width="62px"
android:layout_height="62px" />
<ImageButton
android:id="#+id/btnAlarm"
android:layout_width="62px"
android:layout_height="62px" />
<ImageButton
android:id="#+id/btnThermo"
android:layout_width="62px"
android:layout_height="62px"
android:layout_gravity="bottom" />
<ImageButton
android:id="#+id/btnDigital"
android:layout_width="62px"
android:layout_height="62px"
android:layout_gravity="bottom" />
</LinearLayout>
<LinearLayout .....
</LinearLayout>
</LinearLayout>
Can somebody helps me. Why android:layout_gravity="bottom" doesn't work? If you have the better solution, please help me.
A vertical LinearLayout will only honor horizontal gravity; a horizontal LinearLayout will only honor vertical gravity. Use RelativeLayout, or else use android:layout_weight to distribute extra vertical space where you want it.
android:layout_gravity="bottom" here goes for text inside button.
If you want buttons anchered to the bottom, you should provide android:gravity="bottom"> to first inner LinearLayout.
The parent controls the gravity so android:gravity="bottom" should be in the containing linear layout instead. Note this will affect all of the views. If you want only the last view to hug the bottom, either use a RelativeLayout or place a plain view in between the two images and set its layout_weight to 1.
Hope this helps!
I'm trying to create a very simple android screen with the following content: top banner, webview and bottom banner. for some reason, i can't do it. my xml look like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/FrameLayout02"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true" android:isScrollContainer="false">
<ImageView android:layout_width="wrap_content" android:layout_above="#+id/Web"
android:layout_height="fill_parent" android:layout_gravity="top"
android:src="#drawable/logo"></ImageView>
<WebView android:layout_gravity="center" android:id="#+id/Web"
android:layout_height="fill_parent" android:layout_width="fill_parent"></WebView>
<ImageView android:layout_width="wrap_content" android:layout_below="#+id/Web"
android:layout_height="fill_parent" android:layout_gravity="bottom"
android:src="#drawable/logo"></ImageView>
</LinearLayout>
what is wrong?
Thanks,
Daniel
Short answer all is wrong. Your code is a mess.
Long answer. You are trying to have an ImageView above a WebView and at the bottom another ImageView. I'm not exactly sure what of the mistakes broke it but that's also not important. Take a look at my example XML code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:id="#+id/topimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/icon"/>
<ImageView android:id="#+id/bottomimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/icon"/>
<WebView android:id="#+id/web"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/topimage"
android:layout_above="#id/bottomimage"/>
</RelativeLayout>
Now what my XML does is simple. It uses a RelativeLayout as a container to allow a more flexible child alignment. The ImageView called topimage will adjust its height to its content and fill the parent in width. It is aligned to its parents top. The second ImageView is similar with the only exception that it is pinned to its parents bottom. The WebView is aligned in between both ImageViews. It adjust it's height to the 'ImageView`s heights.
Try to always keep some kind of structure in your XML and also Java code so you and also others can throw a look at it without starting to cry.