The problem is simple. I have a TabLayout inside a CoordinatorLayout, and I dynamically set a CustomView for each Tab at runtime. The tabs have some animations and custom content that currently gets clipped at the Tab's edges.
I've set clipToPadding and clipChildren to false throughout all the view hierarchy with no success. Tabs are still getting clipped.
So the question is, how to avoid clipping tab's custom views inside a TabLayout?
Here's some code so you can see what I'm doing:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:clipChildren="false"
android:fitsSystemWindows="false"
tools:context=".MainTabbedActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:elevation="4dp"
android:clipToPadding="false"
android:clipChildren="false"
android:fitsSystemWindows="false"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:clipToPadding="false"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:clipChildren="false"
app:tabPaddingBottom="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabPaddingTop="-1dp"
app:tabIndicatorColor="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
... />
And then, a custom Tab looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="32dp"
android:scaleType="fitCenter"
android:layout_marginBottom="-4dp"
android:adjustViewBounds="true"
android:id="#+id/tab_pic" />
<TextView
android:id="#+id/tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/something"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="12sp"
android:visibility="invisible"/>
The result is the ImageView being clipped when animating its position/bounds.
Cheers
Ok, this was quick. I found the solution. It seems to me that Android creates an intermediate parent view between the TabLayout and the actual tab content.
So doing the following for each tab...:
ViewGroup realTabs = ((ViewGroup) mTabLayout.getChildAt(0));
realTabs.setClipToPadding(false);
realTabs.setClipChildren(false);
if (realTabs.getChildAt(0) instanceof ViewGroup) { // <-- This is the intermediate parent ViewGroup
((ViewGroup)realTab0.getChildAt(0)).setClipToPadding(false);
((ViewGroup)realTab0.getChildAt(0)).setClipChildren(false);
}
...will solve the problem.
Thanks
Related
Scrollbars not working. I have given the scrollbars as parent view, but still, my screen is not scrolling. I am not able find out the problem.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
android:fillViewport="true"
android:fadeScrollbars="false"
android:scrollbars="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Featured Image -->
<ImageView
android:id="#+id/image_tv"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/sandwich"
android:adjustViewBounds="true"
android:contentDescription="#string/sandwich_picture_content_description"
android:scaleType="centerCrop" />
<!-- Tabbed Toolbar + Pager -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/colorPrimaryDark"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:textAlignment="center"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
tools:ignore="NewApi" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#fff"
android:layout_below="#+id/toolbar"
android:background="#color/colorPrimaryDark"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tab_layout" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>
</ScrollView>
I have given the scrollbars as parent view, but still, my screen is not scrolling. I am not able to find out the problem. I have given the scrollbars as parent view, but still, my screen is not scrolling. I am not able to find out the problem.
Wrap the FrameLayout with a LinearLayout or RelativeLayout such that this Layout becomes the direct child of your Scrollview.
Also, instead of Parent view as ScrollView, Add a RelativeLayout as the parent followed by ScrollView.
RelativeLayout -> ScrollView -> LinearLayout -> FrameLayout.
In this image, there is a white strip at the bottom. I am not able to get rid of it through changing scroll flags. My XML file for this page has a view pager, framgment, and recycler view inside the tab layout. It is:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activity.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/quora"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/quora"
app:layout_scrollFlags="scroll"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_launcher_background"
android:visibility="gone" />
</android.support.design.widget.CoordinatorLayout>
Does anyone know how to remove the white strip at the bottom?
This issue was created by putting the height to wrap toolbar content in the mainl.xml file.
By removing it, I was able to fix the bug.
I want a view to be anchored between AppBarLayout and layout. I get this behavior only on Android Studio editor, but on real device is different like so:
I am really confused. My code is:
<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"
tools:context="view.activity.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="84dp"
android:layout_marginTop="#dimen/activity_vertical_margin">
<!--views on toolbar-->
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_home_content" />
<RelativeLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:background="#drawable/circle_accent"
app:layout_anchor="#+id/whole_layout"
app:layout_anchorGravity="top|start">
<!--img view-->
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
and 'activity_home_content'
<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:id="#+id/whole_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="view.activity.MainActivity"
tools:showIn="#layout/activity_home_toolbar">
<!--some other views-->
</LinearLayout>
Just tried it. As I mentioned in the comments, your whole_layout is a LinearLayout with elevation 0dp. Any element you anchor to this LinearLayout will receive an elevation of 0dp (same as the view you are anchoring to) by default. This means that the RelativeLayout will have an elevation of 0dp.
The AppBarLayout has an elevation of 4dp, so by default the RelativeLayout will always be drawn below it.
The Fix
Give an elevation to the relative layout that is greater than or equal to 4. This will fix your problem, except that the RelativeLayout will now cast a shadow too.
Here is the code for the RelativeLayout
<RelativeLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:background="#drawable/circle_accent"
app:layout_anchor="#+id/whole_layout"
app:layout_anchorGravity="top|start"
android:elevation="4dp">
<!--img view-->
</RelativeLayout>
I'm new to Android development and I'm facing the following issue.
This is the layout of my main activity:
<?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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabIndicatorColor="#color/white"
app:tabTextColor="#color/selected_text"
app:tabSelectedTextColor="#color/white"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
For each tab in the ViewPager I have a fragment, and this is the layout of one of them
<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"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:id="#+id/linear_layout"
tools:context=".fragments.Reviews">
<RatingBar
android:id="#+id/review_totalRating"
style="?android:attr/ratingBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize=".5"
android:isIndicator="true"
android:progressTint="#color/golden"
android:layout_gravity="center"
android:paddingTop="10dp"
android:paddingBottom="5dp" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:id="#+id/listView_reviews" />
</LinearLayout>
Then I populate my ListView with items whose layout is defined in another xml file. My problem is with the ViewPager layout_height: it is now set to match_parent, but the element extends over the bottom of the screen, with the result that the last element of the ListView is covered by the navigation buttons.
This is what I see in the design editor
ViewPager overflow
How can I make the element stop before the navigation buttons?
I faced this issue too. It's because of AppBarLayout behavior in CoordinatorLayout. By default when you create a project from a template it will set up layout with hiding Toolbar. You can run your example and check it - just swipe toolbar up and it will hide and ViewPager will move up and then correctly sticks to the bottom of the screen.
It's not a solution for some cases so you can disable this behavior by removing app:layout_scrollFlags attribute from your Toolbar. After this, the toolbar will become unhideable and the ViewPager will calculate own height correctly.
I solved using a LinearLayout as the only child of the CoordinatorLayout, so everything else becomes a children of the LinearLayout. It seems to me to be just a simple workaround, not a final solution, but now it works. This is now the layout of my main activity:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabIndicatorColor="#color/orange_050"
app:tabSelectedTextColor="#color/orange_050"
app:tabTextColor="#color/orange_050"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
This is the activity_main.xml layout for Androids default tab application:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!-- When I add my own view here and use match_parent, it fills ENTIRE screen, even over the Toolbar. The ViewPager right above does not do this. Why? -->
</android.support.design.widget.CoordinatorLayout>
I am trying to add my own buttons/textviews/etc to my activity_main.xml but I do not know where to add them. The android.support.v4.view.ViewPager uses match_parent although it does not fit the whole screen, it expands across the entire screen besides the Toolbar area at the top. However, whenever I add my own view underneath the android.support.v4.view.ViewPager, lets say RelativeView and set it to match_parent, it expands OVER the Toolbar. This led me to believe that I should put my contents inside the ViewPager tags but that does not work either.
Where should I put my views so that they are not overlapping the Toolbar?
You can wrap your ViewPager in an RelativeLayout and you can add the view child also.
Here is the code snippet which may help you-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button"
android:background="#color/colorNeutral"
android:layout_above="#+id/button2" />
<Button
android:layout_marginBottom="56dp"
android:layout_alignParentBottom="true"
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable too" />
</RelativeLayout>