Home » Android » ViewPager preview layout in Android Studio

ViewPager preview layout in Android Studio

Posted by: admin April 23, 2020 Leave a comment

Questions:

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

How to&Answers:

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

Answer:

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:

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:

You can achieve design time preview for the ViewPager like so:

  1. Add an <include> with your view as a layout just after the ViewPager
  2. Set its tools:visibility=”visible” and android:visibility=”gone” so that it will be visible at design time but not at runtime.

To show an example:

<androidx.viewpager.widget.ViewPager
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/tabl1">
</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

Answer:

For either ListView and RecyclerView you can enable preview by adding:

tools:listitem="@layout/view_onboarding_slide"

I cannot find equivalent solution for ViewPager.

More details in this article.