Im currently trying to get the title from collapsingtoolbarlayout as textview. I want to do an shared element transition between an item in a recyclerview in a previous activity. The title from the item in the recyclerview should be translated to my collapsingtoolbarlayout title.
In activity A i have a recyclerview with that list layout:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/row_container"
android:layout_height="220dp"
android:layout_width="match_parent"
android:layout_margin="5dp"
card_view:cardBackgroundColor="#282828"
card_view:cardCornerRadius="3dp"
android:foreground="?attr/selectableItemBackground"
android:elevation="3dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
>
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="2dp"
/>
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="invisible"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/item_top"
android:layout_gravity="top"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="3dp"
android:padding="5dp"
>
<TextView
android:id="#+id/title"
android:textColor="#d3d3d3"
android:textStyle="bold"
android:maxLines="1"
android:gravity="left|top"
android:textSize="15sp"
android:elevation="3dp"
android:ellipsize="end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text"
android:textColor="#d3d3d3"
android:elevation="3dp"
android:gravity="left|top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
And the #id/title should animate to the collapsingtoolbarlayout title of this activity B:
<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/rootlayout"
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="150dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="28dp"
app:expandedTitleMarginEnd="20dp"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:id="#+id/toolbar_image"
android:visibility="invisible"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:transitionName="toolbar_image"
app:layout_collapseMode="parallax"
/>
<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"
app:layout_collapseMode="pin"
app:elevation="0dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#252525"
>
...
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Any suggestions?
If your item is:
<RelativeLayout>
<TextView
...
android:transitionName="#string/transition_name"/>
</RelativeLayout>
and the Detail Activity:
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout
...
android:minHeight="100dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<Toolbar
android:title=""
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
...
android:transitionName="#string/transition_name"/>
</Toolbar>
</CollpasingToolbarLayout>
</AppBarLayout>
<RecyclerView
...
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</CoordinatorLayout>
Here the catch is transitionName element which is common property in both the activity's TextView, and both the names should be same. That is all for the XML work.
In Java,
Intent i = new Intent(MainActivity.this, DetailsActivity.class);
View sharedView = textview;
String transitionName = getString(R.string.transition_name);
ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
startActivity(i, transitionActivityOptions.toBundle());
Please refer to the best documentation in detail here:
https://github.com/lgvalle/Material-Animations
Read about intents from the Android developers page or any tutorial online.
Create an intent to the new activity on the click of RecyclerView item in the previous activity.
Use .putExtra() to transmit the name of the item as a string through the intent
In the new activity onCreate() method, use:
.getStringExtra()
String title = intent.getStringExtra("title_name");
tv = (TextView)findViewById(R.id.textview);
tv.setText(title);
This is a generic code. Modify accordingly.
I hope this is what you required.
As far as I've looked into the collapsing toolbar code, being it only a wrapper for toolbar, and the setTitle() function it has, it only sets a collapsingtexthelper which implements a charsequence, and uses it to display in a view in the layout.
There is no textview as far as I have seen in the code.
Related
I am trying to achieve something with collapsible toolbar layout and I have 2 tabs with a viewPager2
Below are two images for example for the case of expanded screenshot and collapsed screenshot.
Below is the code I have in XML not sure where it is going wrong... my scroll is not working proper in this case. I want the toolbar to be stick on top when collapsed
I tried adding toolbar inside AppbarLayout but that didn't worked.
Also tried below links
somehow not working for me Link1 Link2
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_dark_blue">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white_cream_darkest_blue"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:windowSoftInputMode="adjustResize">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_cream_darkest_blue"
app:collapsedTitleTextAppearance="#color/text_color"
app:contentScrim="#color/white_cream_darkest_blue"
app:expandedTitleTextAppearance="#color/text_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/white_cream_darkest_blue">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginTop="40dp"
android:layout_marginEnd="#dimen/margin_end"
android:orientation="vertical">
<TextView
android:id="#+id/textViewTitle"
style="#style/screen_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:text="Mailing\nAddress"
android:textColor="#color/text_color" />
<TextView
android:id="#+id/textViewSubTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto_light"
android:text="We'll send your bill to this address."
android:textAlignment="center"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="30dp" />
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
android:windowSoftInputMode="adjustResize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/text_service"
app:title="">
<TextView
android:id="#+id/menuOption"
style="#style/screen_sub_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_medium"
android:text="Mailing Address"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:clipToPadding="false"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayoutMailingAddress"
style="#style/tabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
app:layout_constraintTop_toTopOf="parent"
app:tabInlineLabel="true"
app:tabTextAppearance="#style/MyCustomTextAppearance" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPagerMailingAddress"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent="1.2"
app:layout_constraintTop_toBottomOf="#+id/tabLayoutMailingAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
ViewPager2 won't work well inside NestedScrollView as its inner RecyclerView enables the nested scrolling by default.
To fix the misbehavior, you need to disable this nested scrolling of the ViewPager2 RecyclerView programmatically as it's not accessible in layout:
Kotlin:
viewPager.children.find { it is RecyclerView }?.let {
(it as RecyclerView).isNestedScrollingEnabled = false
}
Java:
for (int i = 0; i < viewPager.getChildCount(); i++) {
View child = viewPager.getChildAt(i);
if (child instanceof RecyclerView) {
((RecyclerView) child).setNestedScrollingEnabled(false);
break;
}
}
I've implemented a tab layout in my app. And have created 3 fragments for each tab. All fragments contain a single TextView and it is a child of NestedScrollView. Everything works as expected until the string passed to the TextView is large enough and needs to be scrolled for viewing it completely. At that time, the text inside TextView hides behind the tabs.
I've tried the answers provided here: Fragment from View Pager hiding behind Tab Bar
to no avail.
Here's my code:
<?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=".PrayerActivity">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.BuddhaPoojapathMarathi.AppBarOverlay">
<!--<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />-->
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And here's one of the fragments:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Fragment_1">
<TextView
android:id="#+id/frag1_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/text_margin"
android:textSize="#dimen/text_medium"
android:layout_gravity="center"
android:textAlignment="center"
android:textColor="#color/black"
android:paddingTop="48dp"
android:text="#string/buddha_vandana_mar" />
</androidx.core.widget.NestedScrollView>
As seen in the image the first part of the text is hiding behind the tabs.
Update:
PrayerActivity.java
public class PrayerActivity extends AppCompatActivity {
private ActivityPrayerBinding binding;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
int num = getIntent().getIntExtra("num", 0);
Bundle bundle = new Bundle();
bundle.putInt("num", num);
Log.d("myInt", String.valueOf(num));
binding = ActivityPrayerBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager(), num);
ViewPager viewPager = binding.viewPager;
viewPager.setAdapter(sectionsPagerAdapter);
TabLayout tabs = binding.tabs;
tabs.setupWithViewPager(viewPager);
}
}
I would suggest you to use RelativeLayout instead CoordinatorLayout. First, Change the layout to RelativeLayout. Second, add attribute id to the AppBarLayout. Last, add attribute layout_below to ViewPager. You can see at below. I did not test the code.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PrayerActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.BuddhaPoojapathMarathi.AppBarOverlay">
<!--<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />-->
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
just put this line in NestedScrollView
android:fillViewport="true"
Please use below code.
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activity.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:background="#color/black"
android:layout_gravity="center"
android:layout_height="#dimen/_40sdp">
<ImageView
android:id="#+id/back_btn"
android:layout_width="#dimen/_26sdp"
android:layout_height="#dimen/_26sdp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginLeft="#dimen/_8sdp"
android:src="#drawable/back_arrow"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:layout_toRightOf="#+id/back_btn"
android:layout_marginLeft="#dimen/_10sdp"
android:padding="#dimen/_8sdp"
android:text="#string/my_listing_text"
android:textSize="#dimen/_14sdp"/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/_1sdp"
android:background="#color/dark_gray"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
app:tabIndicatorColor="#color/white"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
I am having my first contact with expanding/collapsing toolbars. I've got some results following this great tutorial.
Now, I would like (if that's possible) to replace the static title (see title "Anthoriro" below)
for couple of EditTexts so that I have something similar to this
In this case, the text to be shown when the toolbar is collapsed would be the title Project Priorities.
Create your layout like this
<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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_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/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:ems="10"
android:id="#+id/editText2"
android:hint="Title"
android:text="Project"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:ems="10"
android:id="#+id/editText3"
android:layout_below="#+id/editText2"
android:layout_alignLeft="#+id/editText2"
android:layout_alignStart="#+id/editText2"
android:layout_marginTop="28dp"
android:inputType="text"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/mToolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<--Swap this with your scrollable view -->
<android.support.v4.view.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
and that in your activity/fragment set
//Dont forget to find your CoolapsingLayout first :)
//set The custom text
mCollapisngToolbar.setTitle("TEXTTTs");
//Set the color of collapsed toolbar text
mCollapisngToolbar.setCollapsedTitleTextColor(ContextCompat.getColor(this, R.color.White));
//This will set Expanded text to transparent so it wount overlap the content of the toolbar
mCollapisngToolbar.setExpandedTitleColor(ContextCompat.getColor(this, R.color.Transparent));
My layout is being overlapped by the Toolbar. I have to include a 56dp padding to push it down below the toolbar, which makes it awkward to work with (and likely also means I can't use AlignParentTop). The fragment screen (activity_login.xml) is pretty much straight up stock Google-provided code.
(Without Padding)
activity_login.xml
<LinearLayout 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:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.myProject.LoginActivity"
android:id="#+id/login2LinearLayout"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="#+id/login"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/action_sign_in"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
app_bar_main.xml
<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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<include layout="#layout/login" />
<include layout="#layout/activity_login" />
<include layout="#layout/home" />
<include layout="#layout/my_stats" />
<include layout="#layout/settings" />
<include layout="#layout/winners" />
<include layout="#layout/about" />
<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="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
Put appbar code and main content code in LinearLayout with vertical orientation. That solved problem for me.
Here is my 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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:layout_margin="10dp"/>
</LinearLayout>
<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>
This is very straight forward and easy. Just follow what I tried to say below.
You replace any View by using:
**
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
**
//Here, blackFragment is id of FrameLayout View. You replace FrameLayout View with Fragment's Layout. Note: It should be FrameLayout or FrameLayout's derivatives Layout.
My whole code is:
1) SettingsActivity.java
**
public class SettingsActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar2);
mToolbar.setTitle("Settings");
//// remove the left margin from the logo
mToolbar.setPadding(2, 0, 0, 0);//for tab otherwise give space in tab
mToolbar.setContentInsetsAbsolute(0, 0);
setSupportActionBar(mToolbar);
// Display the fragment as the main content
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
}
}
**
2) activity_fragment.xml
**
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="horizontal">
<!--scroll|snap-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/statusbar"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout
android:id="#+id/blankFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:orientation="horizontal" />
</FrameLayout>
**
You can see my Screen after I replaced FrameLayout's View with Fragment's View
I think the most simple solution in this situation is just add below line to linear_layout inside of activity_login.xml
app:layout_behavior="#string/appbar_scrolling_view_behavior"
consider using this
int horizontalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int verticalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int topMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int) getResources().getDimension(R.dimen.activity_vertical_margin) + 30, getResources().getDisplayMetrics());
LinearLayout layout = (LinearLayout) getListView().getParent().getParent();
getListView().setPadding(horizontalMargin, topMargin, horizontalMargin, verticalMargin);
and then you use setupActionBar method to inflate the toolbar
It appears that children of the CollapsingToolbarLayout (a custom FrameLayout) do not adhere to the expected stack behavior of FrameLayouts. I expect the views to be drawn on top of each other in the order they are provided in the XML layout.
In the example below, when collapsing the CollapsingToolbarLayout, the "layout_button_bar" LinearLayout scrolls underneath the "button_follow" and "button_like" buttons. Provided that the LinearLayout is defined after the above mentioned buttons, I expect the LinearLayout to scroll over the two buttons, obscuring them, rather than below them. Is anyone familiar with a workaround?
<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/coordinator_layout"
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="#dimen/collapsible_app_bar_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/background_content_frame"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#drawable/some_image"
app:layout_collapseMode="parallax"/>
<ImageView
android:id="#+id/image_header_gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/scrim_top_bottom_banner"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"/>
<android.support.v7.widget.Toolbar
android:id="#+id/collapsible_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
android:gravity="top"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
<Button
android:id="#+id/button_follow"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_follow"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<Button
android:id="#+id/button_like"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_like"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<LinearLayout
android:id="#+id/layout_button_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/button_bar_height"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#color/slide_handle">
<!-- 3 Buttons -->
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Library: com.android.support:design 23.0.1 | Theme: Theme.AppCompat.NoActionBar
Pre-collapse:
Mid-collapse:
Just wrap the like Button and the follow Button inside a Layout. For example a LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_marginBottom="80dp"
app:layout_collapseMode="parallax">
<Button
android:id="#+id/button_follow"
...
/>
<Button
android:id="#+id/button_like"
...
/>
</LinearLayout>