current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Alright I'm trying to build an activity that has a horizontal scrollview, that the user can swipe through, to view different "pages". My train of thought is these "pages" will be views. The following is a mockup of my idea (to mess around to see if it works)

I've experimented with this as follows:

My content view is set to the the scrollview. (unsure if this is an incorrect approach)

I create the scrollview, and place a view into it as follows:

    private void setupScrollView()
{
    Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics outMetrics = new DisplayMetrics ();
    display.getMetrics(outMetrics);

    float density  = getResources().getDisplayMetrics().density;
    float dpHeight = outMetrics.heightPixels / density;
    float dpWidth  = outMetrics.widthPixels / density;

    int width = (int)MeasureUtils.convertDpToPixel(dpWidth, getApplicationContext());
    int height = (int)MeasureUtils.convertDpToPixel(dpHeight, getApplicationContext());

    _scrollView = new HorizontalScrollView(getApplicationContext());
    _scrollView.setBackgroundColor(Color.CYAN);
    _scrollView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

     Log.i("DEBUG", "Screen dp width = " + dpWidth + " screen dp height = " + dpHeight);

    TextView view = new TextView(getApplicationContext());
    view.setBackgroundColor(Color.RED);
    view.setText("TEST");

    view.setX(0); // Start at the left of the scrollview.

    view.setWidth(width); // Size it so that it fills to the right of the scrollview.

    TextView view2 = new TextView(getApplicationContext());
    view2.setBackgroundColor(Color.GREEN);
    view2.setText("TEST2");

    view2.setX(width); // Start the second "page/view" offscreen to the right where i can scroll to it

    view.setWidth(width); // Fill the screen width



    LinearLayout layout = new LinearLayout(getApplicationContext());
    layout.setBackgroundColor(Color.MAGENTA);

    layout.addView(view);

    layout.addView(view2);

    _scrollView.addView(layout);


}

The idea above is that I will see a view, that takes up the screen, representing a page. This view should be "RED" in color. I can then scroll horizontally to the right and see the second view (view2) representing the next page. This view should be "GREEN" in color. This does not happen. I end up seeing what looks like 1/3rd or 1/2 of my screen being view1, the linearlayout taking up almost the whole screen (a bit of a gap to the right edge where the CYAN from the scrollview bleeds through).

I will admit I am new to Android (coming from iOS).

Am I approaching this the wrong way, and/or is it possible to make this work the way I'm going at it?

Thanks!

share|improve this question
add comment

2 Answers

up vote 1 down vote

You probably do not want to use a horizontalscroll view to create "pages". Try looking at PageViewer

This automatically builds in all the sywpe and inflating logic for you.

Basically you will get a call to inflate a certain page. There you can then create your view (dynamically if you wish) and then just return the root to be rendered.

share|improve this answer
 
The pageviewer looks nice, I may look into that as it is likely a cleaner way to go about this. As of right now though, I'm just trying to see (for learning purposes if you will) if it is possible to do my way. –  Jordan Johns Jun 18 '13 at 21:37
 
I'm sure it is somehow, but you are not "learning" the correct way program Android this way. LinearLayouts have a onMeasure function that is getting called and that's probably why you are having resize issues. You can try using a RelativeLayout or frame as a base and then shoving scroll views into that, but .... eh. See the problem with scrollviews in general is deciding what gets focus (even more so when you put nest scrollviews. Never do this!). –  Frank Sposaro Jun 18 '13 at 21:44
1  
@FrankSposaro: It's still called ViewPager not PageViewer. This might be confusing people. –  AlexS Jun 19 '13 at 7:09
 
Ahh. Glad I included a link to it then –  Frank Sposaro Jun 19 '13 at 15:18
add comment
up vote 0 down vote accepted

Alright I've figured out what I was doing wrong, and it turned out to be something very small...

The complete code is here:

    private void setupScrollView()
{
    Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics outMetrics = new DisplayMetrics ();
    display.getMetrics(outMetrics);

    float density  = getResources().getDisplayMetrics().density;
    float dpHeight = outMetrics.heightPixels / density;
    float dpWidth  = outMetrics.widthPixels / density;

    int width = (int)MeasureUtils.convertDpToPixel(dpWidth, getApplicationContext());
    int height = (int)MeasureUtils.convertDpToPixel(dpHeight, getApplicationContext());

    _scrollView = new HorizontalScrollView(getApplicationContext());
    _scrollView.setBackgroundColor(Color.CYAN);
    _scrollView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    Log.i("DEBUG", "Screen dp width = " + dpWidth + " screen dp height = " + dpHeight);

    TextView view = new TextView(getApplicationContext());
    view.setBackgroundColor(Color.RED);
    view.setText("TEST");

    view.setX(0);

    view.setWidth(width);
    view.setHeight(height - 50);

    TextView view2 = new TextView(getApplicationContext());
    view2.setBackgroundColor(Color.GREEN);
    view2.setText("TEST2");

    view2.setX(0);

    view2.setWidth(width);
    view2.setHeight(height - 50);

    LinearLayout layout = new LinearLayout(getApplicationContext());
    layout.setBackgroundColor(Color.MAGENTA);

    layout.addView(view);

    layout.addView(view2);

    _scrollView.addView(layout);


}

This creates a horizontal scrollview programmatically, as I had, but the problem was that I was setting the second view to be "width" away, when it should be set to "0"as can be seen by:

view2.setX(0);

With that, I get 2 "views" that resemble pages in my scrollview that I can swipe through. Each taking up the whole page.

Hate having the code close and it being a simple fix that I missed :|

Hope this helps anyone else that tries to do it this way. I'm going to look into the PageViewer as Frank suggested.

share|improve this answer
 
Glad you found it. Now rotate the screen or try a different screen size device. :p –  Frank Sposaro Jun 18 '13 at 21:45
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.