I have implemented this horizontal scroll view inside my collapsing toolbar (because I want users to horizontally scroll through images). And my collapsing toolbar isnt collapsing correctly (there's this random space (in color orange) after it has collapsed. I was hoping you guys can look at my xml and tell me what im doing wrong here.
Here we have it not collapsed.
Here we have it collapsed (and we have this orange space). Also how do i put a margin from my horizontal scroll view and the toolbar so that it would work on all devices?
Here is my xml code.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded"
android:focusable="true"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/cardInfo_appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/cardInfo_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<include
android:layout_width="match_parent"
android:layout_height="50dp"
layout="#layout/toolbar_layout_edit_card"
app:layout_collapseMode="pin">
</include>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/cardInfo_HSV_LL">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image_kyoto"
android:id="#+id/cardInfo_imageView"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
/>
</LinearLayout>
</HorizontalScrollView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
and my toolbar layout xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/toolbar_edit_card_ID"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:theme="#style/Frontier2017_2"
android:background="#color/orange_test"
android:elevation="10dp">
<TextView
android:layout_width="150dp"
android:layout_height="55dp"
android:gravity="bottom|center"
android:textSize="25sp"
android:id="#+id/toolbar_textview"
android:textColor="#color/white"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit"
android:background="#color/orange_test"
android:textColor="#color/white"
android:layout_gravity="right"/>
</android.support.v7.widget.Toolbar>
Related
so im trying to implement a simple collapsing toolbar, but I don't think my xml layout is correct. The text is appearing the image and when I scroll down, I can't scroll back up to see the image. Hope you guys can help!
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/cardInfo_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/cardInfo_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image_kyoto"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here's the image
Your ImageView should have attribute called
app:layout_collapseMode="parallax"
If you want to add Toolbar to your Layout there should be attribute called
app:layout_collapseMode="pin"
And finally You missed one attribute for NestedScrollView.
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in your ImageView, add the following attribute:
app:layout_collapseMode="parallax"
Also, in your NestedScrollView tag, add the following:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I have a screen contain collapsable toolbar (AppBarLayout) and scrollable content with NestedScrollviews
My Main layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:theme="#style/ToolbarTheme"
android:layout_width="match_parent"
android:layout_height="#dimen/actionBarHeight"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
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:fillViewport="true"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/layoutMainContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
And the layout content that I put into FrameLayout layoutMainContent is as below
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground">
<LinearLayout
android:id="#+id/layoutAbout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/ivLogo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/logo"/>
</LinearLayout>
<TextView
android:id="#+id/tvViewDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textColor="#color/colorPrimary"
android:text="#string/see_license"
android:gravity="center_horizontal"/>
</RelativeLayout>
What I want is the logo image is in the center and the TextView (tvViewDetail) is at the bottom the the screen. However, logo image is not in the center (pushed down a little bit) and tvViewDetail is pushed out of the screen.
Is there anything I've done wrong? Any suggestion would be helpful!
Thank you all masters,
Try this way I hope it helps.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground">
<LinearLayout
android:id="#+id/layoutAbout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/ivLogo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/logo"/>
<TextView
android:id="#+id/tvViewDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimary"
android:text="#string/see_license"/>
</LinearLayout>
</RelativeLayout>
hence linearlayout height and width will be wrap_content and gravity will be center so all child of that linear layout will be at center of the linear layout. and linear layout also appear at the center of the relative layout.
I've used two screen mobile to test my app . The item inside collapsing toolbar layout works fine for the smaller screen device but it cuts from bottom when using larger device . NOTE:-TAB COLOR IS done RED MANUALLY . NO CODE ISSUE THERE .
the code for the single items of collapsing toolbar is as follow,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="#color/recyclervire_back"
android:weightSum="4"
android:layout_marginRight="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<com.android.volley.toolbox.NetworkImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="#+id/hori_item_image"/>
<TextView
android:layout_width="70dp"
android:layout_height="20dp"
android:textColor="#00b704"
android:layout_alignParentRight="true"
android:textAllCaps="true"
android:layout_alignParentTop="true"
android:id="#+id/hori_item_source"
android:gravity="center"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:textSize="8sp"/>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Loading ..."
android:textSize="10sp"
android:gravity="center"
android:padding="1dp"
android:textColor="#color/black"
android:id="#+id/hori_item_title"/>
</LinearLayout>
Now the main layout where the collapsing toolbar is written is as follow,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sixteenmb.abhishekint.stack.MainActivity"
android:fitsSystemWindows="true"
android:id="#+id/main_coordinator">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
android:id="#+id/main_appbarlayout">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="#+id/main_collapsing"
app:collapsedTitleGravity="left"
app:collapsedTitleTextAppearance="#color/white"
app:contentScrim="#color/toolbar_main_activity"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="40dp"
app:expandedTitleGravity="bottom"
app:expandedTitleTextAppearance="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:id="#+id/main_recyclerview"
android:background="#color/white">
</android.support.v7.widget.RecyclerView>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/main_toolbar"
android:titleTextColor="#color/white"
app:layout_collapseMode="pin"
android:elevation="10dp"
android:title="#string/app_name">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fadeScrollbars="false"
android:scrollbarFadeDuration="0"
android:fitsSystemWindows="true"
android:id="#+id/main_nested">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="35dp"
app:tabSelectedTextColor="#color/white"
android:background="#6e000000"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="1.5dp"
android:id="#+id/tab">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="#+id/main_pager">
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
the receycler view in collapsing toolbar is where i inflate these items .
can anyone suggest where am i going wrong?
Actually setting wrap_content and fitsSystemWindow=true in both AppBarlayout and recyclerview and then setting the desired item layout height to the parent linear layout of the recycler item worked for me . in my case I set 180dp
so im trying to implement a simple collapsing toolbar, but I don't think my xml layout is correct. The text is appearing the image and when I scroll down, I can't scroll back up to see the image. Hope you guys can help!
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/cardInfo_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/cardInfo_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image_kyoto"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here's the image
Your ImageView should have attribute called
app:layout_collapseMode="parallax"
If you want to add Toolbar to your Layout there should be attribute called
app:layout_collapseMode="pin"
And finally You missed one attribute for NestedScrollView.
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in your ImageView, add the following attribute:
app:layout_collapseMode="parallax"
Also, in your NestedScrollView tag, add the following:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
After including Coordinator layout in my project I have a problem. I'll post my layout.
Here is my main_layout.xml:
<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/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/frame_content_keeper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Text"/>
</LinearLayout>
<LinearLayout
android:id="#+id/login_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom text"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I don't see textview with 'Bottom text'. Looks like it under screen. I think it is a defect.
It's normal because you should remove this line
app:layout_scrollFlags="scroll|enterAlways"
from your
android.support.v7.widget.Toolbar
This attribute is for when you have a list and when you will scroll down the action bar will hiding