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.

Recycle View had the half of the height

I have a problem with this Recycle View on this layout, it don't take the complete height of your father container.
I used the weight parameters, but that is not the problem i think.
Check the code and Print screen.
Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<android.support.v7.widget.RecyclerView
android:id="#+id/subjects"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layoutManager="android.support.v7.widget.GridLayoutManager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="horizontal"
tools:listitem="#layout/item_subject_tab" />
<RelativeLayout
android:id="#+id/usageStatusListContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:background="#color/colorLight">
<ListView
android:id="#+id/chapters"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/colorLight"
tools:listitem="#layout/item_chapter_usage_status"/>
</RelativeLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Layout

LinearLayout child pushes other views

My activity's main layout is a LinearLayout. It has two children as an example. A RelativeLayout and a Button. The width and height of RelativeLayout are set to match_parent and the Button, match_parent and wrap_content. Unfortunately, RelativeLayout pushes the button below until it is not visible.
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Why is this happening? I tried a tweak for the RelativeLayout which is changing the height to 0dp and weight to 1. It does make the Button visible but I am not sure if this is advisable as I only changed the height and weight of RelativeLayout.

Try this
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
OR
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_above="#+id/btn"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:src="#drawable/disha"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:text="NIlu"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
</RelativeLayout>
</ScrollView>

LinearLayout is either Vertical or Horizontal. Your first child which is RelativeLayout is matchParent then it will cover whole Outer layout .
Solution can be multiple its depends upon where exactly you want to place your Button . One way is .
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_above="#+id/btn"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
</RelativeLayout>

Change your Code Like
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:text="#string/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Worked Foe me..
you should Give android:layout_weight="1" to relative Layout

//try this
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

this seems to work just fine.
I tried a tweak for the RelativeLayout which is changing the height to
0dp and weight to 1
the code look like this:
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>

In your layout, RelativeLayout is the first child of your LinearLayout. Since, you have set the height and width to match_parent it takes up all available space pushing the button out of the view.
When you set the RelativeLayout height to 0dp and weight to 1, LinearLayout first lays out all children based on the dimensions specified, and then distributes the remaining space based on the weight. In this case, the relative layout is 0dp, so it takes no space in first pass, and the button takes up space based on its onMeasure (lets say 100dp). The remaining space is now given to RelativeLayout because its weight is set to 1. Refer to the LinearLayout documentation for more details here.
You should consider using a RelativeLayout/ConstraintLayout as your root element.

Android: Cannot add Button below Gridview

I want to add a button just below gridview. It just not sure, p.s. this framelayout is inside another framelayout (base container). I have tried to set heigh=0dp and weight=1, but no luck. please help :) thx
Here is my code,
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/baseContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:ads="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_recent_swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_recent_gridview"
android:numColumns="auto_fit"
android:gravity="center"
android:stretchMode="columnWidth"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:listSelector="#00000000"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<Button
android:id="#+id/recent_filterBtn"
android:layout_width="match_parent"
android:layout_height="34dp"
android:text="my button"
android:textColor="#drawable/button_text_color2"
android:textSize="12dp"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>

Put :
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_recent_swipeRefreshLayout"
android:weight = "1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
And remove the weight tag from the GridView

"layout_alignParentBottom" does not work in the Layout

I was adding a Bottom Bar below the ViewPager (on the bottom of the screen) by using include but it does not work. I have tried all the methods by adding LinearLayout/ RelativeLayout to wrap the include tag, even ViewPager; or adding code like layout_alignParentBottom=true, layout_gravity=bottom.
Is there any method to put it at the bottom, or any problem in my code?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee"
android:orientation="vertical" >
<include layout="#layout/Bottom_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
<android.support.v4.view.ViewPager
android:id="#+id/id_viewpager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
</LinearLayout>

just try like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="#layout/Bottom_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"/>
<android.support.v4.view.ViewPager
android:id="#+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
</RelativeLayout>

Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/id_viewpager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
<include layout="#layout/Bottom_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
LinearLayout draws every child by the order it is declared, so if Bottom_bar is declared before id_viewpager, it will draw above ViewPager. If you switch the order, you'll get what you want.