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
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"/>
My problem with bottom sheet in Android is that when I am scrolling up the sheet it fills the whole activity.
I need my bottom sheet to come to a stop at a certain height.
Below is my code:
activity_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"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click here"
tools:layout_editor_absoluteX="161dp"
tools:layout_editor_absoluteY="272dp"
tools:ignore="MissingConstraints" />
<include
layout="#layout/bottom_sheet"
android:layout_height="79dp" />
</android.support.design.widget.CoordinatorLayout>
MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout = (LinearLayout)findViewById(R.id.linearlayour);
bottomSheetBehavior = BottomSheetBehavior.from(linearLayout);
bottomSheetBehavior.setPeekHeight(200);
}
Below is my bottom_sheet.xml file:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:id="#+id/linearlayour"
app:behavior_peekHeight="100dp">
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_weight="1"
android:text="Inside bottom" />
I need my bottom sheet to come to stop at a certain height. I am not able to make it work like that. Please help. Thanks in advance
Use a CollapsingLayout above your main layout like this
<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:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And then put your scrolling layout with the attribute -
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Use the peekHeight attribute of the bottomsheet to set the maximum height to which it can scroll max
<FrameLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
app:behavior_hideable="false"
app:behavior_peekHeight="200dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<include layout="#layout/bottom_sheet_content_view" />
</FrameLayout>
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.
I am setting the CircularPagerIndicator underneath ViewPager using CoordinatorLayout but it is not displaying. Below is 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="mypackage.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<mypackage.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:radius="5dp"
app:fillColor="#FF888888"
app:pageColor="#88FF0000"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Below method is called my Activity from onCreate Method
private void displayCarts(){
mSectionPagerAdapter = new SectionPagerAdapter(getSupportFragmentManager(), mCartCount, cartMap);
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionPagerAdapter);
mCartCountIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
mCartCountIndicator.setViewPager(mViewPager);
}
Not Sure what's going wrong.
I followed the suggestion from this link : Android CirclePageIndicator not working
but adding an extra Relative or linear layout within coordinator layout jusr to show CircularPagerIndicator does not fit my need. Any suggestions?
In a CoordinatorLayout, the actual scrollable view expands under the screen so on scroll it will shift up as toolbar hides. Anything below that won't be visible. You can try android:layout_gravity="bottom|center_horizontal" to place it at bottom of screen
<application.payrange.com.payrage.ui.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom|center_horizontal"
app:radius="5dp"
app:fillColor="#FF888888"
app:pageColor="#88FF0000" />
Moreover you can place this inside a container an give it a background color to make it look better. Also you can use Behavior to give it scroll effect just like Toolbar
well, for now I am falling back to adding linearlayout for View Pager and PagerIndicator. I added topmargin to the Linearlayout to display the whole view pager. Not the best possible solution , but will do the trick for now.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="mypackage.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout android:layout_width="match_parent"
android:orientation="vertical" android:layout_gravity="center_horizontal"
android:layout_height="match_parent"
android:layout_marginTop="70dp">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingRight="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<mypackage.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:radius="5dp"
app:fillColor="#color/default_circle_indicator_stroke_color"
app:pageColor="#color/circlepageindicator_fill_color"
android:layout_margin="#dimen/fab_margin"/>
</LinearLayout>>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>