i have this coordinator layout. Currently, i when i collapse the image, the supportActionBar title gets shown at the top. But, how do I have a textView in the toolbar AND menu options show up in my toolbar, when i collapse the image?
Here is my layout not collapsed.
I want my toolbar textview and my optionsMenu "Edit" button to show up whether the toolbar is collapsed or not.
And this is when i collapse the image.
So my supportActionBar text shows up when image is collapsed. I dont want it appearing infront my image when the image is not collapsed.
Here is my xml code:
<?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"
tools:ignore="RtlHardcoded"
android:focusable="true"
android:focusableInTouchMode="true"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--ViewPager goes here-->
<android.support.v4.view.ViewPager
android:id="#+id/image_viewpager"
android:layout_width="match_parent"
android:layout_height="256dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="parallax"
android:id="#+id/card_info_polished_toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Card Info"
android:textColor="#color/white"
android:textSize="20dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activity_5a_card_info_final_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
And here is my activity java code:
In onCreate i have:
myToolbar = (Toolbar) findViewById(R.id.card_info_polished_toolbar);
setSupportActionBar(myToolbar);
//getSupportActionBar().setDisplayShowTitleEnabled(false);
//IF you use setSupportACtionBar, then you cannot use a textView for the title, the title is hidden. This is the only way to change it...
Spannable text = new SpannableString("Sample Card info");
text.setSpan(new ForegroundColorSpan(Color.WHITE), 0, text.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
getSupportActionBar().setTitle(text);
getSupportActionBar().setHomeButtonEnabled(true);
And then for my edit button on the toolbar i have:
public void editButtonClick(MenuItem item)
{
Intent i = new Intent(CardInfo_Polished.this, EditCardInfo.class);
startActivity(i);
}
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu_card_info,menu);
if(Global_Class.getInstance().getValue().clickedCard.getCreatorName() == null || Global_Class.getInstance().getValue().user.getUsername() == null)
{
menu.getItem(0).setVisible(true);
}
//Code for later.
/*if(Global_Class.getInstance().getValue().cardClicked.getUser_id().equals(Global_Class.getInstance().getValue().currentUserOUTDATED.getUUID()))
{
menu.getItem(0).setVisible(true);
}
else
{
menu.getItem(0).setVisible(false);
}*/
return true;
}
Use like this:
<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">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Toolbar Title"
android:textColor="#ffffff"
android:textSize="22dp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
I actually figured out. All you have to do is add this one line of code. inside toolbar.
app:layout_collapseMode="pin"
What i had was this:
app:layout_collapseMode="collapse"
This is an Example ...U can figure out using this...Hope if u can...else u can ask me
Layout of app bar layout only rest node added
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="#dimen/app_bar_height_new"
android:layout_width="match_parent"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TransparentText"
app:collapsedTitleTextAppearance="#style/WhiteText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_main_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:maxWidth="500dp"/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_centerInParent="true" />
<com.zl.reik.dilatingdotsprogressbar.DilatingDotsProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:radius="5dp"
android:color="#ffffff"
app:dd_numDots="3"
app:dd_scaleMultiplier="1.5"
android:layout_centerInParent="true"
app:dd_animationDuration="500"
app:dd_horizontalSpacing="4dp"
/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="#style/Base.ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
In Activity:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbarLayout.setTitle("Enter the title Here");
Please check below code
<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="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/scale_300dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.v4.view.ViewPager
android:id="#+id/mPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bottom_shadow" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical|end"
android:orientation="horizontal"
android:padding="#dimen/scale_10dp">
<!--<android.support.v7.widget.AppCompatTextView-->
<!--android:id="#+id/tvBidPrice"-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_weight="1"-->
<!--android:text="Forging Scrap"-->
<!--android:textColor="#color/white"-->
<!--android:textSize="17sp"-->
<!--android:textStyle="bold" />-->
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tvCountry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:drawableLeft="#drawable/india"
android:drawablePadding="#dimen/scale_10dp"
android:padding="#dimen/scale_5dp"
android:text="#string/CountryHint"
android:textColor="#color/white" />
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/AppTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setTitle("Your Title Here")
Related
I am trying to implement CollapsingToolbarLayout just like follows:
But my CollapsingToolbarLayout never opens or collapse. I have referred to this tutorial. Here is my code:
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:background="#FF0"
tools:context=".activities.TasksListActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/tasks_list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:tint="#color/colorPrimary"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here is the java code:
toolbar = findViewById(R.id.toolbar);
collToolbar = findViewById(R.id.collapsing_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onBackPressed();
}
});
collToolbar.setTitleEnabled(false);
collToolbar.setTitle("This is title");
The height for your AppBarLayout has been set to 60dp. Change it to 120dp or something larger and set the title to the toolbar before setting the toolbar as the supportActionBar
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".CollapsingToolbar">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:fitsSystemWindows="true"
android:background="#FF0"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="bottom"
app:expandedTitleTextAppearance="#style/TextAppearance.MaterialComponents.Headline5"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/tasks_list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:tint="#color/colorPrimary"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In your activity's java file
toolbar = findViewById(R.id.toolbar);
collToolbar = findViewById(R.id.collapsing_toolbar);
toolbar.setTitle("This is title");
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onBackPressed();
}
});
Hope this helps!
Set your AppBarLayout height to something larger - 60dp is very close to the standard toolbar height of 56dp.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="60dp" <-- Change to something larger (i.e. 240dp)
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:elevation="0dp">
I am using CollapsingToolbarLayout for my activity. Is there a way to pin RelativeLayout that contains Toolbar within instead of pinning Toolbar? I tried to do the following but the RelativeLayout does not pin on top when layout collapses.
<?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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/pale_red"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.v4.view.ViewPager
android:id="#+id/carViewPager"
android:layout_width="match_parent"
android:layout_height="230dp"/>
<LinearLayout
android:id="#+id/image_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="bottom|center"
android:background="#android:color/transparent" />
</FrameLayout>
<RelativeLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/activityTitle"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:textSize="16sp"
android:text="#string/shop_info"
android:textColor="#color/white" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_shop" />
</android.support.design.widget.CoordinatorLayout>
Like its name Collapsing,everthing except Toolbar is going to be collapsed when scroll up, the only way to pin it is to use "pin" on ToolBar, and only the ToolBar works with "pin".
Hence try placing your RelativeLayout outside of CollapsingToolBarLayout ,but inside of AppBarLayout, maybe that's what you need.
I solved it through this question:
How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
just treat your layout as the TabLayout mentioned in this question.
Hope it helps.
I have a Collapsing Toolbar in my app.
I use a NavigationDrawer and switch between the items with different fragments, while replacing a FrameLayout, and leaving the Toolbar across the app.
One of the fragments has a tab layout.
When I show that fragment it is shown underneath the Toolbar, with the Toolbar shadow overlapping it.
I want it to be on the same level with the Toolbar, and to look and act like it is in the same AppBarLayout.
Also, I want to make the tabs transparent when the Toolbar is expanded.
How do I reorganize my layouts so that this will work?
Here is my 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 with 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 will be appreciated.
Thanks.
You should make a strucure 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"
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 from here
Also see this answer it explained well there.
If you want further explaination then 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/
I had a similar problem.
I solved removing the elevation of the ActionBar while showing the fragment with the undesired shadow.
I added this two methods in the Activity:
public void setToolbarElevation(){
if (Build.VERSION.SDK_INT >= 21){
if (toolbar!=null) {
toolbar.setElevation(getResources().getDimensionPixelSize(R.dimen.actionbar_elevation));
}
}
}
public void removeToolbarElevation(){
if (Build.VERSION.SDK_INT >= 21){
if (toolbar!=null) {
toolbar.setElevation(0);
}
}
}
So when you call the fragment with the tabs, you call the removeToolbarElevation() in the activity and the shadow should disappear.
Let me know if it works for you.
When I show that fragment it is shown underneath the Toolbar, with the Toolbar shadow overlapping it.
I want it to be on the same level with the Toolbar, and to look and act like it is in the same AppBarLayout.
for this give the same elevation to the tab layout as per the material design guidelines described here default elevation is 4 dp. so try giving the tab layout elevation
Also, I want to make the tabs transparent when the Toolbar is expanded.
for this add a class like this
public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
public enum State {
EXPANDED,
COLLAPSED,
IDLE
}
private State mCurrentState = State.IDLE;
#Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
if (mCurrentState != State.EXPANDED) {
onStateChanged(appBarLayout, State.EXPANDED);
}
mCurrentState = State.EXPANDED;
} else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
if (mCurrentState != State.COLLAPSED) {
onStateChanged(appBarLayout, State.COLLAPSED);
}
mCurrentState = State.COLLAPSED;
} else {
if (mCurrentState != State.IDLE) {
onStateChanged(appBarLayout, State.IDLE);
}
mCurrentState = State.IDLE;
}
}
public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}
then in your activity use it like
appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
#Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
Log.d("STATE", state.name());
//if state is expanded then set your tab layout background to transparent
}
});
You have go through this. As I am refering this Blog.
It is combination of what you have require means the combination of DrawerLayout + Fragments + CollapsingToolbarLayout.
activity_main.xml
<?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:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<FrameLayout
android:id="#+id/content_main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
Output :
Thank you everyone for all the input.
What I ended up doing, is this:
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="256dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleGravity="right"
app:expandedTitleGravity="bottom|right"
app:expandedTitleMarginBottom="50dp"
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:background="#drawable/soldier" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
app:titleTextColor="#color/White"
android:fitsSystemWindows="true"
android:layout_gravity="right"
android:layoutDirection="rtl"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorHeight="3dp"
android:layoutDirection="ltr"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/White"
app:tabTextColor="#color/Black"
app:tabMode="fixed"
app:tabGravity="fill" />
</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.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" />
</android.support.v4.widget.DrawerLayout>
Then, when I switch the fragments, I show the tabs only on the fragment that I want them in, and hide them when I don't want them to show:
toolbar_layout.SetExpanded(true);
tabs.Visibility = ViewStates.Gone;
And when I want to show them:
toolbar_layout.SetExpanded(false,false);
tabs.Visibility = ViewStates.Visible;
Although I don't get them transparent, but I decided to just collapse the toolbar when I show them, and disable expanding it on the fragment with the tabs.
Maybe not the best solution, but it works pretty well for me.
These links really helped me:
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
- http://blog.iamsuleiman.com/material-design-tabs-with-android-design-support-library/
- How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
- http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/
- Disable Scrolling in child Recyclerview android - How to disable expanding the toolbar on the fragment with the tabs (that also contains a recyclerview).
See what it looks like here:
https://youtu.be/y2xLVSQ_NGM
It may not be the best solution, but I wanted a cleaner way that looks good.
Thank you all for your help!
I am trying to get the title of the Collapsed Toolbar to the center. But there seems to be some bug in the basic layout itself. The title has an offset for some reason.
Unable to figure out how to fix this. Also there seems to be no property to apply negative margin/padding to the collapsedTitle.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/XXXXAppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top|center_horizontal"
app:expandedTitleMarginTop="-10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="REGISTER">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/XXXXAppTheme.PopupOverlay"/>
<ImageView
android:id="#+id/ivContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/white_background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/flContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Try this within your "Toolbar"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/color"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
To make it centered, please follow the steps:
To use a custom title in your Toolbar all you need to do is remember
is that Toolbar is just a fancy ViewGroup so you can add a custom
title like so:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
This means that you can style the TextView however you would like
because it's just a regular TextView. So in your activity you can
access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
From: Android toolbar center title and custom font
To remove the default app name title, do this:
setSupportActionBar(toolbar_top);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Hope it help
You should use this. To add TextView in side Toolbar
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="130dp"
android:id="#+id/toolbar">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
I have implemented CollapsibleToolbarLayout as below.
<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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="40dp"
app:expandedTitleMarginStart="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgPoster"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:background="#drawable/place_holder_land" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/detailsGradient" />
<ImageView
android:id="#+id/play"
android:layout_width="wrap_content"
android:visibility="invisible"
app:layout_collapseMode="parallax"
android:layout_gravity="center"
android:src="#drawable/ic_play_movie"
android:layout_height="wrap_content" />
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...LinearLayout omitted...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_file_download"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
I add the image view in a framelayout in the toolbar so that i can have a overlay on the image and a gradient to make the toolbar text visible on some images
But this color line is coming just below the image (see screenshot) on adding the framelayout. If I remove the line
android:fitsSystemWindows="true"
from appbarlayout then the the color line disapperas but toolbar also scrolls away from the view...
Also to show the back button on the toolbar I have added the below code in OnCreate still it does not show
toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.anim_toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.Title = content.Title;
toolbar.SetNavigationIcon(Resource.Drawable.ic_action);
collapsingToolbar = FindViewById<CollapsingToolbarLayout>(Resource.Id.collapsing_toolbar);
collapsingToolbar.SetTitle(content.Title);
Thanks...
OK got it now had to remove
android:fitsSystemWindows="true"
from
<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">
everything good now
Thanks
Consider adding a fixed width to your app bar layout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">