as you can see, I've a bottom bar (its not using TabHost or anything, partially because obviously its depreciated but also partially because this is only on two activities in the app so I don't need to do a tab host for just two pages). Anyway there is content 'under' that tab bar. Android won't scroll any further because as it sees it that content is viewable, yet it isn't really.
My question is whats the best way to get that content up above the tab bar.
Some ideas I had:
transparant image of a set height (since the tab bar is set height) and a width of wrap_content. This isn't working.
use the background of the tab bar and make it look inconspicuous.
Make the bottom bar not transparent and put anything there, with a set height.
You might be interested in my xml structure:
<RelativeLayout>
<ScrollView>
<LinearLayout>
<RelativeLayout>
<LinearLayout>
</LinearLayout>
<LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</ScrollView>
<LinearLayout>
TAB BAR
</LinearLayout>
</RelativeLayout>
if your TAB BAR has fixed height than you can set ScrollView margin bottom attribute. This will always show your ScrollView data above the TAB BAR
Alternatively to #Antarix Tandon's answer, you could change your root relative layout to be a vertical linear layout.
RelativeLayout happily lays all its children on top of each other unless specified otherwise. Some ideas to fix it:
Change the top RelativeLayout to a LinearLayout with orientation="vertical" and ScrollView layout_weight specified to a nonzero value so that the tab bar is always in bottom and the scroll view takes up all remaining vertical space.
Keep the RelativeLayout but layout the tab bar first with layout_alignParentBottom="true" and then your scroll view with layout_above="#id/your_tabbar_id".
Give the tab bar a view id in the xml, then set the view that appears behind it to be "layout_above" the tab bar view, and make sure they are both inside the same RelativeLayout.
So, for example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/bottom_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<LinearLayout
android:id="#+id/top_area"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bottom_bar"
android:orientation="vertical" />
</RelativeLayout>
This will cause the content behind to be pushed above, and you can then put that top_area layout into a scrollview, which will then be scrollable and always sit above the bottom bar.
For example:
<ScrollView
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bottom_bar" >
<LinearLayout
android:id="#+id/top_area"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" />
</ScrollView>
This will place the scrollview above the bottom bar, with the top_area layout contained within it and scrollable
Related
I wish I had an example to show if it seems confusing, but basically what I want to do is show a bottom toolbar with a Right navigator button (e.g. go to next page) always anchored to bottom of the screen, but if the content on the page (middle section) grows, the toolbar will push down so that you have to scroll to get to it. I know it seems strange, but this is the requirements. What would be the best approach for this?
You can achieve this by combining a ScrollView using android:fillViewport="true" and a vertical LinearLayout that has a Space with android:layout_weight="1" between your content and your navigation bar.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#ccc"/>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#eee"/>
</LinearLayout>
</ScrollView>
That first view is a placeholder for whatever content you want to display, and the second is a placeholder for your navigation bar. You can see that when the first view is short (200dp tall), you get the "content" at the top and the navigation bar at the bottom:
This works because the fillViewport attribute will "stretch" the child LinearLayout to fill the screen, at which point there is "extra" space and the layout_weight attribute on the Space element will consume all that space. (Note that, despite being a ScrollView, you can't actually scroll anything in this state, since the view is stretched to be the exact size of the screen.)
However, when the "content" is tall enough to fill the screen, the fillViewport attribute will have no effect, the LinearLayout won't be stretched, and there won't be any extra space to consume. So, once you scroll to the bottom, your content will fill right up to the edge of the navigation bar:
(Scrolled to the top on the left, and scrolled to the bottom on the right.)
I haven't developed for Android in more than a year and I'm a bit rusty with it. I'm trying to setup a kinda simple UI: a bottom bar at the bottom of the screen and a fragment above it (but without filling the whole height). Something like this:
I thought this would be quite simple, but after a while struggling with it I can't manage to make it work without some "hacks".
The bottom bar is also implemented as a Fragment. This is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment
android:id="#+id/bottomBar"
android:name="com.mytestpackage.BottomBarFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<FrameLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/bottomBar"
android:layout_alignParentBottom="true" />
</RelativeLayout>
The Fragment in fragmentContainer is dynamically loaded from code. With the code paste above, fragmentContainer is aligned bottom but it's not above bottom bar, they're overlapped. If I remove the alignParentBottom from fragmentContainer, then it's placed in top of the screen.
Like I said, I found two "hacks" to solve it but I don't like them much:
1- Set a padding/margin bottom to fragmentContainer.
2- Use a filler empty layout on top of the screen and set fragmentContainer to be below that one.
Is there any way to achieve the layout I want without having to use some tricks like the ones I said?
Thanks!
Add to the relative layout:
android:gravity="bottom"
Ah, and android:orientation="vertical" is meaningless for RelativeLayout
A simpler solution would be to use a LinearLayout with vertical orientation and gravity bottom instead of the RelativeLayout.
In my application, I have a layout which includes a LinearLayout--> Top, GridView--> Middle and a set of views which should be aligned to the bottom.
1. Layout when gridview is not having much content
2. Layout when grid view contents are increased
3. Layout as how it should be shown when Gridview content is very large
Presently my gridview is expanding when the contents in it is increasing that the lower level contents are not visible in the screen.
I don't want to assign specific height to the grid view as it is looking weird in screens with different dimensions.
Is there any way that the gridview expands only upto the bottom views? My parent layout is LinearLayout. I have tried out with relative layout, but it is not working.
I too faced the same problem and found the solution by modifying the respective xmls as below:
Use RelativeLayout as Parent Layout.
Place the Header Content in RelativeLayout
Use ScrollView for the GridView which changes dynamically.
Place the Footer Layout after ScrollView
as shown below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/txtTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ScrollView
android:id="#+id/scro1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/txtTextView" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<GridView
android:id="#+id/scro1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
android:layout_below attribute in ScrollView makes the difference.
It is possible create a screen of the following way?
![Screen][2]
When I change of page, the same layout is displayed on every page
Regards
Yes, the layout is possible:
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ViewFlipper android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ViewFlipper>
<!-- I assumed your layout at the top-left corner is a LinearLayout, otherwise replace it with what you have -->
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:id="#+id/firstLayout">
</LinearLayout>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/firstLayout"
android:layout_margin="5dp"/>
</RelativeLayout>
Edit:
Your question is a little ambiguous, if you want to just add a TextView near the Layout element from your layout then add the TextView and set it an attribute of toRightOf(with some margin to put some gaps). Check the modification in the layout above. If you want the TextView to be vertical centered(taking in consideration the height of Layout) like in your picture then you could wrap the Layout and TextView in a LinearLayout with (width and height set to wrap_content) and aligned to top and left in the parent RelativeLayout.
Your question isn't really clear, but I suspect what you're looking for is exactly what Kursprog gave you, except that you want to put the top left layout and the text view into a wrapper Linear layout, so your xml would look like this (minus all the attributes).
<RelativeLayout> <!--Parent -->
<ViewFlipper/>
<LinearLayout android:orientation="horizontal"><!-- wrapper to your two top layouts
<LinearLayout/> <!-- whatever layout it is that you're describing in your diagram -->
<TextView/> <!-- the text view in your diagram -->
</LinearLayout>
</RelativeLayout>
You'll want to give the wrapper a width of fill_parent and set the layout_weight of both inner elements to 1, so that they're distributed evenly on the screen.
I solved the problem with the FrameLayout. The FrameLayout to allow overlap Views
I have a main.xml with a LinearLayout with three items inside, LinearLayout, ListView and LinearLayout. I would like the ListView to be as big as possible while keeping the bottom LinearLayout always showing and not shrunk or knocked off the screen.
I have tried making the ListView height fillparent, but then the bottom LinearLayout doesn't show up, same with wrapcontent, since the ListView has lots of content.
When I make the ListView a set size, say 300dp, I have space below the bottom LinearLayout. I tried to fix this by making the top level LinearLayout gravity=fill, but that didn't help.
Also, depending on the android I try it on, the bottom LinearLayout will drop off the screen, or get shrunk.
In case it's relevant, the top level LinearLayout is set to fillparent for height.
My goal is to keep the top and bottom LinearLayout to wrap their content, and the middle ListView fill what's left... any suggestions?
Thanks in advance for your efforts!
I believe you can just add android:layout_weight="1" to the ListView, with the ListView set to a height of fill_parent, and the two LinearLayouts set to wrap_content. Regardless, I usually prefer to use a RelativeLayout. You can specify the header to align to the top of the screen, the footer to align to the bottom, and the ListView to fill the space in between, like so:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
>
//...insert stuff here
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
//...insert stuff here
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
/>
</RelativeLayout>