ViewPager preview layout in Android Studio

Question

Is it possible to show a preview layout for ViewPager in AndroidStudio like in ListView/RecyclerView/etc.?

Answer 1

Short answer: No.

I think you're talking about ViewPager from ViewPager 2. My answer will be assuming ViewPager 2. Pls update the question to clarify that.

- Workaround: a hidden include

<include 
            android:visibility="gone"
            tools:visibility="visible"
            layout="@layout/item_that_shows_inside_viewholder"/>

And I agree that's a very poor way to do it. If in constraint layout you can loosely match the same constraints to make this show on top. And yes, you will inflate this in production code so you may incurr in performance slow down depending on what you have there.

It's very unfortunate that tools:layout doesn't exist or work properly (yes, I got inconsistent results while trying it).

- 2nd less worst way is using isInEditMode on code on the parent class

something in the fashion of

class CustomView ....
init {
    // inflate layout that contains ViewPager
    if ( isInEditMode() ) {
      //do something that replaces ViewPager with its inflated view holder
    } 
}

which has served me well when I can use that. However that's unsuitable for most places.

- If at least ViewPager were not final we could extend and do some tricks there using isInEditMode like above.

- You can make a custom class wrapper with internal field ViewPager

One way that does certainly work is making your custom class extend FrameLayout and having an internal view that is your actual ViewPager. But then you have to re-implement and delegate all its methods, which is a big pain. Maybe kotlin has a way to do that, but so far I don't know how. Or maybe using reflection or kotlin poet could be a way to do that. It's too risky for my taste.

- If we could make a databinding adapter to do the isInEditMode like above it would work. But databinding adapters don't run in preview.

- I tend to think these tools attributes get processed by Android Studio, so it would take probably an android studio plugin to work around it.

This is the current full list of tools attributes: https://developer.android.com/studio/write/tool-attributes.html#toolslistitem_toolslistheader_toolslistfooter

It may be useful reading this Android XML Is there a way to use the tool namespace with custom attributes?

where a library to read custom attributes with tools gets mentioned. There may be an alternative with this library, but I have never used it and not sure how it works: https://github.com/giljulio/sneakpeek

I'd love to be proved wrong, but in my opinion all of the options are dead ends or too much effort.

Answer 2

In Andriod studio some views are shown in run time but not in compile time. Think about Frame Layout as a container for fragment transaction. We may place any kind of views on that container in run time. So, it's not possible to show a view while coding. The viewpager is playing same kind of role here. So, we can't show a view there before running and actually placing a fragment/other view there.

I hope you are clear now. :)

Answer 3

This is possible, when putting the ViewPager into it's own XML layout resource.

Alike this one can show the desired Fragment instead of the ViewPager:

<fragment
    android:id="@+id/fragment_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout="@layout/fragment_viewpager"
    tools:layout="@layout/fragment_preview" />

This also provides the XML preview for the navigation graph design view.

tools:layout only works with fragment, but not with include.

Answer 4

i think it's not...some of the layouts have no preview while coding or designing ...like TabLayout

Answer 5

Although I don't think there is such a functionality out of the box, I used the following workaround to achieve design time preview for the ViewPager:

1. Add an <include> with the view that you will use in your ViewPager as a layout,just after the ViewPager itself
2. Set tools:visibility="visible" and android:visibility="gone" to this <include> view so that it will be visible at design time but not at runtime. Also set tools:visibility="gone" to the ViewPager so that it will be invisible at design time.

The idea is to hide ViewPager at design time and show its contents instead while doing the opposite at runtime. This should work for other controls as well.

To show an example:

<androidx.viewpager.widget.ViewPager
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/tabl1"
    tools:visibility="gone">
</androidx.viewpager.widget.ViewPager>

<include
    layout="@layout/fragment_example1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    tools:visibility="visible"
    app:layout_constraintTop_toBottomOf="@id/tabl1" />

I hope this helps you