I have two fragments, each with its own respective RecyclerView list.
The RecyclerView from each of the fragments may contain many items. So, scrolling will mostly be necessary.
My problem is, how do I combine and display these two fragments into one screen using ScrollView, but at the same time, making the scrolling of the RecyclerViews behave as normally (non-sticky, follows the entire screen's scroll).
Thanks.
EDIT:
My layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.easyuni.courserecommender.ResultsActivity">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/toolbar">
<FrameLayout
android:id="#+id/fragment_container_results_career"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/fragment_container_results_career"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/divider" />
<FrameLayout
android:id="#+id/fragment_container_results_courses"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemIconTint="#333"
app:itemTextColor="#333" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
Screenshot:
(Notice the RecyclerView at the top and bottom scrolls individually)
https://drive.google.com/file/d/0B-glHmJbVcwiVU41WVRHU3g2bkE/view
You can do like this one -
In your activity's layout file, you should have two framelayout for containing your two fragment.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/first_fragment_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</FrameLayout>
<FrameLayout
android:id="#+id/second_fragment_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</FrameLayout>
</LinearLayout>
Then in your Activity's onCreate() method, you can use FragmentManager class to add Fragment to the FrameLayout.
getSupportFragmentManager().beginTransaction().add(R.id.first_fragment_container, new YourFirstFragment()).commit();
getSupportFragmentManager().beginTransaction().add(R.id.second_fragment_container, new YourSecondFragment()).commit();
Related
I am trying to achieve something like following
I am trying to build an activity joining 3 fragments. Top fragment contains a search bar (EditText), middle fragment has a Banner Slider (ViewPager), and the bottom fragment contains a GridView loaded with n number of items dynamically. I want to make the middle & bottom fragments scrollable vertically while the top one being fixed. But the Grid view is scrolling within itself while the height is set to wrap_content.
If the GridView is given a fixed height, it is working as expected. But I cannot give it a fixed height as its content is dynamically loaded.
Home Activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/colorLightGray"
tools:context=".HomeActivity">
<ScrollView
android:id="#+id/scrollableContents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:id="#+id/fragmentContainerSearchBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
<FrameLayout
android:id="#+id/fragmentContainerSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
<FrameLayout
android:id="#+id/fragmentContainerPopularItems"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
SearchBarFragment:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".fragments.HomeSearchBarFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="2dp"
android:paddingVertical="2dp"
android:focusable="true"
android:focusableInTouchMode="true">
<EditText
android:id="#+id/etSearchBoxHome"
android:inputType="text"
android:layout_width="match_parent"
android:layout_height="40dp"
android:drawableRight="#drawable/ic_search_24dp"
android:drawablePadding="5dp"
android:background="#drawable/et_search_home"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_marginTop="0dp"
android:clickable="true"
android:cursorVisible="true"
android:focusable="true"
android:textSize="14dp"
android:hint="#string/home_searchbox_hint"/>
</RelativeLayout>
</FrameLayout>
Banner Slider Fragment:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="2dp"
tools:context=".fragments.HomePromoSliderFragment">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="2dp"
card_view:cardBackgroundColor="#color/colorWhite"
card_view:cardCornerRadius="3dp">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.v7.widget.CardView>
</RelativeLayout>
Popular Items Fragment:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
tools:context=".fragments.HomePopularItemsFragment">
<GridView
android:id="#+id/gvPopularItems"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="150dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth">
</GridView>
</RelativeLayout>
You can take nestedScrollView outside of ViewPager and Gridview.
Set the recycler View to setNestedScrollingEnable(false).
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent">
</GridView>
</android.support.v4.widget.NestedScrollView>
Try using `Constraint Layout` for whole layout, `autocomplete text view` for search bar, `viewpager` for banners, recycler view for showing the loaded items.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<AutoCompleteTextView
android:id="#+id/search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent">
</android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>
** Set the margins as per the UI
Set your layout manager as Gridlayout manager for recycler view as below:
recyclerview.layoutManager = GridLayoutManager(this, 2, OrientationHelper.VERTICAL, false)
Hope it will work fine. Let me know if you find any issues.
I have an activity layout with 2 FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="de.sioned.multivoc.AddWordActivity"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/toolbar_layout"/>
<ScrollView
android:id="#+id/scLeft"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/paneLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftTop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftBottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/paneLeftTop"/>
</RelativeLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
The 2nd FrameLayout paneLeftBottom will at some point contain the following fragment:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/lyTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...some static fields...
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/lyTop">
<ListView
android:id="#+id/lvResult"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"/>
</RelativeLayout>
In this configuration the ListView is only shown with a height of one of it's rows instead several rows utilizing the available space. The ListView works fine but only one row at a time is displayed.
The same ListView fragment works fine when I put it into a 2-pane landscape layout. How can I make the ListView use the available space ?
Edit:
Found a partial solution by switching to a LinearLayout within the ScrollView. Only problem left is, that the bottom Framelayout overlays a bit of the top FrameLayout when I load the said fragment into it. But that is acceptable in this case as it is only temporary to select some data.
<ScrollView
android:id="#+id/scLeft"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<LinearLayout
android:id="#+id/paneLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftTop"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</ScrollView>
This right here
android:layout_width="match_parent"
android:layout_height="match_parent"
Should be
android:layout_width="match_parent"
android:layout_height="wrap_content"
I am facing a problem of overlapping fragments when i inflate fragments from below.
This is code in layout:
<FrameLayout
android:id="#+id/nonAdParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_blur">
<FrameLayout
android:id="#+id/collage_view_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_blur"
android:layout_marginBottom="#dimen/collageview_margin" />
<FrameLayout
android:id="#+id/menu_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorSecondary" />
</FrameLayout>
fragment "collage_view_container" contains 1 custom view and fragment "menu_footer" contains horizontal recyclerview.
This is code programmatically:
getSupportFragmentManager().beginTransaction()
.add(R.id.collage_view_container, new CollageContainerFrag().setLayoutModel(model)).commit();
FooterMenuFragment footerFrag = new FooterMenuFragment();
getSupportFragmentManager().beginTransaction()
.setCustomAnimations(R.anim.slide_in_up, R.anim.no_anim)
.add(R.id.menu_footer, footerFrag).commit();
Issue: Custom view in "collage_view_container" fragment overlap horizontal recyclerview in "menu_footer" fragment on SAMSUNG device solely.
If i config line this code:
if (SystemUtils.isSamsungDevice()) {
getView().setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
then issue not appear but app will process "slowly". Otherwise, issues appear again.
This is whole code of view where "nonAdParent" framelayout located-in.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_blur"
android:clipChildren="true"
android:clipToPadding="false"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111"/>
<FrameLayout
android:id="#+id/adParent"
android:layout_width="match_parent"
android:layout_height="20dp"
android:visibility="gone" />
<FrameLayout
android:id="#+id/nonAdParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_blur">
<FrameLayout
android:id="#+id/collage_view_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_blur"
android:layout_marginBottom="#dimen/collageview_margin" />
<FrameLayout
android:id="#+id/menu_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorSecondary" />
</FrameLayout>
P.S. Please tell if some more code needed. Thanks in advance.
Replace your Frame layout(nonAdParent) part with the code given below
<RelativeLayout
android:id="#+id/nonAdParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_blur">
<FrameLayout
android:id="#+id/collage_view_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_blur"
android:layout_alignParentTop="true"
android:layout_marginBottom="#dimen/collageview_margin" />
<FrameLayout
android:id="#+id/menu_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_below="#+id/collage_view_container"
android:background="#color/colorSecondary" />
</RelativeLayout>
I would like to ask how can i display included layout and listview positioned under the included in onde view.
Layout:
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.TransactionsActivity">
<include
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_alignParentTop="true"
layout="#layout/preloader" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/list"
/>
</android.support.v4.widget.SwipeRefreshLayout>
In the preview is displayed only the included layout, but lisview below is not displayed.
Many thanks for any advice.
Since SwipeRefreshLayout accept only one child. Wrap it inside LinearLayout or RelativeLayout.
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.TransactionsActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
layout="#layout/preloader"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_alignParentTop="true" />
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Best Of Luck.
Here is my xml file:
<?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="fill_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/content_main">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"></include>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<android.support.v7.widget.RecyclerView
android:id="#+id/threadRecyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</RelativeLayout>
</LinearLayout>
The main reason I did this design was to try to display the
<android.support.v7.widget.RecyclerView
android:id="#+id/threadRecyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
properly. However, when it is not being displayed at all. Before adding the two relativelayouts, I have one relative layout and the recyclerview did display, but it match_parent for every item of the list and was not able to fix it. How can I display my view properly?
The problem probably has to do with the layout_height="wrap_content" on your RecyclerView. You need to use setAutoMeasureEnabled(true) for wrap_content to work properly with a RecyclerView.
Here's an example:
RecyclerView threadRecyclerView = (RecyclerView)findViewById(R.id.threadRecyclerView);
threadRecyclerView.getLayoutManager().setAutoMeasureEnabled(true);
And your your XML should look something like this:
<android.support.v7.widget.RecyclerView
android:id="#+id/threadRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layoutManager="LinearLayoutManager"/>
Hope that helps. :)
Note that setAutoMeasureEnabled only works properly for Android Support Library +23.2