Android implemeneting Gmail viewpager outline border

Question

this below screen shot is Gmail viewpager which that implemented outline borders for viewpager Fragments

swipe from left to right

swipe from right to left

And now i want to implementing that for my application but can design that:

swipe from left to right

swipe from right to left

My root layout xml is:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="-15dp"
    android:layout_marginRight="-30dp"
    android:background="#949494"
    android:paddingLeft="-15dp"
    android:paddingRight="-15dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="30dp"
        android:background="#ffffff">

        ...

    </FrameLayout>

</FrameLayout>

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

1

Perhaps you want something like this? insert separator between view-pager

You can use a margin drawable to reproduce the style.

edited May 23 '17 at 12:00

Community

1
1

answered Jul 29 '16 at 15:09

Mdlc

7,128
12
55
98

i think this viewpager has 3 layout, with 3 color, which you can see on my topic – mahdi pishguy Jul 29 '16 at 15:20
A drawable does not have to be a solid color. A drawable can also be a an object with multiple colors or a 9 patch – Mdlc Jul 29 '16 at 15:36

score 0 · Answer 2 · answered Jul 29 '16 at 15:35

My solution to implementing viewpager like with Gmail

Result:

viewPager root layout:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#d1d1d1">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_horizontal_ntb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="-25dp"
        android:layout_marginRight="-25dp"
        android:layout_marginTop="30dp"/>

fragment layout:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="-20dp"
    android:layout_marginRight="-20dp"
    android:background="#eeeeee">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="#ffffff">
    </FrameLayout>

</FrameLayout>

and setPageMargin:

viewPager.setPageMargin(80);

Android implemeneting Gmail viewpager outline border

2 Answers2