CODEWITHSUNDEEP
androidscrollviewandroid-linearlayout
Martin
Martin

Reputation: 7310

Android: Horizontal scrollview with three linear layouts

I want to create an activity with a horizontal scrollview. The content of the scrollview will be three different linearlayouts. Each of these linearlayouts should take up a full width of the device screen. So when the activity start there is only one linearlayout taking up the full width of the screen and when the user swipe to the right another linearlayout will show in the full width. (see picture)

I'm not sure how to set the width of the linearlayouts so they will fit the width of the screen. Any ideas on how to solve this in a good way?

This is what I need

Upvotes: 6

Views: 4225

Answers (1)

Saurabh Pareek
Saurabh Pareek

Reputation: 7134

I think you have to use ViewFlipper instead of scrollView. use touch event on viewflipper for navigation and use animation for flipping of two linear Layouts.

this example will help you View Flipper example

Edited:

steps:

  • there is a ViewFlipper which contains layout1, layout2, layoout3
  • currently layout1 is visible.
  • fling from right to left for showing next layout. layout1 --> layout2

the animation will apply here on both views (layout1 and layout2).

  • for layout2 -> push_right_in.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">

<translate android:fromXDelta="100%" android:toXDelta="0%"
    android:duration="400" />
</set>

  • for layout1 -> push_right_out.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">

<translate android:fromXDelta="0%" android:toXDelta="-100%"
    android:duration="400" />

</set>

  • then set this animation to viewflipper's child.

    flipper.setInAnimation(<your class>.this, R.anim.push_right_in);
flipper.setOutAnimation(<your class>.this, R.anim.push_right_out);
flipper.showNext();
    • now fling from left to right for showing previous layout. layout2 --> layout1

the animation will apply here on both views (layout1 and layout2).

  • for layout1 -> push_left_in.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">

<translate android:fromXDelta="-100%" android:toXDelta="0%"
android:duration="400" />
</set>

  • for layout2 -> push_left_out.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">

<translate android:fromXDelta="0%" android:toXDelta="100%"
android:duration="400" />

</set>

  • then set this animation to viewflipper's child.

    flipper.setInAnimation(<your class>.this, R.anim.push_left_in);
flipper.setOutAnimation(<your class>.this, R.anim.push_left_out);
flipper.showPrevious();

this will give you a smooth animation.

Upvotes: 9

Related Questions