Android tabs in fragment with collapsing toolbar -
i have collapsing toolbar in app. use navigationdrawer , switch between items different fragments, while replacing framelayout, , leaving toolbar across app.
one of fragments has tab layout.
when show fragment shown underneath toolbar, toolbar shadow overlapping it.
want on same level toolbar, , , act in same appbarlayout.
also, want make tabs transparent when toolbar expanded.
how reorganize layouts work?
here xml:
main xml:
<android.support.v4.widget.drawerlayout 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:layout_gravity="right" android:clickable="true" android:layoutdirection="rtl" android:fitssystemwindows="true" android:id="@+id/drawer_layout"> <android.support.design.widget.coordinatorlayout android:id="@+id/maincoordinatorlayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layoutdirection="rtl" android:background="#eeeeee" android:clickable="true"> <android.support.design.widget.appbarlayout android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/toolbar_layout"> <android.support.design.widget.collapsingtoolbarlayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="250dp" app:collapsedtitlegravity="right" android:fitssystemwindows="true" app:layout_scrollflags="scroll|exituntilcollapsed" app:contentscrim="?attr/colorprimary" app:collapsedtitletextappearance="@style/collapsedtitletextappearance" app:expandedtitletextappearance="@style/expandedtitletextappearance" app:expandedtitlemarginend="64dp" app:expandedtitlemarginstart="48dp"> <imageview android:id="@+id/headerimage" android:layout_width="match_parent" android:layout_height="match_parent" android:fitssystemwindows="true" android:scaletype="centercrop" app:layout_collapsemode="parallax" android:src="@drawable/soldier" /> <view android:layout_width="match_parent" android:layout_height="88dp" android:background="@drawable/scrim_top" app:layout_collapsemode="pin" /> <view android:layout_width="match_parent" android:layout_height="88dp" android:layout_gravity="bottom" android:layout_alignbottom="@+id/headerimage" android:background="@drawable/scrim_bottom" /> <android.support.v7.widget.toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionbarsize" android:theme="@style/whitetitle" app:layout_scrollflags="scroll|enteralways" app:titletextcolor="@color/white" android:fitssystemwindows="true" android:layout_gravity="right" android:layoutdirection="rtl" app:layout_collapsemode="pin" /> </android.support.design.widget.collapsingtoolbarlayout> </android.support.design.widget.appbarlayout> <framelayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/content_frame" android:animatelayoutchanges="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v4.widget.nestedscrollview android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:fillviewport="true" /> </framelayout> <android.support.design.widget.floatingactionbutton android:id="@+id/mainfab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_alignparentleft="true" android:layout_gravity="bottom|end" android:layout_marginleft="16dp" android:layout_marginbottom="16dp" android:layout_margintop="5dp" android:elevation="8dp" app:pressedtranslationz="12dp" app:backgroundtint="?android:coloraccent" android:src="@drawable/ic_perm_phone_msg_white_24px" /> <linearlayout android:id="@+id/minifabframe" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" android:layout_alignparentleft="true" android:layout_gravity="bottom|end" android:layout_marginleft="20dp" android:layout_marginbottom="80dp" android:padding="0dp"> <android.support.design.widget.floatingactionbutton android:id="@+id/messagefab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_alignparentleft="true" android:elevation="8dp" android:layout_margintop="5dp" android:layout_marginright="0dp" android:layout_marginbottom="5dp" android:layout_marginleft="5dp" app:pressedtranslationz="12dp" app:backgroundtint="?android:colorprimary" app:fabsize="mini" android:src="@drawable/ic_textsms_white_24px" /> <android.support.design.widget.floatingactionbutton android:id="@+id/callfab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_alignparentleft="true" android:layout_margintop="5dp" android:layout_marginright="0dp" android:layout_marginbottom="5dp" android:layout_marginleft="5dp" android:elevation="8dp" app:pressedtranslationz="12dp" app:backgroundtint="?android:colorprimary" app:fabsize="mini" android:src="@drawable/ic_call_white_24px" /> </linearlayout> </android.support.design.widget.coordinatorlayout> <android.support.design.widget.navigationview android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="right" android:id="@+id/nav_view" android:layoutdirection="rtl" app:headerlayout="@layout/header" app:menu="@menu/nav_menu" /> fragment tabs layout:
<linearlayout 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:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fitssystemwindows="true" android:id="@+id/halachot_layout" android:layoutdirection="ltr" android:animatelayoutchanges="true"> <android.support.design.widget.appbarlayout android:layout_height="wrap_content" android:layout_width="match_parent" android:elevation="0dp" android:theme="@style/themeoverlay.appcompat.dark.actionbar"> <com.refractored.pagerslidingtabstrip android:id="@+id/halachottabs" android:layout_below="@id/halachot_layout" android:layout_width="match_parent" android:layout_height="?attr/actionbarsize" android:background="@android:color/transparent" android:fitssystemwindows="true" pstspaddingmiddle="false" app:pstsshouldexpand="true" /> </android.support.design.widget.appbarlayout> <android.support.v4.view.viewpager android:id="@+id/halachotpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </linearlayout> any guidance appreciated.
thanks.
you should make strucure 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" android:id="@+id/main_content" 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="256dp" android:theme="@style/themeoverlay.appcompat.dark.actionbar"> <android.support.design.widget.collapsingtoolbarlayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollflags="scroll|exituntilcollapsed"> <android.support.design.widget.tablayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionbarsize" android:layout_gravity="bottom" app:tabmode="scrollable" app:tabcontentstart="72dp" /> <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/themeoverlay.appcompat.light" app:layout_collapsemode="parallax" /> </android.support.design.widget.collapsingtoolbarlayout> </android.support.design.widget.appbarlayout> <android.support.v4.view.viewpager android:id="@+id/viewpager" 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="8dp" android:src="@drawable/ic_done" app:layout_anchor="@id/tabs" app:layout_anchorgravity="center|left|start" app:fabsize="mini" app:layout_behavior="com.support.android.designlibdemo.scrollawarefabbehavior" app:borderwidth="0dp" /> </android.support.design.widget.coordinatorlayout> taken here
also see this answer explained there.
if want further explaination read these blogs
http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library
http://blog.nkdroidsolutions.com/collapsing-toolbar-with-tabs-android-example
https://lab.getbase.com/nested-scrolling-with-coordinatorlayout-on-android/
Comments
Post a Comment