Layout issue on Android with FrameLayout and ScrollView - android

I'm trying to split the screen in 2 areas, to the left an ImageView and to the right a ScrolView. I'm adding the ImageView and the content of the ScrollView programatically, so the xml file of the layout looks like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:id="#+id/scene_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left"
>
</FrameLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_width="#dimen/scrollmenu_width"
android:layout_gravity="right"
>
<LinearLayout
android:id="#+id/scrollmenu"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_width="fill_parent"
>
</LinearLayout>
</ScrollView>
</FrameLayout>
What am I doing wrong? because I'm getting the ScrollView to the right, but the ImageView centered (relative to the screen) placed on the left of the screen. The resolution of the image exceeds the screen's resolution so I get black sp

I think you should make use of the LinearLayout and the weight parameter to solve this problem.
I have edited your snippet to give you an idea of how you should use it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/scene_view"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_weight=1>
</FrameLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight=1
android:layout_gravity="right">
<LinearLayout
android:id="#+id/scrollmenu"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_width="fill_parent">
</LinearLayout>
</ScrollView>
</FrameLayout>
I hope it helps..

Related

Blank area shows on top and bottom of the image in ScrollView

I have a problem that when i add ImageView in ScrollView it shows empty space on top and bottom both side i want to show image on activity on full screen with width of fill screen and if image is long enough then screen then image will be scrollable. this code some how solve the issue but also showing empty area on top and bottom of the image.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
tools:context="com.alicon.digi.book.ScreenSlideActivity" >
<ImageView
android:id="#+id/bookImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/page_of_book"
android:src="#drawable/book_title" />
</ScrollView>
Please try this and pay attention to fillViewport property of ScrollView.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
**android:fillViewport="true"** //this is imp, see the link for a very good explanation
tools:context="com.alicon.digi.book.ScreenSlideActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/bookImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:contentDescription="#string/page_of_book"
android:src="#drawable/book_title" />
</LinearLayout>
</ScrollView>
fillViewPort
add android:scaleType="fitXY" attribute to the ImageView XML and change android:layout_height and android:layout_width attributes' value from wrap_content to fill_parent. Use LinearLAyout instead of ScrollView as follows...
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.alicon.digi.book.ScreenSlideActivity" >
<ImageView
android:id="#+id/bookImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:contentDescription="#string/page_of_book"
android:src="#drawable/book_title" />
</LinearLayout>

set ImageView below a ScrollView

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF" >
<LinearLayout
android:layout_width="590dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
...
Can I place image as background in bottom Activity (window)? For instance, when scrolling ScrollView, image must be always bottom and visible.
Did you try using RelativeLayouts? Something like:
<RelativeLayout android:width="fill_parent"
android:height="fill_parent"
...>
<WhateverYouWantAtBottom android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
<ScrollView android:layout_width="fill_parent"
android:layout_height="wrap_content">
<whateverYouWantScrollable android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</ScrollView>
</RelativeLayout>
At the bottom you could have an imageview with the image you wanted. No matter how long your content in the scrollview is, the imageview will not budge from the bottom as long as it has the alignParentBottom set as true.
EDIT: In the above code, the <whateverYouWantAtTheBottom> will be in the background as I declared it first. The foreground will be the contents of the scrollView as that was added last in the XML.
i tried this and its work for me
<?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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"
/>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/imageView1" >
</ScrollView>
</RelativeLayout>

How to define a Layout in Android

I've got a question about how to define this really simple layout:
I'd like to use Relative Layouts but I'd need the B height to fill all the height that A leaves.
I'm trying to do a layout that suits for all the resolutions, so I cannot specify px or dp in the xml layout definition.
Ideally, I don't wanna use the wrap content property for height because B is a ListView.
Is there any solution at all?
Thanks
Layout image
Here
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/holder_a"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</LinearLayout>
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/holder_a" >
</ListView>
</RelativeLayout>
<RelativeLayout >
<A fixed height />
<B layout_below=a fill_parent />
</RelativeLayout >
"I'm trying to do a layout that suits for all the resolutions"
Then you should do more than one XML file, else it's impossible to have 1 perfect layout for all devices, except Height of A is fixed
This will give you the layout that you want:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1" android:layout_height="60dp" android:layout_width="fill_parent"></LinearLayout>
<ListView android:id="#+id/listView1" android:layout_height="fill_parent" android:layout_width="fill_parent"></ListView>
</LinearLayout>
You can replace the inner LinearLayout with anything you want.
Use android:layout_weight
<LinearLayout
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:weightSum="100"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="70" >
</LinearLayout>
<LinearLayout android:id="#+id/widget32" android:orientation="horizontal"
android:layout_weight="30" android:layout_width="fill_parent"
android:layout_height="wrap_content">
</LinearLayout>
</LinearLayout>

How can I place new items under scrollview

I have a vertical scrollable layout with lots of items, working fine.
I am trying to place a new linearlayout to the bottom of the screen that would NOT be part of the scrollable layout.
That is, it would sit on the buttom (like an adview) independent of the scrollable part.
I was only able to place it inside the scrollView. How can I place it below, so it would always visible ?
Use a RelativeLayout, and organize it like this:
<?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"
android:orientation="vertical" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/linearLayoutThatDoesNotScroll" >
<LinearLayout
android:id="#+id/linearLayoutWithLotofContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/linearLayoutThatDoesNotScroll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
</LinearLayout>
</RelativeLayout>
The trick is in the ScrollView placement, at the same time it is aligned with the top of the screen AND above the lower, fixed, LinearLayout. It just works.
something like this :)
<?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/scroll_view"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout android:id="#+id/bottom"
android:layout_width="fill_parent"
android:layout_height="10dip" />
</LinearLayout>
You will add your bottom content to the bottom linearLayout with the android:id=bottom :)
If you used a vertical LinearLayout to hold the scrollable layout, then you could add the adview to the LinearLayout below the scrollable layout and it would appear at the bottom of the screen. (assuming your weights are set correctly,and the scroll layout is set to WRAP_CONTENT)
A RelativeLayout would allow you to set the adview to align itself with the bottom of the scrollable layout as well, but you would still need to make sure the scrollable layout was set to WRAP_CONTENT so it didn't automatically take up the entire screen.
<?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" >
<Button
android:id="#+id/dialogButtonOK"
android:layout_width="100px"
android:layout_height="wrap_content"
android:text=" Ok "
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:background="#drawable/button_style"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:id="#+id/scrView"
android:layout_above="#id/dialogButtonOK"
android:layout_alignParentTop="true"
>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:id="#+id/main_table" >
</TableLayout>
</HorizontalScrollView>
</ScrollView>
</RelativeLayout>
This is worked for me

Android UI difficulties

My layout was perfect until I decided to add a scrollview.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout android:id="#+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView android:id="#+id/scrollView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:id="#+id/linearLayout1">
<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="#+id/tableLayout1"/>
</LinearLayout>
</ScrollView>
<Button android:layout_width="match_parent" android:id="#+id/button1" android:text="Start" android:layout_height="50dip" android:onClick="getOutput"></Button>
</TableLayout>
I would like the button to stay at the bottom of the screen, I would actually like the scrollview to take up the entire screen. With just the inner table layout it works fine. In the Graphical Layout preview it looks how I want it, but not when I run it.
I would like the scrollview to take up the whole screen except the button, which I'd like to be at the bottom.
you could use RelativeLayout or LinearLayout as Root view. Giving Button more weight. That way ScrollView won't take up the whole thing.
this should work
<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="0dip"
android:layout_weight="1.0">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical"
android:id="#+id/linearLayout1">
<TableLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/tableLayout1"/>
</LinearLayout>
</ScrollView>
<Button android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Bottom Button"/>
</LinearLayout>
Try setting ScrollView fillViewport attribute to true.

Categories

Resources