ViewPager preview layout in Android Studio
AndroidAndroid LayoutAndroid StudioAndroid ViewpagerAndroid Problem Overview
Is it possible to show a preview layout for ViewPager
in AndroidStudio like in ListView
/RecyclerView
/etc.?
Android Solutions
Solution 1 - Android
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).
isInEditMode
on code on the parent class
- 2nd less worst way is using 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.
isInEditMode
like above.
- If at least ViewPager were not final we could extend and do some tricks there using - 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.
isInEditMode
like above it would work. But databinding adapters don't run in preview.
- If we could make a databinding adapter to do the - 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 https://stackoverflow.com/questions/33370878/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.
Solution 2 - Android
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. :)
Solution 3 - Android
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
.
Solution 4 - Android
i think it's not...some of the layouts have no preview while coding or designing ...like TabLayout
Solution 5 - Android
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:
- Add an
<include>
with the view that you will use in your ViewPager as a layout,just after the ViewPager itself - 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
Solution 6 - Android
For either ListView
and RecyclerView
you can enable preview by adding:
tools:listitem="@layout/view_onboarding_slide"
I cannot find equivalent solution for ViewPager
.