Add 'Arrow' Title Indicator Style about viewpagerindicator HOT 10 OPEN

Since I was the one to initially suggest this with a private message to Jake, here's one simple and temporary solution (or definitive, since it's working great) for anyone looking to use a similar style:

res/drawable/viewpager_indicator_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/viewpager_indicator_container" />
    <item>
      <bitmap
          android:gravity="bottom|center_horizontal"
          android:src="@drawable/viewpager_indicator_arrow" />
    </item>

</layer-list>

Indicator XML

<com.viewpagerindicator.TitlePageIndicator
    android:id="@+id/viewpager_page_indicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/viewpager_indicator_bg" />

res/values/styles.xml

<style name="Widget.TitlePageIndicator">
    <item name="footerLineHeight">0dp</item> <!-- Needed for the cut-out effect -->
    <item name="footerIndicatorStyle">none</item> <!-- Important -->
    <item name="footerPadding">9dp</item>
    <item name="selectedColor">#FF66A600</item>
    <item name="textColor">#AA66A600</item>
    <item name="textSize">12sp</item>
    <item name="topPadding">2dp</item>
</style>

The "container" drawable will stretch horizontally but the height is exactly the height needed (after setting the text size and paddings). And the arrow is just that, a tiny arrow.

It's working great, here's a preview:

from viewpagerindicator.

@JakeWharton Do you also want those 2 black arrows on the side of the screen implemented in your library?

from viewpagerindicator.

@vdesmet93 Yes. See #6.

from viewpagerindicator.

@vdesmet93 You're going to implement this? If so, are you going to allow the arrow to also be a drawable? I think it's important if devs need a style with an outline (like I have on the screenshot above) or a shadow effect...

from viewpagerindicator.

@rfgamaral Yes, I implemented most of it. It's possible to set up the indicators from XML.
Like this:
xmlns:vpi="http://schemas.android.com/apk/res/your.package.name"
vpi:adjacentIndicatorStyle="custom"
vpi:adjacentIndicatorWidth="25px"
vpi:adjacentIndicatorHeight="25dp"
vpi:adjacentIndicatorLeft="@drawable/icon"
vpi:adjacentIndicatorRight="@drawable/ic_btn_ffwd"

And/or from code:
titleIndicator.setAdjacentIndicatorStyle(AdjacentIndicatorStyle.Custom);
titleIndicator.setAdjacentIndicatorLeft(R.drawable.icon);
titleIndicator.setAdjacentIndicatorRight(R.drawable.ic_btn_ffwd);
titleIndicator.setAdjacentIndicatorWidth(20);
titleIndicator.setAdjacentIndicatorHeight(40);

You can set the Style to arrows, then it'll use normal black arrows(like in the screenshot from JakeWharton). If you set the Style to custom you can set custom drawables. A custom width/height works on both styles.

Here's a screenshot:
http://s17.postimage.org/67qqdvavz/VPI_Adjacent_Indicator.png

It's not yet ready for a pull request, I hope I can finish it in the next few days. If you want to have a look, it's in the master branch of my forked repo.

from viewpagerindicator.

Can the width/height attributes be omitted if the drawable is already small enough (and/or multiple DPI versions provided)?

Looking really good so far! Be sure to submit the pull request against the dev branch and not master when you're done if you would.

from viewpagerindicator.

At the moment the widht/height are optional.
Defaults:
Height = 33% of the height of the pagerIndicator
Width = 50% of his height

That size is almost equal to the size you provided in your screenshot, but for any non-triangle drawable it's to small.

I don't think changing the defaults to the drawable's size will be useful, that'd require developers to make a custom image for every screen resolution. Please correct me if I'm wrong.

from viewpagerindicator.

@vdesmet93 I was talking about my suggestion on this issue, the arrow on the active page and not about the arrows on the left/right page.

What I exactly meant was that you could make this available (again, the arrow on the selected page) with a specific and built-in design where devs can basically change colors. In other words, like it currently works, but instead of being a fat bar under the page title, it would be an arrow. Actually, you could implement 2 styles, one for a filled arrow and another for a "cut-out" arrow.

But a third option should be to use a drawable for the arrow and background so anyone can customize it the way they want it.

Anyway, about the discussion above, here's some remarks/questions:

1. Are the width/height attributes really necessary to even exist? If it's a built-in style, the size should be automatically calculated, if it's a drawable, it's the drawable's size (and of course that will depend on the density if the dev provided multiple densities drawables). Or am I missing something here?

2. The built-in style "arrows", does it come from drawables too or are they drawn on the canvas? I think they should be basic arrows, painted on the canvas and you could provide a color attribute for them. So they are a little customizable for devs who don't want to provide custom drawables but also don't want black arrows.

Just a few suggestions...

from viewpagerindicator.

I agree with all those points.

Default should definitely be drawn in code (like the current triangle indicator) for now. If a drawable is supplied the width and the height can be automatic. Android's density filtering will take care of choosing the correct size.

from viewpagerindicator.

@rfgamaral Oh, sorry, I thought you were talking about the side arrows. I'll try to implement that center-arrow in the future, with some customization for developers(color/drawable etc).
I thought the filled arrow is already implemented in the viewpagerIndicator(it's in the demo app), so only the cut-out arrow is what I need to add.

( @JakeWharton )

1. I'll change the width/height to drawable default, and then the width/height attributes can be used to set a custom size. I guess that'll be the best option for developers. Then it's automatic and developers can optionally set a custom value.

2. At the moment the arrows are a drawable, but I'm going to scrap that. As you said, that'd allow developers to set a custom collor easily.

from viewpagerindicator.