Develop Reference

How to create a scrollable template using fragments in Android

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.

ScrollView goes up in Multiple Fragments

Hiii,
I am Struggling with ScrollView issue for long time.but unable to solve the issue.
Issue is
I Created one Layout in which I have multiple frame Layouts
Each frame layout is used to contain single fragments.(eg. frame2 is used for fragment 2,frame 3 fro fragment 3 etc.)
frame layouts are oneBelow other.
this is Code :
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
android:fitsSystemWindows="false"
android:id="#+id/svStudentData"
android:layout_marginTop="5dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/lnlFrames"
android:visibility="visible">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame2"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame3"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame4"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame5"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame6"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame7"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame8"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame9"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame10"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame11"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame12"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame13"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame14"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame15"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame16"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame17"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame18"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame19"></FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/btnSave"
android:text="Save"
android:visibility="gone"
android:layout_margin="10dp"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Data is Already saved "
android:visibility="gone"
android:textSize="28sp"
android:textStyle="bold"
android:layout_marginTop="20dp"
android:textColor="#color/white"
android:typeface="sans"
android:gravity="center_horizontal|center_vertical"
android:id="#+id/tvNoData"/>
</LinearLayout>
</ScrollView>
fragments are one below other like frag1 then frag2 etc.
Now my question is when my first fragment visibility is gone then the second fragment comes at the top but it goes up.means we cant see the second fragment from the top we have to scroll up to see the top portion of the second fragment.
I tried using things like..
scroll_view.pageScroll(View.FOCUS_UP) ;
also
scroll_view.fullScroll(View.FOCUS_UP) ;
and
scroll_view.smoothScrollTo(0,0);
but none worked for me

/Just Simply try to use NestedScrollView instead of ScrollView/
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- <include layout="#layout/project_content_main" />-->
Note: Include you LineaeLayout like above example.
</android.support.v4.widget.NestedScrollView>
And don't forget to add android support design Library in Builf.gradle file
compile 'com.android.support:design:your_version'

Try puting this in your scrollView xml tag
android:descendantFocusability="beforeDescendants"

Custom view in fragment overlap other fragment on samsung device

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>

Snackbar makes RecyclerView within CoordinatorLayout slide up when it shows

I'm testing the use of Snackbar for the first time and I'm finding a behaviour which I don't understand. My Activity is composed of a Fragment, which is composed of a FrameLayout with a RecyclerView. I'm using Toolbar and Appbar.
When the Snackbar appears it moves the recyclerView up, I don't want it to behave like this, I want the Snackbar to show OVER the RecyclerView without moving it. I can however remove this from the Layout that contains the fragment:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
and then the Snackbar displays as I intend it to but of course my fragment overlaps with the Toolbar. I'm new to CoordinatorLayout so I fail to see how to get the behaviour I want. My full code is below.
My activity:
<? xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/master_coordinator_layout"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar_home"
layout="#layout/toolbar_default"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/randomizerFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<FrameLayout
android:id="#+id/randomizerScreenFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone">
</FrameLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/randomizeFAB"
android:src="#drawable/ic_play_arrow_white_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
app:backgroundTint="#color/myYellow"
app:fabSize="normal"
app:layout_anchor="#id/randomizerFragment"
android:scaleType="center"
app:layout_anchorGravity="top|right"
android:visibility="invisible" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/resetFAB"
android:src="#drawable/ic_replay_white_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
app:backgroundTint="#color/myOrange"
app:fabSize="mini"
app:layout_anchor="#id/randomizerScreenFragment"
android:scaleType="center"
app:layout_anchorGravity="top|right"
android:visibility="invisible" />
</android.support.design.widget.CoordinatorLayout>
My fragment:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
tools:context=".RandomizerActivity"
android:orientation="vertical"
android:animateLayoutChanges="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/factionsRecyclerView"
android:paddingTop="#dimen/margin_small"
android:layout_width="match_parent"
android:clipToPadding="false"
android:layout_height="wrap_content"/>
</LinearLayout>
I'm using the Snack like thus, fL being the FrameLayout #+id/randomizerFragment.
Snackbar.make(fL, "hey!", Snackbar.LENGTH_SHORT).show();
Any help is welcome.

Application blinks when adding MapFragment

I have a multipane main activity.Its layout is
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="#dimen/multipane_half_padding"
android:layout_weight="2"
android:background="#drawable/grey_frame"
android:orientation="vertical" >
<fragment
android:id="#+id/fragment_navigation"
android:name="com.armsoft.mtrade.fragments.NavigationFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<FrameLayout
android:id="#+id/fragment_container_detail"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="#dimen/multipane_half_padding"
android:layout_weight="5"
android:background="#drawable/grey_frame" />
And than I add another fragment to fragment_container_detail with
<FrameLayout
android:id="#+id/planned_routes_map_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<com.armsoft.mtrade.widget.BidirectionalDatePicker
android:id="#+id/bidirectional_date_picker"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/planned_routes_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
layout.
When pressing menu item I add a MapFragment to planned_routes_map_container
and my application starts blinking.
How can I fix this problem?