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"
Related
In the xml file posted below I wanted the scrollView to be above the button, and the Button does not disappear no matter how the scrollView expands. I tried to do so as mentioned in the posted xml file but the problem is when the scrollView expands the button disappear.
please let me know what i am missing.
XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal">
<Button
android:id="#+id/btn_00"
android:text="OrientierungsPruefung"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView" />
</ScrollView>
<Button
android:id="#+id/btn_00"
android:text="OrientierungsPruefung"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Your RelativLayouts were unecessary!
The Button at the bottom will always be shown no matter the contents of the ScrollView. Key is to set layout_weight=1!
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.
Problem with last linear layout containing buttons,I want to display my last linear layout i.e. of id-linearlayout4 at the bottom of the screen,so that my buttons should come at the bottom...
<?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"
android:background="#drawable/pic5">
<LinearLayout android:orientation="vertical" android:id="#+id/linearLayout1" android:layout_width="match_parent" android:layout_height="60dip"></LinearLayout>
<LinearLayout android:layout_width="match_parent" android:id="#+id/linearLayout5" android:layout_height="wrap_content">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/textView2"
android:layout_marginLeft="19dp"
android:id="#+id/quesname"
android:textSize="20dip"
android:textColor="#000000"></TextView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout3"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ScrollView android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/linearLayout2"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout android:id="#+id/optionslayout"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</LinearLayout>
</LinearLayout>
</ScrollView>
<LinearLayout android:layout_height="wrap_content" android:id="#+id/linearLayout4" android:layout_width="match_parent" android:gravity="bottom">
<Button android:id="#+id/prev" android:layout_width="100dip" android:text="Previous" android:layout_height="wrap_content"></Button>
<Button android:id="#+id/next" android:layout_marginLeft="120dip" android:layout_width="100dip" android:text="Next" android:layout_height="wrap_content"> </Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>
you can insert a
<View android:layout_height="0dp" android:layout_width="0dp" android:layout_weight="1"/>
right before your buttons.
Or use a relative layout with alignParentBottom="true"
You need a RelativeLayout instead of a LinearLayout as parent; then simply drag the buttons in the layout-GUI to the bottom and they should stick there. When i am at home i am able to post "real" example code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout …>
<!-- your posted code -->
Dragging the button's layout parent to the bottom will produce:
alignParentBottom="true"
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>
I need to design a layout as same as in the following given picture below. And I have tried it by taking three linearlayout, in the first linearlayout I have to add a image as "header", second as VideoView and third as Footer. but the footer image doesn't get displayed in the emulator and device too. So how can I fix it Any help will really be appreciable. Thanks
IMAGE
here is the xml:
<?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="match_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout3"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#drawable/header" android:orientation="vertical"></LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="150dp">
<VideoView android:id="#+id/videoView1"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:keepScreenOn="true" android:fitsSystemWindows="true"></VideoView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout1"
android:orientation="vertical" android:layout_height="wrap_content"
android:layout_width="match_parent" android:background="#drawable/footer"></LinearLayout>
</LinearLayout>
<?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">
<LinearLayout android:layout_height="wrap_content" android:id="#+id/linearLayout1" android:layout_width="fill_parent">
<TextView android:id="#+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HEADER"></TextView>
</LinearLayout>
<VideoView android:id="#+id/videoView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="#+id/linearLayout1"></VideoView>
<LinearLayout android:layout_alignParentTop="#+id/videoView1" android:layout_alignParentBottom="true" android:layout_height="wrap_content" android:id="#+id/linearLayout2" android:layout_width="fill_parent">
<TextView android:id="#+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="FOOTER"></TextView>
</LinearLayout>
</RelativeLayout>
Try using the Relative Layout.
In this snippet you will be able to place header above video but for footer i am not sure try keeping above the video view like what the default video player does.