I am making a Layout where I need to position a Toolbar below a Map Fragment. Well it may hear easy but from my small knowledge I hit upon a tricky problem.
Well I hv achieved how to get the toolbar below the fragment body but I hit on some problems:
When using Linear Layout, I split both the components using weights which was perfect as i needed it but couldnt get the Toolbar to the bottom of the Fragment.
While using Relative Layout, I was able to bring the toolbar below the fragment but since the map is big, i couldnt adjust the height of the map and the toolbar goes out of bounds.
What i need is the combined effect of weights from the LinearLayout and the 'android:Layout_below' effect from the Relative Layout.
I will post my code here:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/map1"
/>
<fragment
android:id="#+id/map1"
class="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
</RelativeLayout>
My toolbar is in a separate Layout 'app_bar'
The Toolbar is just like any View, and can be placed wherever you want. This is a big difference between it, and the ActionBar.
Just place the element wherever you would like inside your layout.
In your case, don't place the Toolbar relative to the fragment, but relative to the parent (RelativeLayout) then you can control it's placement/size independent of your fragment (which you can then place relative to your Toolbar if you want that control)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"
android:layout_width="match_parent"
android:layout_height="80dp"// or whatever...
android:layout_alignParentBottom="true"
/>
<fragment
android:id="#+id/map1"
class="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/app_bar"
android:layout_height="fill_parent"
/>
Related
I am building a social app and have an activity for viewing user's profiles (like Instagram).
I basically want to be able to scroll normally and naturally from the ScrollView to the RecyclerView and viceversa.
So for example, if the user does a strong swipe from the bottom of the RecyclerView I want it to take him up to the top of the ScrollView . I was thinking of the following solution (but don't really know how to do it): make the RecyclerView's height "expanded" so it would contain all the items but with no scrollbar, so that the ScrollView can do it's a natural thing.
My layout looks like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- FIRST REGION THIS IS SET PRGRAMATICALLY TO TAKE UP WHOLE SCREEN-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView> <Textview> <Bla> <Bla>
</RelativeLayout>
<!-- SECOND REGION ALSO SET TO TAKE UP ALL SCREEN PROGRAMATICALLY-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
Screenshots:
First Region
Second Region
use this mRecyclerView.setNestedScrollingEnabled(false);
Does anyone know how to have a floating Cardview like this?
http://chairnerd.seatgeek.com/images/autocomplete_checkout.gif
The background image should be able to change programmatically and the cardviews should be scrollable. And the position of the first Cardview should be somewhere below the image. Thanks in advance!
I figured it out myself and I will post my solution here in case anyone run into the same situation.
Here how the layout file should look like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:background="#color/bgGrey">
<ImageView
android:layout_width="match_parent"
android:layout_height="125dp"
app:srcCompat="#drawable/soccer"
android:id="#+id/imageView"
android:scaleType="centerCrop"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="120dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp">
EDIT: Within the LinearLayout, something like a place holder should be added. Otherwise a part of the content at the end would not be shown. So I used a textview to do so.
<TextView
android:layout_width="match_parent"
android:layout_height="120dp" />
Note: The height here should match the marginTop in the LinearLayout
Yes it is a cardView directly on a ScrollView, or a ListView simply with the item's layout with background transparency.
The scrollview/listview is placed on a FrameLayout or RelativeLayout. Either there is a padding/margin on top, or a "stub" first element which is transparent".
Bellow (declared first in the parent layout) the scrollview/listview you can place an image or any other static component whatsoever.
And above you can place other floating components (like the Check-out button on your example)
I got CoordinatorLayout with structure similar to this:
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout
app:layout_scrollFlags="scroll|snap">
...
</CollapsingToolbarLayout>
... almost all elements here have scroll|enterAlways|snap scrollflags
<TabLayout />
</AppBarLayout
<ViewPager />
</CoordinatorLayout>
ViewPager has 2 fragments, first one has just 2 simple TextViews nested in NestedScrollView -> LinearLayout and works perfectly fine.
One of this whole coordinatorLayout feature is collapsible toolbar and a bit more content inside it when scrolling down.
Second one is fragment with google map view inside and behaves weird.
Scenario 1. - Maps fragment has just MapView inside it - Map is full size, however when scrolling down toolbar no longer collapses, instead you scroll inside the map, which is I guess expected, I'm just not sure how to write custom MapView to go around it.
Scenario 2 - MapView is inside LinearLayout which is inside NestedScrollView - Toolbar now collapses when scrolling down, however for some reason it gets really small
Every element inside that map fragment has match parent sizes.
Full Map fragment:
<android.support.v4.widget.NestedScrollView
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.gms.maps.MapView
android:id="#+id/details_map_view"
android:layout_height="match_parent"
android:layout_width="match_parent" />
</LinearLayout>
ViewPager inside CoordinatorLayout has match_parent sizes as well:
<android.support.v4.view.ViewPager
android:id="#+id/details.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
Use android:fillViewport="true" on NestedScrollView because it defines whether the NestedScrollView should stretch its content to fill the viewport
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.
I'm working on an alternative simplified layout for an app that is used for smaller screens. This layout should not include a map fragment that is used in the larger layout, however, I'm supposed to avoid programmatic changes if at all possible. The activity that shows the layout also does stuff with the fragment using its ID, so I can't just delete it. I tried making the fragment invisible, like this:
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
But the fragment remains visible. The same happens when I set the visibility to "invisible". The fragment's default position is partially hidden by a view, but when I move the fragment around the layout, it still shows up as visible wherever I put it.
Is there a reason the fragment ignores the visibility parameter? Is there another non-programmatic solution?
For future reference, dora's answer works, but I've been advised to use FrameLayout instead of LinearLayout, it's simpler and intended for use with a single View inside:
<FrameLayout
android:id="#+id/dummyLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
There's another way that works - changing the width and height of the fragment to 0dp, but this is considered a hack and generally less correct solution.
I am not sure this would meet your requirement but you can add a dummy layout container above the fragment you want to hide and add that layouts visibility to gone/visible, whichever you want. But again when you want to show the fragment, you should also make the fragments dummy parent layout visibility to visible.
<LinearLayout
android:id="#+id/dummyLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:visibility="gone" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>