How can I display viewpager below a layout? - android

I generated a swipe activity. The activity needs to have it's own layout with a view pager underneath
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.mferreira.crm.recordSwipeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_item_view" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
My only issue is at runtime the fragments are displayed inline with the layout itself at the top of the page rather than underneath it


It seems like your issue is because the top-level CoordinatorLayout behaves like a FrameLayout, not a LinearLayout. If you want your #layout/content_item_view and your ViewPager not to be inline with each other, wrap them in a LinearLayout:
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_item_view" />
<android.support.v4.view.ViewPager android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Related

Toolbar overlaps other content

I have a ViewPager that horizontally scrolls through multiple fragments, however, I've added a toolbar but it overlaps the ViewPager content.
I know there are other similar questions asked here, nothing worked for me, unfortunately.
this is the main_view.xml
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</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">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>
Probably I should add another layout somewhere, but I'm not sure where. A hint would be nice, since I've been struggling with this for the last couple of hours.

Implement like this
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appbarlt">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_below="#+id/appbarlt"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>

Give relation to your viewpager with appbar when using Relative Layout.
RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
Try this code:
<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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>

use this in below layout of Toolbar layout
android:layout_marginTop="?attr/actionBarSize"

Can I use a ScrollView inside of an Android Toolbar?

I have a custom view that scrolls vertically using a ScrollView but when I put it inside of an android.support.v7.widget.Toolbar it will no longer scroll. The same thing happens if I use a NestedScrollView too. Is it possible to use a ScrollView inside of a Toolbar? If not, then are there alternative approaches to achieve the same thing?
Here's some example code of what I'm doing:
<?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"
android:fitsSystemWindows="true"
tools:context="com.me.ExampleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<com.me.NormallyScrollableView
android:id="#+id/myView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

In short, not with the AppBarLayout. You have to remove that in order to get the desired scroll inside of the toolbar.
your view hierarchy should be something like this:
<?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"
android:fitsSystemWindows="true"
tools:context="com.me.ExampleActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<com.me.NormallyScrollableView
android:id="#+id/myView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
<!-- Have to create Margin, since AppBarLayout is not first view in Coordinator layout (which it expects) -->
<FrameLayout
android:layout_marginTop="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_width="match_parent">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
But at this point, CoordinatorLayout is useless for this screen in your app...
So to some up, its not possible with the view hierarchy you have setup.
Good Luck and Happy Coding!

I think it's not possible to do that but I suggest to use this
<?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"
android:fitsSystemWindows="true"
tools:context="com.me.ExampleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:padding="#dimen/activity_horizontal_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>

How to use Custom Toolbar in entire app

I have made Toolbar using coordinate toolbar in my app so that i can hide toolbar while scrolling . I also have ViewPager inside it . So when user scroll only Toolbar hides and tabs stick to the top . But in other activity i just want to display toolbar what is the better way to that ?
I am sharing my coordinator layout below
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="#color/white">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/MyTabLayout"
style="#style/TabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabTextAppearance="#style/AppTabTextAppearance">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/MyViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/MyTabLayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
></android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

Create a separate layout for toolbar only.
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/white"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="#color/white">
</android.support.v7.widget.Toolbar>
Then now its in anywhere in your layout.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
layout="#layout/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabLayout
android:id="#+id/MyTabLayout"
style="#style/TabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabTextAppearance="#style/AppTabTextAppearance">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/MyViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/MyTabLayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

If you just want to display Toolbar inside other Activities, you can add the Toolbar to any root layout of the respective Activity like LinearLayout or RelativeLayout (which ever suits your app's needs).

Android, TabLayout miscalculates height, won't show bottom of layout

I'm working on a tab activity in my app, but it seems that the tabs are using the wrong height (thinking the layout is about half an inch taller than it is on any device) and as a result any vertical centering is off on the low side, and my scrollviews are messed up because the screen won't scroll far enough down to see the bottom of the view. I have tried tinkering with the layout_height on any relevant class I can think of and hiding the tabs, but nothing helps and I cant find this problem anywhere else. I generated the default template for a TabLayout activity in Android Studio 1.4.
activity_main
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/colorPrimaryDark" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_youtube_searched_for_white_18dp"
android:visibility="gone"/>
</android.support.design.widget.CoordinatorLayout>
fragment_main
<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:background="#color/white"
tools:context="com.example.ggould.flyingfood.HistoryFragment">
<LinearLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//other stuff
</LinearLayout
</ScrollView>

On activity_main you can create a RelativeLayout. Put your ViewPager and AppBarLayout inside RelativeLayout and set your ViewPager like this:
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"/>

<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
you have to wrap content for the widget.toolbar

AppBarLayout doesn't scroll after update to design library 22.2.1, if RecyclerView is inside LinearLayout

after updating the design library to v22.2.1 my activity layout won't scroll anymore. It was working fine prior to the update. The layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
style="#style/layout.content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
style="#style/layout.content.root"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/progress_bar"/>
<LinearLayout
android:id="#+id/content"
style="#style/layout.content.root">
<include layout="#layout/layout_search_cities"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
style="#style/layout.match"
android:scrollbars="vertical"/>
</LinearLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
The only thing I could figure out is that if I change the recyclerView's parent from LinearLayout to FrameLayout everything is working fine:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
style="#style/layout.content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
style="#style/layout.content.root"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/progress_bar"/>
<FrameLayout
android:id="#+id/content"
style="#style/layout.content.root">
<include layout="#layout/layout_search_cities"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
style="#style/layout.match"
android:layout_marginTop="?attr/actionBarSize"
android:scrollbars="vertical"/>
</FrameLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
What am I missing?

It turns out that this was an issue with v22.2.1; I fixed it by advancing to design library v23.0.0.

Categories

Resources