CODEWITHSUNDEEP
androidandroid-viewpagerwidthpaddingpagertabstrip
Edmond Tamas
Edmond Tamas

Reputation: 3295

ViewPager with setPadding() for horizontal Swipe Cards effect - cut off PagerTabStrip titles

I use setPadding() on my ViewPager to achieve a card swipe effect, which is working fine, but as I apply padding to the ViewPager (60, 0, 60, 0) the width of the PagerTabStrip gets obviously smaller and now I get a 60dp gap between the titles and the both edge of the screen (as in the picture bellow).

I was trying to increase the width of the PagerTabStrip programmatically (in lack of a better solution) using the SetMinimumWidth() but it does not make any difference.

How could I overcome the cut off titles and the 60dp gap caused by setPadding()? Thanks!

code I use:

 pager = (ViewPager) v.findViewById(R.id.pager);
            pager.setAdapter(new CardsPagerAdapter(getActivity(), cardImages, cardTitles, cardDescription));

            pager.setPadding(50, 0, 50, 0);
            pager.setClipToPadding(false);
            pager.setPageMargin(20);

            WindowManager wm = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
            Display display = wm.getDefaultDisplay();
            Point size = new Point();
            display.getSize(size);

            pagerStrip = (PagerTabStrip) v.findViewById(R.id.pager_tab_strip);
            pagerStrip.setMinimumWidth(size.x);

xml:

<android.support.v4.view.ViewPager
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="390dp"
            android:layout_below="@+id/homeTopIv"
            android:layout_marginTop="-85dp">


            <android.support.v4.view.PagerTabStrip
                android:id="@+id/pager_tab_strip"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="@android:color/transparent"
                android:textAppearance="@style/PagerTabStripText"
                android:paddingTop="5dp"
                android:paddingBottom="14dp"/>

        </android.support.v4.view.ViewPager>

enter image description here

Upvotes: 2

Views: 975

Answers (1)

Edmond Tamas
Edmond Tamas

Reputation: 3295

Finally after two days of searching I have found the solution which is simpler than I thought. Hope to help others wanting a nice Swipe Card layout for their android app. All I had to do is to add these lines, both to the ViewPager and the PagerTitleStrip xml:

android:clipChildren="false"
android:clipToPadding="false"

final code:

  <android.support.v4.view.ViewPager
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_below="@+id/imageCont"
            android:layout_above="@+id/bottomIndContainer"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:clipToPadding="false"
            android:clipChildren="false"
            android:layout_marginTop="-85dp">


            <android.support.v4.view.PagerTabStrip
                android:id="@+id/pager_tab_strip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="@android:color/transparent"
                android:textAppearance="@style/PagerTabStripText"
                android:paddingTop="5dp"
                android:clipChildren="false"
                android:clipToPadding="false"
                android:paddingBottom="14dp"/>

        </android.support.v4.view.ViewPager>

Upvotes: 1

Related Questions