Semitransparent PagerTabStrip with actionbar overlay - android

I'm using a actionbar with Window.FEATURE_ACTION_BAR_OVERLAY and some transparency. Additionally I'm using a ViewPager with a PagerTabStrip. The problem is the PagerTabStrip is now displayed underneath the actionbar.
Applying a margin to the PagerTabStrip doesn't work at all and applying a margin to the whole ViewPager prevents the content (A ScrollView inside a Fragment) to scroll underneath the actionbar and the PagerTabStrip, which should be semitransparent too.
So currently I'm stucked with
which isn't ideal at all :D
Anyone got an idea to implement this behaviour?
Edit: so the problem consists of 2 parts. Making the content scroll underneath the PagerTabStrip and moving the PagerTitleStrip.

Add a view above the pager tab strip with a height of
?android:attr/actionBarSize
It will take the height of the action bar and "push" the content down.

Related

ViewPager with TabLayout inside a NavHostFragment in an AppBarLayout

Ok, please bear with me: I'm using the android navigation component for a new app I'm building. I need the ActionBar and the BottomNavigationView to hide on scroll, which I've done successfully by using an AppBarLayout inside a CoordinatorLayout.
In my app's theme I'm using "windowActionBarOverlay = true", since I need the ActionBar to be transparent in some of my fragments. In one of my Fragments, I have a ViewPager with a TabLayout, and a solid ActionBar. To overcome the issue that windowActionBarOverlay creates, I've added some paddingTop to my whole fragment.
However, this creates a problem when the user scrolls, since the ActionBar gets hidden away, and there is an empty space where the padding is.
I can use two solutions, although I don't know how to implement each of them:
Make the ViewPager scroll with the ActionBar. How can I do that, in my situation, where the ViewPager is inside a Fragment in a NavHostFragment?
Make the ActionBar not hide itself when the user scrolls. Is there a way to disable this programatically for particular fragments?
If anyone knows how to implement one of the two solutions, please let me know.

Android - Make StatusBar transparent on a specific fragment in ViewPager

I have a ViewPager with several fragments, his layout includes only the ViewPager with a TabLayout, nothing else.
And one specific fragment (in view pager) which has a coordinator layout with collapsing toolbar (on the right)
What I want to do is to set the StatusBar transparent only on the right fragment. Just imagine I want to move the picture on the right fragment completely top
I've tried several methods like android:fitsSystemWindows="true" , make the ViewPager fullscreen (it wasn't what I expected) or modify application theme. But this is a specific situation that I can't find any solution. Thanks for any ideas.

TabLayout and bottom navigation

Hello, I have searched possible ways of implementing something like what can be seen in the image above, but couldn't find any help. I want to create a TabLayout and bottom navigation, such that the TabLayout is bound to the first bottom icon, and the second bottom icon is bound to another TabLayout.
I will be glad if you can help with examples or sample code. I am still more of a beginner.
As a beginner, you need to have a mindset that a problem can be split to more simpler problems by applying Divide and conquer algorithm.
For your case, you need to split the problem of TabLayout and bottom navigation. The problem after split are:
TabLayout
ViewPager
Combining TabLayout with ViewPager
Bottom Navigation
Combining TabLayout with ViewPager and Bottom Navigation.
First, you need to make a working TabLayout. Visit TabLayout. Then learn about ViewPager: Using ViewPager for Screen Slides and ViewPager. Then combine them.
Then you need to learn about Bottom Navigation at Bottom Navigation Views
After that you need to find how to integrate the Bottom Navigation with TabLayout and ViewPager.
Sample project with tab:
https://github.com/eure/citrus
Plaid should be interesting for you.

PagerTabStrip customization - moving tab background instead of standard indicator

I am trying to use PagerTabStrip in my app but need a little customization. My problem is that I want the tab background to be moved instead of the standard indicator. The image should explain it better:
Currently I don't show at all tab indicator, but use a tab background which is a selector (pressed & selected). This tab background behaves like a tab indicator but is jumpy and I would like to move it smoothly when sliding left/right.
I have have used the PagerTabStrip, got it to work and changed the height of the indicator to match the height of the tabbar but this didn't solve the problem because the indicator is drawn on top of the tabs and covers them. To solve the problem the indicator needs to be drawn behind the tabs. To do that I have modified PagerTabStrib and made a custom TabsContainer (by default LinearLayout is used in PagerTabStrip as a tabs container) an inner class which extends LinearLayout and overrides its onDraw() method where I want to draw the moving indicator. This way the indicator should be drawn behind the tabs, right? My problem with the code right now is that I don't get calls to onDraw() inside my custom TabsContainer. What do You think about this solution and about this problem? Do You see any better solution?
Thanks for any help.

Make ViewPager overlap PageTitleStrip

I've been struggling with that for a while: Is it possible to force PageTitleStrip draw itself on the content of the ViewPager?
Here is the case:
The red line indicates the end of ViewPager content and the start of PagerTitleStrip. The brown background belongs to the hole activity. Blackboard and blue backgrounds are from fragments in pager. The screen is taken during scrolling so that 2 fragments can be seen. I want the icons from PagerTitleStrip to be displayed transaprently and party on the viewPager's content.
Any suggestions are highly appreciated.
I don't think it's possible to do this with the built-in ViewPager and PagerTitleStrip. You will have to make your own custom component based on these to get the effect you're looking for.

Categories

Resources