Develop Reference

How to make ViewPager layer stacked from previous screen in Kotlin?

<RelativeLayout 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:background="#ffffff">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/tabLayout" />
<com.google.android.material.tabs.TabLayout
android:elevation="5dp"
app:tabIconTint="#color/tab_icon_color"
app:tabTextColor="#color/text_color"
app:tabBackground="#drawable/tab_background"
app:tabTextAppearance="#style/TabFont"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/main_color">
<com.google.android.material.tabs.TabItem
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="내 일기" />
<com.google.android.material.tabs.TabItem
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="우리 일기" />
<com.google.android.material.tabs.TabItem
android:layout_width="20dp"
android:layout_height="wrap_content"
android:icon="#drawable/ic_hamburger" />
</com.google.android.material.tabs.TabLayout>
</RelativeLayout>
I have 3 Tab Items, and according to each tab, It shows different ViewPager above.
But in case of the third tab, if I click 3rd tab, I want this Fragment goes up of previous screen.
So 3rd screen has gray-transparent background and will show blurred- previous screen on back.
I guess, since I make tab navigation with ViewPager, this idea is not possible, since it swipes, not stacked each other.
Is there any idea to make my idea possible?
Should I change from ViewPager to other Widget?

CollapsingToolbarLayout is not working after switching tabs

My appBar has one CollapsingToolbarLayout, in the CollapsingToolbarLayout there is a constrainLayout. ConstrainLayout height is 200dp and it contains one tablayout in bottom. In the first place of opeing fragment I can collapse the toolbar by dragging the constrain layout but after switching to the second tab I can't drag the constrain layout to collapse the toolbar.
After removing the viewPager adapter and tool bar code in java there is no issue now the viewpager is blank but I can collapse the tool bar by dragging the constrainLayout. Second thing I'm using ScrollView in viewpager Fragment after that I'm able to collapse the toolbar by dragging in the viewPager. Is there any solution to collapse the toolbar by dragging the view pager without scroll view in the Viewpager fragment?
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".Fragments.Profile">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.Material3.CollapsingToolbar"
android:background="#color/original">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="54dp"
app:layout_collapseMode="parallax" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/searchTabLayout"
android:layout_width="match_parent"
android:layout_height="54dp"
android:background="#00FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:tabGravity="fill"
app:tabIndicator="#drawable/tab_round_line"
app:tabIndicatorAnimationDuration="450"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorColor="#033600"
app:tabIndicatorFullWidth="false"
app:tabIndicatorHeight="2.5dp"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabRippleColor="#color/clickRipple"
app:tabSelectedTextColor="#color/nameColor"
app:tabTextAppearance="#style/MyCustomTextAppearance"
app:tabUnboundedRipple="true">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab2" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab3" />
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/profileViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Heights of tabs in TabLayout does not change properly after navigation

I have a problem with heights of LinearLayouts of a TabLayout. When I change between tabs and navigate to other pages from bottom navigation bar and come back to the page with tabs, height of the passive tab (the tab was not open when we navigate between pages) is set as the active tab’s height. How can I fix this? Example screenshots are below:
Expected version of tab 1
Expected version of tab 2
What happens when we navigate to other pages from tab 2 and come back and switch to tab 1
Main screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".homepage.UsageFragment"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ic_header_2"
android:padding="16dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:minWidth="0dp"
android:padding="0dp"
app:icon="#drawable/ic_icon_menu"
app:iconPadding="0dp"
app:rippleColor="#00FFFFFF" />
<com.google.android.material.button.MaterialButton
android:id="#+id/notifications_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="#android:color/transparent"
android:minWidth="0dp"
android:padding="0dp"
app:icon="#drawable/ic_baseline_notifications_24"
app:iconPadding="0dp"
app:iconSize="30dp"
app:rippleColor="#00FFFFFF"
tools:ignore="RelativeOverlap" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/imece_black"
android:background="#drawable/tab_background"
app:tabBackground="#drawable/tab_selector"
app:tabIndicator="#null"
app:tabTextAppearance="#style/tabFontStyle"
android:fillViewport="true"
app:tabGravity="fill"
>
</com.google.android.material.tabs.TabLayout>
<View
android:layout_width="0dp"
android:layout_height="12dp"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</androidx.viewpager2.widget.ViewPager2>
</LinearLayout>
</LinearLayout>

TabLayout inside CardView - Clicking on Tabs doesn't work but swiping fragments in viewpager works

I am using TabLayout with ViewPager inside a CardView. I have setup ViewPager to work with TabLayout and two fragments. But somehow swiping works but clicking on tabs doesn't work. Both work fine if I move ViewPager outside CardView.
Below is my XML layout -
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg_app_color_gradient"
tools:context=".View.LoginActivity">
<androidx.cardview.widget.CardView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin128dp"
android:layout_marginStart="#dimen/margin32dp"
android:layout_marginEnd="#dimen/margin32dp"
android:layout_marginBottom="#dimen/margin32dp"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
app:cardPreventCornerOverlap="false">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin64dp"
android:layout_marginEnd="#dimen/margin64dp"
android:layout_marginBottom="#dimen/margin32dp"
android:layout_marginTop="#dimen/margin48dp"
android:clipToPadding="false">
<View
android:id="#+id/indicator"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="#drawable/gradient_bg"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/tab_bg"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/appSecondaryWhiteColor"
app:tabIndicatorColor="#null"
app:tabRippleColor="#null"/>
</FrameLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:overScrollMode="never"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.cardview.widget.CardView>
</LinearLayout>

Android: How to fill tabs with scrolling in custom tabLayout?

I have a tablayout with 6 tabs. Tabs are fixed in the display but their text does not show completely. I do the solutions in here so that I can summarize them in these lines:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
But it did not solve my problem. I also use custom TabLayout in here and still I have the same problem.
Here are my codes:
I use a custom tablayout with this custom_tab.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:layout_centerHorizontal="true"
android:id="#+id/tabIcon"/>
<CustomViews.CustomTextView
android:id="#+id/basket_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:background="#drawable/notification_circle"
android:padding="2dp"
android:textColor="#ffffff"
android:textSize="8sp" />
<CustomViews.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/tab_inactive"
android:textSize="8sp"
android:layout_centerHorizontal="true"
android:layout_below="#id/tabIcon"
android:layout_marginBottom="2dp"
android:maxLines="1"
android:id="#+id/tabTitle"/>
</RelativeLayout>
The first ImageView shows the tab icon. The next ImageView is used for the badge and the CustomTextView is used for showing the tab title.
Here is my layout file include tablayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabMaxWidth="0dp"
android:layoutDirection="rtl"
android:id="#+id/avatar_tabLayout"
app:tabIndicatorColor="#null"
/>
</LinearLayout>
Is there a way to set up tab width with Maximum existence tab size? Or any other solutions?

Try to get rid off
app:tabGravity="fill"
app:tabMode="fixed"
in your <android.support.design.widget.TabLayout
Replace it with app:tabMode="scrollable"