Vertical Parallax scrolling in android - android

I want to achieve parallax scrolling in android without using external library.Is there anyway to achieve this same as in google play store.
Thanks

To implement that in a RecyclerView:
public class MyScrollListener extends RecyclerView.OnScrollListener {
private int totalScrollDistance = 0;
private View parallax;
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
totalScrollDistance += dy;
if (parallax == null) {
parallax = recyclerView.getChildAt(0);
}
parallax.setTranslationY(totalScrollDistance/2);
}
}
Setup:
mRecyclerView.setOnScrollListener(new MyScrollListener());
To implement that in a ScrollView, you have to implement a OnScrollListener:
public class MyScrollView extends ScrollView {
private int lastScrollY;
private OnScrollListener listener;
public void setOnScrollListener(OnScrollListener listener) {
this.listener = listener;
}
private Handler handler = new Handler() {
#Override
public void handleMessage(Message msg) {
int scrollY = getScrollY();
if (lastScrollY != scrollY) {
lastScrollY = scrollY;
// update when lastScrollY != scrollY and keep sending message till lastScrollY == scrollY
handler.sendMessageDelayed(handler.obtainMessage(), 5);
}
if (listener != null) {
listener.onScroll(scrollY);
}
}
};
public MyScrollView(Context context) {
super(context);
}
public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
lastScrollY = getScrollY();
if (listener != null) {
listener.onScroll(lastScrollY);
}
if (ev.getAction() == MotionEvent.ACTION_UP) {
//might still scrolling after touching, use a handler to handle it
handler.sendMessageDelayed(handler.obtainMessage(), 5);
}
return super.onTouchEvent(ev);
}
public interface OnScrollListener {
void onScroll(int dy);
}
}
Then do what we did in OnScrollListener of RecyclerView:
scrollView = (MyScrollView) findViewById(R.id.my_scrollview);
final View parallax = ((ViewGoup) scrollView.getChildAt(0)).getChildAt(0);
scrollView.setOnScrollListener(new MyScrollView.OnScrollListener() {
#Override
public void onScroll(int dy) {
parallax.setTranslationY(dy/2);
}
});

For me the following method worked out .
In your android layout mention the below code:`
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#color/white"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
//place the widgets that you want to collapse .....(here i have used an
ImageView)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/imgViewFirst"
android:src="#drawable/firstImage"
android:scaleType="fitXY"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
//place the widgets that you want to pin after scrolling up.....
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/lightGrey"/>
</android.support.design.widget.AppBarLayout>
//place the widgets you want to show after you scrolled upwards...(here i have
used an ImageView)
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/imgViewSecond"
android:src="#drawable/secondImage"
android:scaleType="fitXY"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>`

Related

No scroll in Custom FooterBarLayout to Follow AppBarLayout

I have following CoordinatorLayout behavior :
public class FooterBarBehavior extends CoordinatorLayout.Behavior<FooterBarLayout> {
//Required to instantiate as a default behavior
public FooterBarBehavior() {
}
//Required to attach behavior via XML
public FooterBarBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
//This is called to determine which views this behavior depends on
#Override
public boolean layoutDependsOn(CoordinatorLayout parent,
FooterBarLayout child,
View dependency) {
//We are watching changes in the AppBarLayout
return getDependentView((ViewPager) dependency) instanceof AppBarLayout;
}
//This is called for each change to a dependent view
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent,
FooterBarLayout child,
View dependency) {
int offset = -getDependentView((ViewPager) dependency).getTop();
child.setTranslationY(offset);
return true;
}
private View getDependentView(ViewPager viewPager) {
int index = viewPager.getCurrentItem();
MainPagerAdapter adapter = ((MainPagerAdapter)viewPager.getAdapter());
ContactsFragment fragment = (ContactsFragment) adapter.getItem(index);
if(fragment.getView() == null) {
return null;
}
return fragment.getView().findViewById(R.id.appBarLayout);
}
}
Here is FooterBarLayout :
#CoordinatorLayout.DefaultBehavior(FooterBarBehavior.class)
public class FooterBarLayout extends RelativeLayout {
public FooterBarLayout(Context context) {
super(context);
}
public FooterBarLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FooterBarLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}
It has been used in the layout as follow:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context=".ui.MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.sample.android.contact.widget.FooterBarLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.sample.android.contact.widget.ListenableTabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#drawable/rectangle_shape"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#color/color1" />
<ImageView
android:id="#+id/triangle"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_above="#+id/tab_layout"
android:layout_marginBottom="#dimen/dimen_triangle_bottom_margin"
android:src="#drawable/triangle_shape"
tools:ignore="ContentDescription" />
</com.sample.android.contact.widget.FooterBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I expect that FooterBarLayout follow AppBarLayout in the fragment and hide/show based on scroll direction. The idea is taken from : https://github.com/devunwired/coordinated-effort/blob/master/app/src/main/java/com/example/android/coordinatedeffort/behaviors/FooterBarBehavior.java
But there will be no scrolling in FooterBarLayout. Do you guys have any idea to resolve this?

Adding buttons dynamically to custom FrameLayout

I have the following XML file that is built out of a custom layout that is created via Java code and 3 buttons inside a linear layout below it -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#color/grey_200"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/grey_200"
android:gravity="center_vertical"
android:orientation="vertical"
tools:layout_height="500dp">
<com.etiennelawlor.tinderstack.ui.TinderStackLayout
android:id="#+id/activity_main_tinder_stack_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<Button
android:layout_width="wrap_content"
android:id="#+id/activity_main_delete_button"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#ff0000"
android:tag="1"
android:text="#string/activity_main_delete" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/activity_main_pass_button"
android:layout_margin="10dp"
android:background="#A9A9A9"
android:tag="2"
android:text="#string/activity_main_pass" />
<Button
android:layout_width="wrap_content"
android:id="#+id/activity_main_approve_button"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#98FB98"
android:tag="3"
android:text="#string/activity_main_approve" />
</LinearLayout>
</LinearLayout>
The issue I am facing looks like this -
I want the image to be able to move on top of the buttons when touching it, but also of course for the buttons to be touchable and functional.
Here is my TinderStackLayout class -
public class TinderStackLayout extends FrameLayout {
// Constants
private static final int DURATION = 300;
// Variable members
private OnCardSwipedListener onCardSwipedListener;
private int screenWidth;
private int yMultiplier;
//Top card
private TinderCardView topCardOnStack;
private Button mDeleteButton, mPassButton, mApproveButton;
//Constructors
public TinderStackLayout(Context context) {
super(context);
init();
}
public TinderStackLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TinderStackLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
#Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
super.addView(child, index, params);
if (onCardSwipedListener != null)
onCardSwipedListener.onNext(getChildCount());
}
#Override
public void removeView(View view) {
super.removeView(view);
if (onCardSwipedListener != null)
onCardSwipedListener.onNext(getChildCount());
}
#Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
}
// Helper Methods
private void init() {
setClipChildren(false);
screenWidth = DisplayUtility.getScreenWidth(getContext());
yMultiplier = DisplayUtility.dp2px(getContext(), 8);
mDeleteButton = new Button(getContext());
mPassButton = new Button(getContext());
mApproveButton = new Button(getContext());
}
public void addCard(TinderCardView tinderCardView) {
View firstCard = getChildAt(0);
if (firstCard != null && firstCard.equals(tinderCardView)) {
return;
}
if (onCardSwipedListener == null)
onCardSwipedListener = tinderCardView.getOnCardSwipedListener();
topCardOnStack = tinderCardView;
ViewGroup.LayoutParams layoutParams;
layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
int childCount = getChildCount();
addView(tinderCardView, 0, layoutParams);
float scaleValue = 1 - (childCount / 50.0f);
tinderCardView.animate()
.x(0)
.y(childCount * yMultiplier)
.scaleX(scaleValue)
.setInterpolator(new AnticipateOvershootInterpolator())
.setDuration(DURATION);
}
public TinderCardView getTopCardOnStack() {
return topCardOnStack;
}
}
Do I need to add them dynamically? or is there a simpler way?
And if I do need to add them dynamically - I would be happy to get a code example of how to do so.

ListView collapse in CustomScrollView

Hello I am new in Android development, and I've read various threads which talked about the fact that a ListView should not be inside a Scrollview and need to wrap in linear or relative layout.
But I have a this layout
<com.itmind.spac.spacapp.custom_extends.CustomScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollViewreceipt"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/include1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/toolbar" />
<Spinner
android:id="#+id/customers_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:theme="#android:style/Theme.Holo.Light.DarkActionBar"
/>
<Spinner
android:id="#+id/venues_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:theme="#android:style/Theme.Holo.Light.DarkActionBar"
/>
<Spinner
android:id="#+id/workgroup_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:theme="#android:style/Theme.Holo.Light.DarkActionBar"
/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="150dp">
<ListView
android:id="#+id/activityList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:minHeight="150dp"
/>
</LinearLayout >
<android.gesture.GestureOverlayView
android:id="#+id/signaturePad"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="5"
android:background="#d3d3d3"
android:eventsInterceptionEnabled="true"
android:fadeEnabled="false"
android:gestureColor="#333"
android:gestureStrokeLengthThreshold="0.1"
android:gestureStrokeType="multiple"
android:fadeOffset="5000"
android:orientation="vertical" >
</android.gesture.GestureOverlayView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="testImage"
android:text="testami"/>
</LinearLayout>
And this is my custoScrollView
public class CustomScrollView extends ScrollView {
private boolean enableScrolling = true;
public boolean isEnableScrolling() {
return enableScrolling;
}
public void setEnableScrolling(boolean enableScrolling) {
this.enableScrolling = enableScrolling;
}
public CustomScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CustomScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomScrollView(Context context) {
super(context);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (isEnableScrolling()) {
return super.onInterceptTouchEvent(ev);
} else {
return false;
}
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
if (isEnableScrolling()) {
return super.onTouchEvent(ev);
} else {
return false;
}
}
}
I need customclass scroll view beacause I can set enable scroll when i touch on
so in my activity that implements GestureOverlayView.OnGestureListener I have:
#Override
public void onGestureStarted(GestureOverlayView overlay, MotionEvent event) {
myScrollView.setEnableScrolling(false);
}
#Override
public void onGestureEnded(GestureOverlayView overlay, MotionEvent event) {
myScrollView.setEnableScrolling(true);
}
So many elements and I need to scrollView for view all elements.
Inside my scrollView I have a listView that I populate with data retrieve from db.
My problem is that my Listview collapse, that shows one line and I see and scroll in one row.
I tried with min-height but doesn't work, and if I put a layout height in Listview, I cant scroll this list.
How can I do this?
I would a list View in a long page so I have to use scrollview or are there solutions?
Below given custom ListView class will make height of your Listview based on its content inside ScrollView. Use it instead of ListView in your xml-layout file same way you use your CustomScrollView.
public class CustomListView extends ListView {
// private boolean expanded;
public CustomListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomListView(Context context) {
super(context);
}
public CustomListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
}
}
Hope this will help you.
Note :- As per this link of Android developer website, We should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling.

notifyDataSetChanged() refresh the whole layout

I didn't describe the question in a good way, so I edit the question to be clear.
I am so confused about this: I wrote a RelativeLayout with a DragViewGroup and a gridview, and I noticed that every time when I used notifyDatasetChanged() method would cause the DragViewGroup do the redrawing thing.And the DragViewGroup extends from LinearLayout which uses ViewDragHelper, so I could not maintain the position already scrolled to.
Here is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.xxxx.DragViewGroup
android:id="#+id/dragview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3f83f7"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="665dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="310dp"
android:id="#+id/mainview"
>
...
</RelativeLayout>
<include
android:layout_width="match_parent"
android:layout_height="355dp"
android:layout_marginBottom="62dp"
layout="#layout/fake_panel" />
</LinearLayout>
</com.xxxx.DragViewGroup>
<RelativeLayout
android:layout_width="match_parent"
android:id="#+id/layout"
android:layout_alignParentBottom="true"
android:layout_height="210dp"
android:background="#ffffff"
android:clickable="true"
>
<HorizontalScrollView
android:id="#+id/btn_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:layout_alignParentBottom="true"
android:layout_marginBottom="26dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:listSelector="#color/transparent"
android:horizontalSpacing="6dp"
android:scrollbars="none" />
</LinearLayout>
</HorizontalScrollView>
<com.xxxx.UniversalSeekBar
....
android:layout_marginTop="18dp"/>
</RelativeLayout>
</RelativeLayout>
DragViewGroup code:
public class DragViewGroup extends LinearLayout {
private ViewDragHelper viewDragHelper;
private View mainView;
private int mainHeight;
public DragViewGroup(Context context) {
super(context);
initView();
}
public DragViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public DragViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
#Override
protected void onFinishInflate() {
super.onFinishInflate();
mainView = getChildAt(0);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mainHeight = mainView.findViewById(R.id.mainview).getMeasuredHeight();
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return viewDragHelper.shouldInterceptTouchEvent(ev);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
viewDragHelper.processTouchEvent(event);
return true;
}
#Override
public void computeScroll() {
if (viewDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
private void initView() {
viewDragHelper = ViewDragHelper.create(this, callback);
}
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
#Override
public boolean tryCaptureView(View child, int pointerId) {
return mainView == child;
}
#Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
return 0;
}
#Override
public int clampViewPositionVertical(View child, int top, int dy) {
return top;
}
#Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
if (mainView.getTop() > -500) {
viewDragHelper.smoothSlideViewTo(mainView, 0, 0);
ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
} else {
viewDragHelper.smoothSlideViewTo(mainView, 0, -mainHeight);
ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
}
}
};
}
Once I use the notifyDatasetChanged() method to update the gridview, my DragViewGroup will slide to the original position itself although it has been dragged before. Apparently the method draw the whole layout instead of only drawing gridview itself.
I need to maintain the dragged position of DragViewGroup, I have tried that override onDraw method in DragViewGroup like this:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// set isDragged label in onViewReleased()
if (isDragged) {
viewDragHelper.smoothSlideViewTo(main, 0, -mainHeight);
}
}
It works, but there is a visible sliding process which I don't want.
Hope someone could help me.Thanks very much.
Store ScrollValue at the time of the scrolling the view, and just use setSelectionMethod on your gridview
gridview.setOnScrollListener(new OnScrollListener() {
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
// TODO Auto-generated method stub
int count = gridview.getCount();
if (scrollState == SCROLL_STATE_IDLE) {
if (gridview.getLastVisiblePosition() >= count
- 1) {
scrollPos = <positionOfList>;
}
}
}
});
Here enter your last position insted of "positionOfList"
And just after calling notifydatasetChanged() call gridview.setSelection(scrollPos)
Hope this will help you!
Just use bellow code in class that you update display:
int index = myList.getFirstVisiblePosition();
View v = myList.getChildAt(0);
int top = (v == null) ? 0 : v.getTop();
myList.setAdapter(adapter);
adapter.notifyDataSetChanged();
myList.setSelectionFromTop(index, top);

Creating a view that holds unknown number of layout children

I want to create a ViewGroup that contains unknown number of other views as children (like LinearLayout):
<Wizard id=... width=... height=...>
<WizardStep id=... nextButtonOnClick=... preButtonOnClick=... >
<LinearLayout ...>
...
</LinearLayout>
</WIzardStep>
<WizardStep id=... nextButtonOnClick=... preButtonOnClick=... >
<RelativeLayout ...>
...
</RelativeLayout>
</WIzardStep>
<WizardStep id=... nextButtonOnClick=... preButtonOnClick=... >
...
</WIzardStep>
</Wizard>
Here Wizard and WizardStep both are ViewGroup. I don't have clue where to start. Extending ViewGroup and required functionality is all I need to do? I will appreciate any help, document, blog, etc.
This can be achieved through a ViewFlipper. If you wanted to do it programmatically, this would be a start. (NOTE: I didn't test this code, just wrote it off the top of my head)
The xml layout flip.xml
<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/flippy"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ViewFlipper>
And the activity would look something like this
public class MainActivity extends Activity{
ViewFlipper flip;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.flip);
flip = (ViewFlipper)findViewById(R.id.flip);
}
private void addViews(){
//This is where you would determine which views to add
flip.add(****** your view 1 *****)
flip.add(****** your view 2 *****)
}
You would add views whenever you were parsing the data to create them dynamically.
Then to navigate your views you can use:
flip.showNext()
flip.showPrevious()
There are more complicated things you can do with it, but that should give you the basics.
My Solution:
WizardView class:
public class WizardView extends RelativeLayout {
Context context;
private final String KEY_LAST_STEP_PASSED = "KEY_LAST_STEP_PASSED";
private final String KEY_WIZARD_FINISHED = "KEY_WIZARD_FINISHED";
private int currentStep;
private boolean isWizardFinished;
private SharedPreferences preferences;
public WizardView(Context context) {
super(context);
this.context = context;
}
public WizardView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
public WizardView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
}
public void startWizard() {
preferences = context.getSharedPreferences("wizard_pref", Context.MODE_PRIVATE);
isWizardFinished = preferences.getBoolean(KEY_WIZARD_FINISHED, false);
if (!isWizardFinished) {
currentStep = preferences.getInt(KEY_LAST_STEP_PASSED, 0);
// Make all Steps (except current step) GONE
int count = getChildCount();
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (currentStep == i) {
child.setVisibility(View.VISIBLE);
} else {
child.setVisibility(View.GONE);
}
}
}
}
public void nextStep() {
int count = getChildCount();
getChildAt(currentStep).setVisibility(View.GONE);
if (currentStep < (count - 1)) {
currentStep++;
preferences.edit().putInt(KEY_LAST_STEP_PASSED, currentStep).commit();
getChildAt(currentStep).setVisibility(View.VISIBLE);
} else {
finishWizard();
}
}
public void previousStep() {
if (currentStep > 0) {
getChildAt(currentStep).setVisibility(View.GONE);
currentStep--;
preferences.edit().putInt(KEY_LAST_STEP_PASSED, currentStep).commit();
getChildAt(currentStep).setVisibility(View.VISIBLE);
}
}
public void finishWizard() {
isWizardFinished = true;
preferences.edit().putBoolean(KEY_WIZARD_FINISHED, true).commit();
setVisibility(View.GONE);
}
}
WizardStep Class:
public class WizardStepView extends RelativeLayout {
public WizardStepView(Context context) {
super(context);
}
public WizardStepView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public WizardStepView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
}
Sample layout file with Wizard:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.wizardtest.WizardView
android:id="#+id/wizard"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.wizardtest.WizardStepView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="wizardNext"
android:text="Next(2)" />
</com.example.wizardtest.WizardStepView>
<com.example.wizardtest.WizardStepView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="wizardNext"
android:text="Next(3)" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:onClick="wizardPrevious"
android:text="Previous(1)" />
</com.example.wizardtest.WizardStepView>
<com.example.wizardtest.WizardStepView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:onClick="wizardPrevious"
android:text="Previous(2)" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="wizardNext"
android:text="Finish" />
</com.example.wizardtest.WizardStepView>
</com.example.wizardtest.WizardView>
</RelativeLayout>
Activity:
WizardView wizardView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wizardView = (WizardView) findViewById(R.id.wizard);
wizardView.startWizard();
}

Categories

Resources