Develop Reference

Android XML Linear Layout Display

Good morning guys,
I am having a bit of trouble resolving an issue and could use some help. I created an XML resource file called comment__layout. For some reason I cannot get the layout to display full screen. Please can you review the XML code and help. As you will see in the screenshot the Comment layout is loaded over the parent layout which is exactly what I want however, I would like the Comment layout to be full screen.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/comment__layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dark_grey">
<LinearLayout
android:id="#+id/comment_heading__layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="Comments"
android:textSize="20sp"
android:textColor="#color/gps_orange"
android:textStyle="bold"/>
<Button
android:id="#+id/comment_close__button"
android:layout_width="40dp"
android:layout_height="40dp"
android:text="X"/>
</LinearLayout>
<LinearLayout
android:id="#+id/comments_add_comment__layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/comment_add__edit_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="#+id/comment_add__button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+Add"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/comments_text_views__scroll_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/comments_text_views__layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</ScrollView>
</LinearLayout>
</LinearLayout>
PARENT XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/component_wizard_layout_parent__relative"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/component_wizard_layout_parent"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/frame_component_wizard_manager"/>
<LinearLayout
android:id="#+id/component_wizard_component_popup__layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>

Android Layout not working as expected

I am having an issue with my layout, here is my code for the layout:
<?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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/Scroll"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TableLayout
android:id="#+id/Table"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TableLayout>
</ScrollView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/BookingStatus"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/BookingBtn"
android:src="#drawable/statusbarcomplete"/>
<Button
android:id="#+id/BookingBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/Red"
android:text="Place My Booking"
android:textAllCaps="true"
android:textColor="#color/White"
android:textStyle="bold"/>
</RelativeLayout>
</RelativeLayout>
Here is how it looks on a small device:
Here is how it looks on a large device
Now as you can see the issue is with the small device, the button and the image seem to "float" over the top of the layout whereas I want them on the buttom of the layout at all times. Therefor the user will need to scroll on a small device BUT the image and the button at the bottom will ALWAYS be at the bottom and ALWAYS visible! The scrollview will take up the rest of the screen so that the user can see the information.
You can view the full code for the xml file here. I deleted all of the tablerows to keep this thread tidy and because the code was over 300 lines

<?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="match_parent" >
<ScrollView
android:id="#+id/Scroll"
android:layout_above="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="10dp"
android:orientation="vertical" >
<TableLayout
android:id="#+id/Table"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableLayout>
</ScrollView>
<LinearLayout
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true" >
<ImageView
android:id="#+id/BookingStatus"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/BookingBtn" />
<Button
android:id="#+id/BookingBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#color/Red"
android:text="Place My Booking"
android:textAllCaps="true"
android:textColor="#color/White"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
Try this. Just place the scrollview above the relative layout containing image and button.

Try with this..
place this in last RelativeLayout.
android:layout_gravity="bottom"

android webview layout to take remaining space

I want to create, what seems to be a simple layout, but I am having a few problems with it.
The layout consists of a header, body which is a webview, and a footer banner on bottom as seen on the attached sketch.
I need the webview to take all the remaining space between the header and footer.
I have tried this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/back"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/banner"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/banner" />
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bck"
android:layout_weight="2"
android:layout_gravity="center"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4">
<com.mobclix.android.sdk.MobclixMMABannerXLAdView
android:id="#+id/banner_adview"
android:layout_width="320dip"
android:layout_height="50dip"
android:layout_gravity="center"
android:layout_alignParentBottom="true" />
</RelativeLayout>

Put all of them inside a RelativeLayout and in the webview use layout_below="#id/header_banner" and layout_above="#+id/footer_banner"

This will work for you:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/ddd"
android:orientation="vertical" >
<ImageView
android:id="#+id/banner1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="#drawable/atm" />
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/banner2"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0"
android:src="#drawable/atm" />
</LinearLayout>

How to prevent other View being pushed out of the screen

this is the example XML
<?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">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_margin="5dip" android:background="#FF992222">
<ScrollView android:layout_height="wrap_content"
android:layout_width="fill_parent">
<LinearLayout android:layout_height="wrap_content"
android:orientation="vertical" android:layout_width="fill_parent">
<TextView android:layout_width="wrap_content" android:text="TextView"
android:layout_height="wrap_content" android:textSize="24dip"></TextView>
</LinearLayout>
</ScrollView>
</LinearLayout>
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_margin="5dip" android:background="#FF555555">
<TextView android:layout_width="wrap_content" android:text="TextView"
android:layout_height="wrap_content" android:textSize="24dip"></TextView>
</LinearLayout>
</LinearLayout>
The result is like this :
If you notice, the text in upper LinerLayout are wrapped in LinearLayout and ScrollView.
If the upper content keep added, it will look like this
Bottom Linearlayout will be pushed out of the screen before the ScrollView become active and make the first content become scrollable.... And I don't want that to be happened...
What should I do to make the Scrollview before the bottom View being pushed out of the screen like this :
(this is edited image and not created by Android Layout editor)
Hope the question clear enough.. Thanks :)

It took me an insane amount of time to figure this out, there is no info on the net, but I finally got it. Enjoy!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainlayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/LL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:orientation="vertical"
android:weightSum="1" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/TV1"
android:layout_margin="5dp"
android:layout_weight="1"
android:fillViewport="true" >
<TextView
android:id="#+id/TV2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</ScrollView>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:layout_weight="0"
android:orientation="horizontal" >
<TextView android:layout_width="wrap_content" android:text="TextView"
android:layout_height="wrap_content" android:textSize="24dip"></TextView>
</LinearLayout>
</LinearLayout>

Try this. The key is using layout_weight within the linear layout.
<?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:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent">
....
</ScrollView>
<TextView android:layout_width="fill_parent" android:text="TextView"
android:layout_height="wrap_content" android:textSize="24dip"/>
</LinearLayout>

Well, if I understand you question clearly, you want the TextView in grey to remain stationary, while the textViews in red can be scrolled around, correct me if I'm wrong here. If thats what you want, then you can use RelativeLayout to achieve that. Following is the code to produce an output like:
http://imageshack.us/photo/my-images/836/device20111011012652.png/
The ListView entries are scrollable while the button(in your case it should be a TextView) stays where it is.
Code:
<?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">
<ListView android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/newtask" android:layout_alignParentTop="true">
</ListView>
<Button android:layout_width="fill_parent"
android:id="#+id/newtask"
android:layout_height="wrap_content"
android:text="Add New Task" android:layout_alignParentBottom="true">
</Button>
</RelativeLayout>
Just change the bottom button to a TextView and it would match what you wanted.

How can I layout a secondary fixed footer, underneath a ScrollView?

I'm attempting to build an Android layout that has a fixed footer, with the remaining area taken up by a ScollView. Where this gets tricky is that at the bottom of the ScrollView, I need a second "footer", where there's another image, but but fixed to the bottom of the ScrollView, and which sits behind the ScrollView (and have contents scrolled over it.) Here's a visual example.
When I use the RelativeLayout method to create a fixed footer, that works, but it seems like the space that's taken up by it isn't removed from the overall screen size. I've tried what seems like a seemingly endless combination of methods, and I can't seem to come up with one that works.
Here's what I've been working with.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="top" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="#drawable/background_image" android:orientation="vertical">
<ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="fill" android:layout_weight="1">
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1">
<ImageView android:layout_centerHorizontal="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="#drawable/scroll_footer_image" android:layout_gravity="bottom" android:layout_weight="1"></ImageView>
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<!-- content for the scrollview goes here. -->
</LinearLayout>
</FrameLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/footer_background_image" android:layout_alignParentBottom="true">
<ImageView android:scaleType="centerInside" android:layout_gravity="center" android:clickable="false" android:src="#drawable/footer_contents" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:layout_weight="0"></ImageView>
</RelativeLayout>
</LinearLayout>

Ok, so finally, it appears that answer appears to be to use android:layout_gravity and android:layout_weight. This appears to do the trick for me, with no padding on the images.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="#drawable/background_image" android:orientation="vertical">
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:layout_gravity="fill">
<ImageView android:src="#drawable/scroll_footer_image" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="bottom" android:layout_gravity="bottom"/>
<ScrollView android:fillViewport="true" android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
<!-- additional content goes here -->
</LinearLayout>
</ScrollView>
</FrameLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="0" android:gravity="bottom">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/footer_topper_image" android:orientation="vertical"/>
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/footer_background_image" android:orientation="vertical" android:gravity="center">
<ImageView android:src="#drawable/footer_contents" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</LinearLayout>
</LinearLayout>