android-layoutandroid-toolbarandroid-tablayoutandroid-coordinatorlayout
Android - Material Design Library: How to use the collapsingToolBar Layout
I'm new to android development and am trying to work with collapsingToolBar in Google's material design library. I am new to this whole collapsing toolbar, but I followed some online tutorials and made an xml according to my needs keeping in mind the advices. I have a main activity with a viewPager containing 5 fragments, now I want that the viewPager should occupy full screen when the user scrolls the activity and the rest of the activity is the collapsing toolbar.
The rest of the activity has two imageViews, a rating bar and some TextViews in it. I'm not sure if all of these are compatible with the collapsing toolbar layout so I'm trying.
This is what I meant to say. This is a screenshot from before I tried to implement the coordinatorLayout and collapsing Toolbar.
Here is the type of output I want from the app. This example has less tabs in the viewpager but the basic collapsing toolbar layout implementation is the same. Here is the playstore line of the app, just in case: play.google.com/store/apps/details?id=com.kkings.cinematics
Here is the xml of my activity, the current one (having collapsing toolar):
<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="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/chocolateBrown"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</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"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
This is the type of result this activity produces:
I haven't made any changes in the java. The credits or any other class can't display anything. I suspect that this is due to some clash between recyclerView and nestedScroll View.
So, anyway, I saw that in all the online tutorials, they used a toolbar inside the collapsingToolbarLayout. So I tried doing the same same thing, hereis the new XML:
<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="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/chocolateBrown"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparentColor"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</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="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
This toolbar makes everything weird, this is what this looks like:
Also, the logcat doesn't show any errors.
I just can't seem to figure out where I'm going wrong. I have checked all other similar questions on StackOverFlow, none of the solutions have worked so far.
And here is the tutorial I was mentioning:
www.youtube.com/watch?v=ssh09JbQ3nc
What am i doing wrong here?
Solution
The point was in removing the first
RelativeLayoutwhich it wasn't necessary & adding theRelativeLayoutoutside of theToolbar.
This should work now:
<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="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways" />
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:background="@drawable/bg_intro" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:background="@drawable/bg"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:text="This is theheading"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Results:
- Multiple buttons in single page navigating each button to different page in android studio
- Why Lint shows warning when using in (inch) or mm (millimeter) units as dimension?
- android toolbar not working properly in api 35
- Custom view doesn't making wider
- InflateException: Binary XML file line #1: Error inflating class <unknown> caused by OutOfMemoryError
- Dumb recomposition in Android Compose
- v7 Toolbar OptionsMenu Item to far right - how to add margin
- Scaling the Image button in an included layout
- Programmatically change height in constraint layout?
- How to display multiple ListViews in one activity
- Android: Display concrete part of text in TextView
- Android PreferenceScreen sits on top of Toolbar
- androidx.credentials.exceptions.CreateCredentialUnknownException: During save password, found password failure response from one tap
- How to make AlertDialog full screen in android
- Android - EditText made programmatically not showing keyboard
- Android: Implementing edge-to-edge while hiding top/status bar
- Why dynamically added TableRow inside TableLayout CANNOT be accessed in Android Kotlin?
- improve layout performance
- My layout file is not showing in setContent(R.layout.xml file)..?
- Round only top corner of cardview
- How to change fontFamily of TextView in Android
- The bottom navigation view is a little high in Android
- Cannot find R.layout.activity_main
- How to align linearlayout to vertical center?
- App runs on device but crashes on emulator
- You need to use a Theme.AppCompat theme (or descendant) with this activity
- Remove the underline when typing word in EditText
- TextWatcher events are being fired multiple times
- Saving incoming emails as files, then reading them, (android and javamail)
- Bitmap gravity set to center not filling the screen even though the image is big enough