“Shrink” CardView while scrolling in another view
0
Screenshot
As you can see, the layout is a bit too big for the older device. My idea is to shrink the CardView while the user is scrolling in the white area (ViewPager) to make it bigger. I have seen it working well in another app (can't remember which). I have no idea how I can do it, do I need write it programmatically?
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WordActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="20dp"
android:visibility="gone" />
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="@color/primary_dark"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/wordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/poweredBy"
android:layout_centerInParent="true"
android:layout_marginTop="-12dp"
android:fontFamily="@font/poppins"
android:text="@string/word_title"
android:textColor="@android:color/white"
android:textSize="30sp" />
<TextView
android:id="@+id/wordTranslated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/wordTitle"
android:layout_alignStart="@id/wordTitle"
android:layout_marginTop="-10dp"
android:fontFamily="@font/poppins"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
<TextView
android:id="@+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:fontFamily="@font/bungee_hairline"
android:text="@string/powered"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/cardView">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/primary"
android:elevation="5dp"
app:tabIndicatorColor="@android:color/white"
app:tabIndicatorHeight="2dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@color/white_transparent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
android xml 
android-studio edited Nov 26 '18 at 3:40
shizhen
3,84541336
asked Nov 26 '18 at 3:37
DohmanDohman
95
add a comment |
0
Screenshot
As you can see, the layout is a bit too big for the older device. My idea is to shrink the CardView while the user is scrolling in the white area (ViewPager) to make it bigger. I have seen it working well in another app (can't remember which). I have no idea how I can do it, do I need write it programmatically?
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WordActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="20dp"
android:visibility="gone" />
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="@color/primary_dark"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/wordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/poweredBy"
android:layout_centerInParent="true"
android:layout_marginTop="-12dp"
android:fontFamily="@font/poppins"
android:text="@string/word_title"
android:textColor="@android:color/white"
android:textSize="30sp" />
<TextView
android:id="@+id/wordTranslated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/wordTitle"
android:layout_alignStart="@id/wordTitle"
android:layout_marginTop="-10dp"
android:fontFamily="@font/poppins"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
<TextView
android:id="@+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:fontFamily="@font/bungee_hairline"
android:text="@string/powered"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/cardView">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/primary"
android:elevation="5dp"
app:tabIndicatorColor="@android:color/white"
app:tabIndicatorHeight="2dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@color/white_transparent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
edited Nov 26 '18 at 3:40
shizhen
3,84541336
asked Nov 26 '18 at 3:37
DohmanDohman
95
add a comment |
0
0
0
Screenshot
As you can see, the layout is a bit too big for the older device. My idea is to shrink the CardView while the user is scrolling in the white area (ViewPager) to make it bigger. I have seen it working well in another app (can't remember which). I have no idea how I can do it, do I need write it programmatically?
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WordActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="20dp"
android:visibility="gone" />
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="@color/primary_dark"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/wordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/poweredBy"
android:layout_centerInParent="true"
android:layout_marginTop="-12dp"
android:fontFamily="@font/poppins"
android:text="@string/word_title"
android:textColor="@android:color/white"
android:textSize="30sp" />
<TextView
android:id="@+id/wordTranslated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/wordTitle"
android:layout_alignStart="@id/wordTitle"
android:layout_marginTop="-10dp"
android:fontFamily="@font/poppins"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
<TextView
android:id="@+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:fontFamily="@font/bungee_hairline"
android:text="@string/powered"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/cardView">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/primary"
android:elevation="5dp"
app:tabIndicatorColor="@android:color/white"
app:tabIndicatorHeight="2dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@color/white_transparent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
edited Nov 26 '18 at 3:40
shizhen
3,84541336
asked Nov 26 '18 at 3:37
DohmanDohman
95
Screenshot
As you can see, the layout is a bit too big for the older device. My idea is to shrink the CardView while the user is scrolling in the white area (ViewPager) to make it bigger. I have seen it working well in another app (can't remember which). I have no idea how I can do it, do I need write it programmatically?
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WordActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="20dp"
android:visibility="gone" />
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="@color/primary_dark"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/wordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/poweredBy"
android:layout_centerInParent="true"
android:layout_marginTop="-12dp"
android:fontFamily="@font/poppins"
android:text="@string/word_title"
android:textColor="@android:color/white"
android:textSize="30sp" />
<TextView
android:id="@+id/wordTranslated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/wordTitle"
android:layout_alignStart="@id/wordTitle"
android:layout_marginTop="-10dp"
android:fontFamily="@font/poppins"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
<TextView
android:id="@+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:fontFamily="@font/bungee_hairline"
android:text="@string/powered"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/cardView">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/primary"
android:elevation="5dp"
app:tabIndicatorColor="@android:color/white"
app:tabIndicatorHeight="2dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@color/white_transparent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
edited Nov 26 '18 at 3:40
shizhen
3,84541336
asked Nov 26 '18 at 3:37
DohmanDohman
95
edited Nov 26 '18 at 3:40
shizhen
3,84541336
asked Nov 26 '18 at 3:37
DohmanDohman
95
edited Nov 26 '18 at 3:40
shizhen
3,84541336
edited Nov 26 '18 at 3:40
shizhen
3,84541336
edited Nov 26 '18 at 3:40
shizhen
3,84541336
3,84541336
asked Nov 26 '18 at 3:37
DohmanDohman
95
asked Nov 26 '18 at 3:37
DohmanDohman
95
asked Nov 26 '18 at 3:37
DohmanDohman
95
95
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
try again with this sample layout.
activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</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"/>
scene 1
scene 2
answered Nov 27 '18 at 4:48
No NameNo Name
7210
Almost! It's working, exactly in the way you wanted it, but I want the collapsing area to be collapsed all the way up, not halfway like in your codes. How can I change? One more thing, I'd want the content to collapse while the user is scrolling in the ViewPager, but it's ok if you don't know.
– Dohman
Nov 27 '18 at 20:49
I've solved it, I needed to change in the scrollFlags to "scroll". I mark your answer as it helped me with my problem, thank you very much! Really appreciated. I also figured out how to solve my second problem in the comment above, it was to wrap the ViewPager with NestedScrollView.
– Dohman
Nov 27 '18 at 21:10
i'm gleeful that i helped with your problem.
– No Name
Nov 28 '18 at 3:03
add a comment |
0
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time.
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
add a comment |
0
Try this sample layout, just change the code inside nested scrollview with your tablayout
<android.support.constraint.ConstraintLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot
Scene 1
Scene 2
answered Nov 26 '18 at 4:11
No NameNo Name
7210
Can you please show how I can implement it into my XML? I tried, but it didn't work.
– Dohman
Nov 26 '18 at 14:15
okay i just post another answer here, so my previous answer can guide other people with this kind of layout also.
– No Name
Nov 27 '18 at 4:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474490%2fshrink-cardview-while-scrolling-in-another-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
try again with this sample layout.
activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</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"/>
scene 1
scene 2
answered Nov 27 '18 at 4:48
No NameNo Name
7210
Almost! It's working, exactly in the way you wanted it, but I want the collapsing area to be collapsed all the way up, not halfway like in your codes. How can I change? One more thing, I'd want the content to collapse while the user is scrolling in the ViewPager, but it's ok if you don't know.
– Dohman
Nov 27 '18 at 20:49
I've solved it, I needed to change in the scrollFlags to "scroll". I mark your answer as it helped me with my problem, thank you very much! Really appreciated. I also figured out how to solve my second problem in the comment above, it was to wrap the ViewPager with NestedScrollView.
– Dohman
Nov 27 '18 at 21:10
i'm gleeful that i helped with your problem.
– No Name
Nov 28 '18 at 3:03
add a comment |
0
try again with this sample layout.
activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</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"/>
scene 1
scene 2
answered Nov 27 '18 at 4:48
No NameNo Name
7210
Almost! It's working, exactly in the way you wanted it, but I want the collapsing area to be collapsed all the way up, not halfway like in your codes. How can I change? One more thing, I'd want the content to collapse while the user is scrolling in the ViewPager, but it's ok if you don't know.
– Dohman
Nov 27 '18 at 20:49
I've solved it, I needed to change in the scrollFlags to "scroll". I mark your answer as it helped me with my problem, thank you very much! Really appreciated. I also figured out how to solve my second problem in the comment above, it was to wrap the ViewPager with NestedScrollView.
– Dohman
Nov 27 '18 at 21:10
i'm gleeful that i helped with your problem.
– No Name
Nov 28 '18 at 3:03
add a comment |
0
0
0
try again with this sample layout.
activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</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"/>
scene 1
scene 2
answered Nov 27 '18 at 4:48
No NameNo Name
7210
try again with this sample layout.
activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</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"/>
scene 1
scene 2
answered Nov 27 '18 at 4:48
No NameNo Name
7210
answered Nov 27 '18 at 4:48
No NameNo Name
7210
answered Nov 27 '18 at 4:48
No NameNo Name
7210
answered Nov 27 '18 at 4:48
No NameNo Name
7210
7210
Almost! It's working, exactly in the way you wanted it, but I want the collapsing area to be collapsed all the way up, not halfway like in your codes. How can I change? One more thing, I'd want the content to collapse while the user is scrolling in the ViewPager, but it's ok if you don't know.
– Dohman
Nov 27 '18 at 20:49
I've solved it, I needed to change in the scrollFlags to "scroll". I mark your answer as it helped me with my problem, thank you very much! Really appreciated. I also figured out how to solve my second problem in the comment above, it was to wrap the ViewPager with NestedScrollView.
– Dohman
Nov 27 '18 at 21:10
i'm gleeful that i helped with your problem.
– No Name
Nov 28 '18 at 3:03
add a comment |
Almost! It's working, exactly in the way you wanted it, but I want the collapsing area to be collapsed all the way up, not halfway like in your codes. How can I change? One more thing, I'd want the content to collapse while the user is scrolling in the ViewPager, but it's ok if you don't know.
– Dohman
Nov 27 '18 at 20:49
I've solved it, I needed to change in the scrollFlags to "scroll". I mark your answer as it helped me with my problem, thank you very much! Really appreciated. I also figured out how to solve my second problem in the comment above, it was to wrap the ViewPager with NestedScrollView.
– Dohman
Nov 27 '18 at 21:10
i'm gleeful that i helped with your problem.
– No Name
Nov 28 '18 at 3:03
Almost! It's working, exactly in the way you wanted it, but I want the collapsing area to be collapsed all the way up, not halfway like in your codes. How can I change? One more thing, I'd want the content to collapse while the user is scrolling in the ViewPager, but it's ok if you don't know.
– Dohman
Nov 27 '18 at 20:49
Almost! It's working, exactly in the way you wanted it, but I want the collapsing area to be collapsed all the way up, not halfway like in your codes. How can I change? One more thing, I'd want the content to collapse while the user is scrolling in the ViewPager, but it's ok if you don't know.
– Dohman
Nov 27 '18 at 20:49
I've solved it, I needed to change in the scrollFlags to "scroll". I mark your answer as it helped me with my problem, thank you very much! Really appreciated. I also figured out how to solve my second problem in the comment above, it was to wrap the ViewPager with NestedScrollView.
– Dohman
Nov 27 '18 at 21:10
I've solved it, I needed to change in the scrollFlags to "scroll". I mark your answer as it helped me with my problem, thank you very much! Really appreciated. I also figured out how to solve my second problem in the comment above, it was to wrap the ViewPager with NestedScrollView.
– Dohman
Nov 27 '18 at 21:10
i'm gleeful that i helped with your problem.
– No Name
Nov 28 '18 at 3:03
i'm gleeful that i helped with your problem.
– No Name
Nov 28 '18 at 3:03
add a comment |
0
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time.
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
add a comment |
0
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time.
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
add a comment |
0
0
0
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time.
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time.
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
answered Nov 26 '18 at 4:08
CampbellMGCampbellMG
2917
2917
add a comment |
add a comment |
0
Try this sample layout, just change the code inside nested scrollview with your tablayout
<android.support.constraint.ConstraintLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot
Scene 1
Scene 2
answered Nov 26 '18 at 4:11
No NameNo Name
7210
Can you please show how I can implement it into my XML? I tried, but it didn't work.
– Dohman
Nov 26 '18 at 14:15
okay i just post another answer here, so my previous answer can guide other people with this kind of layout also.
– No Name
Nov 27 '18 at 4:43
add a comment |
0
Try this sample layout, just change the code inside nested scrollview with your tablayout
<android.support.constraint.ConstraintLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot
Scene 1
Scene 2
answered Nov 26 '18 at 4:11
No NameNo Name
7210
Can you please show how I can implement it into my XML? I tried, but it didn't work.
– Dohman
Nov 26 '18 at 14:15
okay i just post another answer here, so my previous answer can guide other people with this kind of layout also.
– No Name
Nov 27 '18 at 4:43
add a comment |
0
0
0
Try this sample layout, just change the code inside nested scrollview with your tablayout
<android.support.constraint.ConstraintLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot
Scene 1
Scene 2
answered Nov 26 '18 at 4:11
No NameNo Name
7210
Try this sample layout, just change the code inside nested scrollview with your tablayout
<android.support.constraint.ConstraintLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot
Scene 1
Scene 2
answered Nov 26 '18 at 4:11
No NameNo Name
7210
answered Nov 26 '18 at 4:11
No NameNo Name
7210
answered Nov 26 '18 at 4:11
No NameNo Name
7210
answered Nov 26 '18 at 4:11
No NameNo Name
7210
7210
Can you please show how I can implement it into my XML? I tried, but it didn't work.
– Dohman
Nov 26 '18 at 14:15
okay i just post another answer here, so my previous answer can guide other people with this kind of layout also.
– No Name
Nov 27 '18 at 4:43
add a comment |
Can you please show how I can implement it into my XML? I tried, but it didn't work.
– Dohman
Nov 26 '18 at 14:15
okay i just post another answer here, so my previous answer can guide other people with this kind of layout also.
– No Name
Nov 27 '18 at 4:43
Can you please show how I can implement it into my XML? I tried, but it didn't work.
– Dohman
Nov 26 '18 at 14:15
Can you please show how I can implement it into my XML? I tried, but it didn't work.
– Dohman
Nov 26 '18 at 14:15
okay i just post another answer here, so my previous answer can guide other people with this kind of layout also.
– No Name
Nov 27 '18 at 4:43
okay i just post another answer here, so my previous answer can guide other people with this kind of layout also.
– No Name
Nov 27 '18 at 4:43
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474490%2fshrink-cardview-while-scrolling-in-another-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
