Child views aren't clickable after scaling the rootview

Question

I am scaling rootView which is LinearLayout in fragment of ViewPager but child views aren't clickable.

This is the rootView

public class CarouselLinearLayout extends LinearLayout {
private float scale = CarouselPagerAdapter.BIG_SCALE;

public CarouselLinearLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CarouselLinearLayout(Context context) {
    super(context);
}

public void setScaleBoth(float scale) {
    this.scale = scale;
    this.invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // The main mechanism to display scale animation, you can customize it as your needs
    int w = this.getWidth();
    int h = this.getHeight();
    h = h - ((h / 2) / 2) / 2;
    canvas.scale(scale, scale, w / 2, h);// / 2
}

}

Here is relevant code where i am scaling the rootview.

LinearLayout linearLayout = (LinearLayout) inflater.inflate(R.layout.pager_fragment_dashboard, container, false);
        CarouselLinearLayout root = (CarouselLinearLayout) linearLayout.findViewById(R.id.root_container);
        root.setScaleBoth(scale);

That's how it looks like.

Each circle is the page of PagerView. 1 - 2 - 3

Views in page 2 are clickable but views in page 1 and 3 aren't clickable. How can i fix this issue?

score 0 · Answer 1 · answered Jul 13 '17 at 06:37

You should set that particular Linear Layout as clickable in your xml like below:

android:clickable="true"

Example:

                     <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:clickable="true"
                        android:gravity="center"
                        android:orientation="vertical">
                    </LinearLayout>

This doesn't do anything. If i add this property then it makes pages doesn't respond to click events. — Zeeshan Shabbir, Jul 13 '17 at 06:50

M-Wajeeh · Answer 2 · 2017-07-13T10:07:33.257

0

If you have a ViewPager with three pages and centre one should be scaled then use ViewPager.PageTransformer for this purpose.

Check this question: ViewPager with mutiple visible children and selected bigger.

Basically you override transformPage(View view, float position) and do your transformation for centre page.

For normal scaling always call setScaleX() and setScaleY() in setScaleBoth() instead of scaling canvas in onDraw().

edited Jul 13 '17 at 10:07

answered Jul 13 '17 at 08:53

M-Wajeeh

17,204
10
66
103

I tried doing this but this messed up the ui. I only see one circle on screen. I want to show 3 circles and middle one should be bigger than left and right and carouselling effect as well. – Zeeshan Shabbir Jul 13 '17 at 09:21

Child views aren't clickable after scaling the rootview

2 Answers2

Linked