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>
Related
I am creating my custom media player. But, I have a problem stocking the views on each other with the desired portions. I have illustrated my goal in the following picture.
I don't have any problem with top and bottom parts of this image. My problem is that I want to put The purple area on top of the SurfaceView, while its height is 0.2 of the total height of the red area.
Note: I use RelativeLayout for the red area and put the purple area on the proper location (layout_alignParentBottom="true") but I don't know how to set its height like what we do in LinearLayout with Layout_weight.
Edit: this is the xml of the red part
<?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:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<SurfaceView
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<mypackages.MediaPlayerController
android:id="#+id/mediaPlayerController1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</mypackages.MyMediaController>
</RelativeLayout>
</LinearLayout>
and the layout of MyMediaController:
<?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-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:orientation="horizontal"
android:layout_gravity="center">
<SeekBar
android:id="#+id/sb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_gravity="left">
<mypackages.CircularImageButton
android:id="#+id/ci1"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_weight="0.1"
app:border="true"
app:border_color="#color/c1"
app:border_width="2dp"
app:shadow="true"
app:shadow_radius="1"
app:shadow_color="#android:color/black"
android:src="#drawable/mediapause" />
<mypackages.CircularImageButton
android:id="#+id/ci2"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_weight="0.1"
app:border="true"
app:border_color="#color/c1"
app:border_width="2dp"
app:shadow="true"
app:shadow_radius="1"
app:shadow_color="#android:color/black"
android:src="#drawable/volumeon" />
</LinearLayout>
</LinearLayout>
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"
I want to create layout like on the image
3 green layouts are linearlayouts and code is shown below.
Can some one give give me code for other red layouts over this three green. What type of layout should be ?
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
Thanks
You want to put all your overlapping layouts into a Relative layout. So to re-create something similar to your picture do:
<?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_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00ff00"
android:layout_marginRight="10dp" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00ff00"
android:layout_marginRight="10dp" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00ff00"
android:layout_marginRight="10dp" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#ff0000"
android:orientation="vertical"
android:layout_marginTop="200dp"
android:layout_marginRight="50dp">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#ff0000"
android:orientation="vertical"
android:layout_marginTop="200dp"
android:layout_marginRight="50dp">
</LinearLayout>
</LinearLayout>
</RelativeLayout>
RelativeLayout is generally used to overlap other layouts. In this case, you can put your LinearLayouts into a RelativeLayout then add the other two layouts accordingly as children of the parent RelativeLayout.
Example:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_marginTop="100dp"
android:layout_alignParentLeft="true">
</LinearLayout>
<LinearLayout
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_marginTop="200dp"
android:layout_alignParentLeft="true">
</LinearLayout>
</RelativeLayout>
There are many other attributes you can apply to the children that RelativeLayout will respond to, but that don't seem to apply to what you were asking for.
You can use RelativeLayout on the top of the whole layout hierarchy. The first layout in it will be the linear layout, which will will the whole relative layout. Above that, you can put another layouts, which will be placed next in the relative layout. You can align them as you want with aligment according to parent or acoording to each other. good luck
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.
This is my layout:
<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SurfaceView android:id="#+id/preview_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"/>
<ViewfinderView
android:id="#+id/viewfinder_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent"/>
<LinearLayout
android:id="#+id/result_view"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/result_view"
android:visibility="gone"
android:padding="4dip">
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView android:id="#+id/App_logo"
android:src="#drawable/mylogo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView android:id="#+id/status_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/transparent"
android:text="#string/msg_default_status"
android:textColor="#color/status_text"
android:textSize="14sp"/>
</LinearLayout>
</FrameLayout>
The problem is that the ImageView in the bottom of the XMLdoes not get displayed.
Any ideas?
10X :)
Each of your views contain the properties of "fill_parent" for their layout widths and heights. You need to either specify "wrap_content" for them, or place them in containers with positive and negative margins, or else they will all attempt to take up all of the available space.
You should remove android:layout_weight="1" from image view and image will appear.