My app contains a collapsing toolbar with a tabview. The tabs have an own background color, my #color/colorPrimary and the collapsing toolbar has a set background image. Now I would like to 'merge' them: the tablayout should be transparent, so the background image reaches from the toolbar down including the tabs. Like it is not divided by the background anymore.
I set up the layout and tried to make the tabs transparent, but like this the image won't continue.
My XML file:
<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="com.example.te.e6.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/colbar"
android:layout_width="match_parent"
android:layout_height="175dp"
app:expandedTitleGravity="center|bottom"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/materialbackground"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:expandedTitleGravity="center|bottom"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I have also been searching for a solution and I stumbled across this approach that helped me a bit. Finally I got it working. Here I post my solution using the latest Material3:
<layout xmlns:tools="http://schemas.android.com/tools"
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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:id="#+id/list_appbarlayout_tabs">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/list_collapsing_toolbar_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways|snap">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed">
<com.google.android.material.tabs.TabItem
android:id="#+id/tab1"
android:layout_width="wrap_content"
android:layout_height="20dp" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab2"
android:layout_width="wrap_content"
android:layout_height="40dp"/>
<com.google.android.material.tabs.TabItem
android:id="#+id/tab3"
android:layout_width="wrap_content"
android:layout_height="40dp" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:id="#+id/list_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.2"
android:padding="24dp"
app:srcCompat="#drawable/bg" />
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="#+id/list_progress_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/list_progress_indicator"
android:layout_marginEnd="8dp">
</androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/list_bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:hideOnScroll="true"
app:menu="#menu/bottombar"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/list_fab_add_contentdesc"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:layout_anchor="#id/list_bottom_bar"
app:srcCompat="#drawable/ic_add"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
Pay special attention to
app:layout_scrollFlags="scroll|enterAlways|snap">
For the Material Toolbar
and
app:layout_behavior="#string/appbar_scrolling_view_behavior">
for the relative layout!
EDIT:
There is a stupid margin at the start of the menu, to get rid of it add app:contentInsetStart="0dp" which is set to 16 dp by default (updated also the layout above)
Here is a working example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="56dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/backg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Related
Collapsing toolbar layout and the recycler view should work together while swiping but working separately.
suggest to me what to do! given below are my code and resulting gif part of my project.
the toolbar layout is not showing fully if I swipe the screen from bottom to top.
the toolbar layout is closed and only return if I swipe to toolbar layout separately.
i want to toolbar layout to be in the same manner when i swipe the screen up and down.
Code of my layout
<?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=".ui.review.reviewActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collaps_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center_vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="TODO"
android:src="#drawable/cover_image"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<TextView
android:id="#+id/textView_title"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center_horizontal"
android:layout_marginTop="130dp"
android:gravity="center"
android:maxLines="1"
android:text="title"
android:textColor="#FFF"
android:textSize="24sp" />
</FrameLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/Theme.AppTheme.PopupOverlay"
app:layout_collapseMode="parallax" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/review_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Final result
Try this:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/itineraryListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:windowBackground">
<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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<Button
android:id="#+id/button_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_start_margin"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/activity_end_margin"
android:background="#null"
android:clickable="true"
android:drawableStart="#drawable/ic_arrow_booking_details"
android:gravity="start|center_vertical" />
<ImageView
android:id="#+id/iv_background_image"
android:layout_width="match_parent"
android:layout_height="#dimen/_123sdp"
android:contentDescription="#string/name_app"
android:scaleType="centerCrop"
app:srcCompat="#drawable/booking_details_background" />
<ImageView
android:id="#+id/iv_background_rectangle"
android:layout_width="match_parent"
android:layout_height="#dimen/_123sdp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:srcCompat="#drawable/rectangle_booking_details" />
<TextView
android:id="#+id/tv_background_title"
style="#style/font_title_bookingdetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_start_margin"
android:layout_marginTop="95dp"
android:layout_marginEnd="#dimen/activity_end_margin"
android:gravity="start|center_vertical"
android:text="#string/text_trek_everest_name"
android:textColor="#color/colorPrimary" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="26dp" />
<androidx.appcompat.widget.Toolbar
android:layout_width="?attr/actionBarSize"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title_itinerary_list"
style="#style/font_title_day1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_start_margin"
android:layout_marginTop="#dimen/_15sdp"
android:layout_marginBottom="#dimen/activity_end_margin"
android:gravity="center_vertical"
android:text="#string/dashboard_itinerary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.235" />
<include layout="#layout/booking_itinerary_recyclerview" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</FrameLayout>
This is the output of this code.
I am currently working on an application to help manage bills. I have an activity that list the bills. I am trying to put a spinner between a list of bills and the title at the top. Is there a way to put the spinner so that it is at the top of the listView but below the app bar.?
This is what the app looks like:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<TextView
android:id="#+id/dateRangeView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/date_range"
android:textColor="#android:color/background_light"
android:textSize="24sp"
android:textStyle="bold"
tools:textAlignment="center"
tools:textColor="#android:color/white" />
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBarBillList"
android:progressDrawable="#drawable/circular_progress_bar"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_anchor="#+id/app_bar"
android:id="#+id/bill_dates"
app:layout_anchorGravity="bottom|center">
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginHorizontal="16dp"
android:background="#android:color/background_light"
android:entries="#array/date_arrays"
android:prompt="#string/bill_date_prompt"
android:spinnerMode="dialog"
app:layout_anchor="#+id/listBillView"
app:layout_anchorGravity="top|right" />
</LinearLayout>
<include layout="#layout/content_bill_list" app:layout_anchor="#+id/bill_dates" />
</android.support.design.widget.CoordinatorLayout>
content_bill_list.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.yourdirectlink.ydlcms.BillListActivity"
tools:showIn="#layout/activity_bill_list">
<ListView
android:id="#+id/listBillView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" >
</ListView>
</android.support.v4.widget.NestedScrollView>
DISMISS THIS
As suggested in the comments why not use a LinearLayout with vertical orientation and put the spinner as the first child with height wrap_content and then below it the listview with height 0dp and layout_weight set to 1
NEW PROPOSAL
Take a look a this layout. I already tried at a test app:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#id/toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
<!--app:popupTheme="#style/AppTheme.PopupOverlay" />-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/dateRangeView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/date_range"
android:textColor="#android:color/background_light"
android:textSize="24sp"
android:textStyle="bold"
tools:textAlignment="center"
tools:textColor="#android:color/white" />
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginHorizontal="16dp"
android:background="#android:color/background_light"
android:entries="#array/date_arrays"
android:prompt="#string/bill_date_prompt"
android:spinnerMode="dialog"
app:layout_anchor="#+id/listBillView"
app:layout_anchorGravity="top|right" />
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBarBillList"
android:layout_gravity="center" />
<include
layout="#layout/content_bill_list"
app:layout_anchor="#+id/bill_dates"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I have to comment the popup theme because I don't have it.
Also you need to use a theme with .NoActionBar because you're suppling the action bar and on the Activity containing this layout you need to call:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Was it what you're looking for?
I want to create like bellow image.
For creating like this I write the bellow 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"
tools:context="posoft.shariful.rupkotharpata.Profile"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="220dp">
<include layout="#layout/toolbar"></include>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#drawable/b1"
android:orientation="horizontal">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/todo"
android:src="#drawable/p1"
android:layout_gravity="center_vertical"
android:layout_marginTop="10dp"
android:layout_marginStart="20dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:layout_marginStart="10dp"
android:layout_marginBottom="20dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="#string/test_user_full_name"
android:textColor="#color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="19sp"
android:text="#string/test_user"
android:textColor="#color/white"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
It working. But the problem is, It don't show app toolbar.
Note : The tools of toolbar working.
Now how I can show toolbar or toolbar tools?
This is happening because your LinearLayout is displaying over your toolbar(Views inside a RelativeLayout display over one other, and you haven't mentioned any view to display above or below the other one).
Assign an id to your toolbar, and instruct your LinearLayout to be below it, something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="220dp">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"></include>
<LinearLayout
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#drawable/b1"
android:orientation="horizontal">
You might also need to increase your parent RelativeLayout's height from 220dp to something like 250dp to accommodate both the children without clipping the bottom one.
You need to use CollapsingToolbarLayout with AppBarLayout over there.
For your reference I have posted one xml file. refer this..
<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"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.news.moneycontrol.MainActivity">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_dashboard"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="240dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/toolbar_elevation"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- <ImageView
android:id="#+id/flexible_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#mipmap/home_cover"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.news.moneycontrol.progressbar.CircularProgressView
android:id="#+id/progress_view"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:padding="0dp"
android:layout_marginTop="100dp"
app:cpv_animAutostart="false"
app:cpv_indeterminate="true"
app:cpv_thickness="4dp" />
<ImageView
android:id="#+id/no_internet"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="150dp"
android:visibility="invisible"
android:src="#mipmap/ic_connection_error" />
<com.xxx.CustomFont
android:id="#+id/text_internet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#9B9B9B"
android:layout_gravity="center"
android:text="No Internet Connection"
android:textStyle="bold"
android:visibility="invisible"
android:layout_marginTop="270dp"
android:paddingBottom="10dp"/>
</android.support.design.widget.CoordinatorLayout>
hope you have listed below necessary gradles!
compile 'com.android.support:appcompat-v7:25.2.0'
compile 'com.android.support:recyclerview-v7:25.2.0'
compile 'com.android.support:cardview-v7:25.2.0'
compile 'com.android.support:design:25.2.0'
Add new scroll activity then in activity layout file put imageview in collapsing toolbar layout
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/test_background_image"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/groupImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</android.support.design.widget.CollapsingToolbarLayout>
Wrap the layout in toolbar as follows
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="220dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="todo"
android:src="#color/colorPrimaryDark"
android:layout_gravity="center_vertical"
android:layout_marginTop="10dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:layout_marginBottom="20dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Full name"
android:textColor="#color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="19sp"
android:text="user"
android:textColor="#color/theme_color"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
I have Activity where I have a CollapsingTableLayout and I'd to display in the bottom of the screen an Editext but I have some problems
When I scroll to bottom, all text not displayed
And when I clic in Editext in the bottom, Toolbar is not displayed
I follow this link to do this
Here is my Layout
<?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">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".DetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/image_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp">
<android.support.v7.widget.CardView
app:cardElevation="6dp"
android:id="#+id/detail_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detail_title"
android:text="Title"
android:textSize="20dp"
android:layout_marginHorizontal="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"/>
<TextView
android:id="#+id/detail_description"
android:text="Description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/detail_title"
android:textColor="#android:color/black"
android:layout_margin="10dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/darker_gray">
<EditText
android:id="#+id/detail_comment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"/>
<ImageView
android:id="#+id/detail_add_comment"
android:text="add"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#mipmap/ic_send"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
Thank you for help
I made this layout to have scrolling toolbar, the effects would be nice if I can make imageview to fade out, which is placed between the collapsing toolbar and coordinate layout like yellow favorite button in left phone image, added xml in which image is moving with collapsing toolbar but only disappearing at the toolbar not complete
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv"
android:textSize="22sp"
/>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/iv_poster"
app:layout_anchor="#+id/app_bar_layout"
app:layout_anchorGravity="bottom"
/>
</android.support.design.widget.CoordinatorLayout>
Only upper part of image disappeared
So, Like we talk in comments for the main question you can use this:
app:scrimVisibleHeightTrigger="your_height"
For the second question the you ask you can do that:
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/your_icon"
android:layout_margin="16dp"
android:clickable="true"/>
So final code be like that:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:scrimVisibleHeightTrigger="your_height">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/your_icon"
android:layout_margin="16dp"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>