android: how to add a button with text inside collapsing toolbar
13,699
You can add button and image like this
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="150dip"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
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" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom|end"
app:layout_collapseMode="parallax"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
in your main scrollable content put this code
<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">
</android.support.v4.widget.NestedScrollView>
Author by
Santhosh
Trying to help as a volunteer. Learn the Hard Way. First try hard and then only ask.
Updated on June 16, 2022Comments
-
Santhosh almost 2 years
How to achieve the following layout. I could achieve without the add button. But how to add the ADD buttom and add button should disappear along with parallax of the image when scrolled up.
What i found is floating action buttons dont have facility to add text. I have to use button only.
My xml layout without the add button:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layoutplace1" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.CoordinatorLayout android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="150dip" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginBottom="20dp" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" 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> <FrameLayout android:id="@+id/framelayout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="bottom" app:layout_anchor="@+id/appBarLayout" app:layout_anchorGravity="bottom" app:layout_collapseMode="none"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="50dp" android:background="#ffffff" android:gravity="bottom" android:textAllCaps="false" android:theme="@style/MyCustomTabLayout" app:tabGravity="center" app:tabIndicatorColor="#574ec1" app:tabIndicatorHeight="2dp" app:tabMode="scrollable" app:tabSelectedTextColor="#574ec1" app:tabTextColor="#8A000000" /> </FrameLayout> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="fill_parent" android:paddingBottom="56dp" android:layout_marginTop="50dp" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_viewplace1" android:layout_height="match_parent" android:layout_width="wrap_content" android:layout_gravity="start" android:fitsSystemWindows="false" app:itemTextColor="#8A000000" app:itemIconTint="#8A000000" app:menu="@menu/drawer_view" /> </android.support.v4.widget.DrawerLayout>
Also the text: "UDUPI SRIKRISHNA TEMPLE" which appears in double lines. is that possible.
I add title using
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle("Udupi Sri krishna Temple");
But the title shows only partially and shows ...
Instead i want it to be shown in multiple lines. is it possible
-
Santhosh over 8 yearsI tried it. The text and button are added in the top height (?attr/actionBarSize) only. they are not added like the image shown
-
Santhosh over 8 yearschecking looks closer to what i want. Also can you tell how to get the text properly
-
H Raval over 8 yearstext property of what? do you want textview also with button?
-
Santhosh over 8 yearsYes. how to get the entire thing "UDUPI SRI KRISHNA TEMPLE" and the button.
-
Santhosh over 8 yearsi added a textview inside the linear layout and got it. thank you
-
Santhosh over 8 yearsI have one doubt. If i have a toolbar icon on the right, then the button overlaps on it. Is it possible to vanish the button when i scroll up.
-
H Raval over 8 yearsno it want...because when you scroll your toolbar will collpased...check this out developer.android.com/reference/android/support/design/widget/…
-
H Raval over 8 yearsi am glade to help you
-
Santhosh over 8 yearsi suggest instead of adding inside toolbar add it outside and within collapsingtoolbarlayout
-
Vivek Pratap Singh almost 8 yearsi have put recycler view and floating action button but floating action button is not hiding