Placing/Overlapping (z-index) a view above actionbar tabs

Question

I have a View that draws something outside the Fragment containing it and I configured it to draw the content outside it using this.

The problem is that it works everywhere but on the ActionBar and ActionBar Tabs.

mActionBar.addTab(
    mActionBar.newTab()
        .setCustomView(t));

I am using appCompat and adding tabs this way:

I added android:clipChildren="false" to all the parent Views, but it doesn't work just for ActionBar and ActionBar tabs.

The desired view:

But the result is this:

Try creating and inflating custom view first, then tabs – Jemshit Oct 02 '15 at 06:30 — Jemshit, Oct 02 '15 at 06:30

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

It's not easy to help you without the complete source code; anyway I can suggest you an alternative approach which may suit your case.

If you are creating a custom floating item (maybe used for a tutorial or an hint), you should avoid to alter the base views hierarchy and prefer a pure overlay solution.

The PopupWindow is exactly what you need:

A popup window that can be used to display an arbitrary view.

Since the PopupWindow acts at Activity level, it should overlay everything in your current Activity.

The popup window is a floating container that appears on top of the current activity.

You can find a simple example here.

edited May 23 '17 at 12:08

Community

1
1

answered Sep 28 '15 at 17:04

bonnyz

13,458
5
46
70

This view is drawing the circle in the onDraw() method and this is a complex view, so i don't want to change the view functionality. – Morteza Rastgoo Sep 30 '15 at 07:46
You are insisting on avoiding altering base hierarchy but you are attaching an alien view to root window. Also the popup window will remain in that container until it's explicitly removed. – bugraoral Oct 05 '15 at 07:26
@wrecker Yes, because it is actually an overlapping and peculiar view which is not related to the ordinary tree layout. Your solution is simply bad, because you are altering the hierarchy to achieve a temporary visive effect (and you still have to remove the rounded view and recalculate the layout). For this use case, a pop-up window is ways better – bonnyz Oct 05 '15 at 07:34

score 0 · Answer 2 · edited May 30 '17 at 09:33

This happens because of hierarchical order of your activity layout. Your ActionBar is being drawn over your View. You can find your activity's frame and add the view there.

private void addCircleView() {
    final FrameLayout frameLayoutRoot = (FrameLayout) getActivity().getWindow()
        .getDecorView().findViewById(android.R.id.content);

    View circleView = inflater.inflate(
        R.layout.my_circle_view, frameLayoutRoot, false);

    ViewGroup.MarginLayoutParams marginLayoutParams =
        ((ViewGroup.MarginLayoutParams) circleView.getLayoutParams());

    marginLayoutParams.topMargin = getStatusBarHeight(getActivity()) 
        + getActivity().getActionBar().getHeight()
        + getResources().getDimensionPixelSize(R.dimen.your_margin_top_circle);

    circleView.setLayoutParams(marginLayoutParams);

    frameLayoutRoot.addView(circleView);
}

public int getStatusBarHeight(Context context) {

    int result = 0;

    final int resourceId = context.getResources().getIdentifier(
        "status_bar_height", "dimen", "android");

    if (resourceId > 0) {
        result = context.getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

Also remember to remove the view when you navigate away to an other fragment.

frameLayoutRoot.removeView(circleView);

Edit:

Please note that this is something that you should be doing at the level that you add ActionBar, which is the activity. In that case you wouldn't need these workarounds. This stuff are way more simple to achive with ToolBar.

score 0 · Accepted Answer · answered Aug 13 '16 at 08:30

0

I finally Removed the tabBar and replaced it with simple buttons to switch between tabs and placed it before CustomLayout in xml to be drawn before it.

<LinearLayout
    ....
    // tabs layout />

<CustomLayout

....
/>

answered Aug 13 '16 at 08:30

Morteza Rastgoo

6,772
7
40
61

Placing/Overlapping (z-index) a view above actionbar tabs

3 Answers3

Linked