I am new to android. I am trying to implement Scrolling thing like that of twitter's profile activity. Tweets, Photos and Favorites are in tabs, above the tabs there is basic profile data such as name, about, location with two pictures and also a button. When it is scrolled that part gets hidden and tabs are snapped up at top now you can go through tweets and when you scroll down it comes back.
I have added tabs to my activity. Every tab is loaded via fragments. I added tabs using PagerView.
here's my activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/action_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="120dp"
android:id="#+id/cover"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/image"
android:scaleType="fitXY"
android:background="#drawable/image_background"/>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/profile"
android:layout_marginTop="80dp"
android:layout_alignTop="#+id/cover"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:src="#drawable/image"
android:background="#drawable/image_background"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_marginLeft="20dp"
android:layout_marginStart="30dp"
android:layout_marginRight="20dp"
android:layout_alignBottom="#+id/profile"
android:layout_toRightOf="#+id/profile"
android:layout_alignRight="#+id/cover"
android:textSize="20sp"/>
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/linearLayout">
<com.example.vickyzia.activity.Misc.SlidingTabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs"></com.example.vickyzia.activity.Misc.SlidingTabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pager"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>
I want to add that scrolling event to this activity. Is there any way?
Example of a Twitter Like Profile scroll Layout
<?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">
<include layout="#layout/toptoolbar"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/prime_white_1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/spacing_largest"
app:contentScrim="#color/prime_white_1"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
layout="#layout/profile_header_layout"/>
<android.support.v7.widget.Toolbar
android:id="#+id/profile_toolbar_collapse"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:background="#color/transparent">
<android.support.design.widget.TabLayout
android:id="#+id/profile_tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/prime_grey_9"
app:layout_collapseMode="none"
app:tabGravity="fill"
app:tabIndicatorColor="#color/prime_green_1"
app:tabIndicatorHeight="#dimen/spacing_small"
app:tabMode="fixed"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/profile_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
You should use special CollapsingToolbarLayout
Related
I am trying to implement a CoordinatorLayout with a GridView, how ever I'm having trouble with the xml, it doesn't look the way I want it to be. Can someone please help get it right?
The XML:
<?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:background="#android:color/background_light"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/main_screen_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<!--ImageView
android:id="#+id/header_image_id"
android:layout_width="100dp"
android:layout_height="90dp"
android:layout_marginBottom="0dp"
android:src="#drawable/logo"
android:layout_gravity="center_horizontal"/-->
<Button
android:id="#+id/back_to_topics_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:visibility="gone"
android:background="#color/colorBeige"
android:textColor="#color/colorWhite"
android:layout_margin="10dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/search_panel_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layoutDirection="rtl"
android:focusableInTouchMode="true">
<TextView
android:id="#+id/text_view_id"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAlignment="center"
android:text="#string/secondary_title"
android:layout_marginBottom="5dp"/>
<android.support.v7.widget.SearchView
android:id="#+id/search_view_id"
android:layoutDirection="rtl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="#string/search_view_hint"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:queryBackground="#color/colorWhite"/>
</LinearLayout>
<!-- Used to hold the GridView Fragment-->
<FrameLayout
android:id="#+id/fragment_layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search_panel_id"
android:layout_marginTop="10dp"
android:orientation="horizontal">
</FrameLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
As you can see in the image below, my SearchView and the text appear at the top of the screen how ever I want them to appear beneath the blue are. The white area is where I will hold my GridView items, so when I'll scroll the Grid would expend to the top with both the SearchView and the text.
I am trying to add an image at the top of a fragment, it should have parallax effect when scrolled to view image details.
Something like this
I tried to get this using collapsible toolbar, but the issue is that the image is not filling the whole toolbar leaving blank space on sideways if image is in portrait mode. and also no parallax is there.
This is the xml code of what I have done till now.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorlayout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="70dp">
<android.support.design.widget.AppBarLayout
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="fill_parent"
android:id="#+id/actionbarlayout"
android:layout_height="207dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/CollapsingToolbarLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:id="#+id/details_Image"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="3dp"
card_view:cardCornerRadius="7dp"
android:layout_margin="5dp"
android:id="#+id/new_order"
card_view:cardBackgroundColor="#color/cardview_shadow_end_color"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/download"
android:background="#null"
android:src="#drawable/ic_action_ic_file_download_white_36dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/favourite"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/zoom"
android:background="#null"
android:src="#drawable/ic_action_ic_zoom_out_map_white_36dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageDescription"
android:text="Sample text"
/>
</ScrollView>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"
android:id="#+id/fullimage"/>
</android.support.design.widget.CoordinatorLayout>
This is what it looks like now.
Please suggest me what changes I need to make in order to attain what I want, thank you very much in advanced.
Use android:scaleType="centerCrop" for the ImageView
I'm trying to get some details from my movie page to overlap the toolbar but several corner cases keep causing the overlapped content to phase underneath the middle of the toolbar. The latest case that causes this is showing a snackbar. Any information would be helpful because, so far, the overlapTop behavior has been very buggy and aggravating to work with.
Edit: I also use appBarLayout.setExpanded to expand it every time I load a new movie. Not sure if that is important.
Home layout:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.home.HomeActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="200dp"
android:alpha="0.5"
android:contentDescription="#string/backdrop"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/scrolling_view"
app:behavior_overlapTop="80dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_dice_three_48dp"
app:layout_anchor="#+id/frame"
app:layout_anchorGravity="bottom|end"
/>
</android.support.design.widget.CoordinatorLayout>
<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:menu="#menu/menu_home_nav"/>
</android.support.v4.widget.DrawerLayout>
Movie layout:
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
tools:targetApi="lollipop"
tools:ignore="RtlSymmetry">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="16dp"
android:visibility="visible">
<ImageView
android:id="#+id/poster"
android:layout_width="98dp"
android:layout_height="140dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#string/poster"
tools:background="#color/md_white_1000"
/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/poster"
android:layout_above="#+id/phrase"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="bottom"
android:textColor="?attr/titleTextColor"
android:textSize="24sp"
android:textStyle="bold"
android:fontFamily="sans-serif-condensed"
tools:text="Title"/>
<TextView
android:id="#+id/phrase"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#+id/poster"
android:layout_alignBottom="#+id/poster"
android:paddingTop="16dp"
android:gravity="top"
android:textSize="18sp"
android:textStyle="italic|bold"
android:fontFamily="sans-serif-condensed"
tools:text="Good vs Evil" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="140dp">
<include layout="#layout/card_movie" />
</FrameLayout>
</RelativeLayout>
<android.support.v4.widget.ContentLoadingProgressBar
android:id="#+id/loading"
style="?android:progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:progressBackgroundTint="#color/md_white_1000"
android:padding="32dp"
android:visibility="invisible"
tools:targetApi="lollipop" />
<RelativeLayout
android:id="#+id/error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="invisible">
<TextView
android:id="#+id/error_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="32dp"
/>
<Button
android:id="#+id/error_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/error_message"
android:layout_centerHorizontal="true"
android:text="#string/recycle"/>
</RelativeLayout>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
Solved it. I was setting my two other views, loading and error, to View.INVISIBLE whenever I showed the content. Setting them to View.GONE fixed it.
Although you got solution by your own that's great but if you want some more knowledge and want to know something more about these issues that could happen and why these issues happening with Coordinator layouts is fully described in this blog post here, I found it pretty useful so i recommend you to read it.
My collapsingtoolbar layout consists of an image. I want that image to be stopped scrolling before say 270dp and then only scroll the remaining content.
I had already followed 2 answers on Stackoverflow but that doesn't seems to work for me.
How to Stop scroll on CollapsingToolbarLayout so it doesn't completely collapse
How to Stop scroll on CollapsingToolbarLayout so it doesn't completely collapse
Layout xml
<?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="wrap_content"
android:animateLayoutChanges="true">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_imgview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/app_bar_layout"
android:background="#ffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_shadow_height"
android:background="#drawable/shape_shadow" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff"
android:weightSum="1.0">
<Button
android:layout_width="0dip"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dp"
android:layout_weight=".5"
android:background="#drawable/button_bg"
android:text="Set Wallpaper"
android:textColor="#ff4081"
android:textSize="12dp" />
<Button
android:layout_width="0dip"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight=".5"
android:background="#drawable/button_bg_dw"
android:text="Download"
android:textColor="#FFFF"
android:textSize="12dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="?attr/dividerHorizontal" />
<include
layout="#layout/activity_details"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
I have tried setting the height of AppBarLayout as 280dp but it was of no use.
I'm setting image through Universal Image Loader.
I have a CoordinatorLayout with an AppBarLayout and a CollapsingToolbarLayout. In CollapsingToolbarLayout I'm using a LinearLayout showing user info as a layout_collapseMode=parallax element, below of it, a TabLayout.
The behaviour that I expect is a smooth hiding of the user info while the TabLayout is scrolling up or down.
The problem is that the items positions are reset when I scroll down a bit, hiding entirely the user info 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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/home_green_gradient"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<!-- user info -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="244dp"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="horizontal"
app:layout_collapseMode="parallax">
<LinearLayout
android:id="#+id/profile_store_index_layout"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="40dp"
android:layout_marginTop="44dp"
android:layout_toLeftOf="#+id/profile_imageview"
android:background="#drawable/home_small_circle_background"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_store_white_18dp"
android:tint="#color/up_green"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="100%"
android:textColor="#color/white_color"
android:textStyle="bold"/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_imageview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:src="#drawable/dummy_worker_office"
app:border_color="#color/dark_green"
app:border_width="6dp"/>
<TextView
android:id="#+id/profile_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_imageview"
android:gravity="center_horizontal"
android:text="Juan Rojas Torres"
android:textColor="#color/white_color"
android:textSize="18sp"/>
<TextView
android:id="#+id/profile_company_executions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_name"
android:gravity="center_horizontal"
android:text="User name"
android:textColor="#color/dark_green_text"
android:textSize="12sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_company_executions"
android:src="#drawable/bottom_image"/>
</RelativeLayout>
<!-- Tabs at bottom -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/fragment_fragment_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/dark_green"
app:layout_collapseMode="pin"
app:tabGravity="fill"
app:tabIndicatorColor="#color/frogmi_indicator_color"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/frogmi_white_color"
app:tabTextColor="#color/frogmi_non_selected_green_text"/>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/fragment_fragment_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
```