Pivotal Labs

Main menu

Skip to primary content
Skip to secondary content
  • About
  • Case Studies
  • Team
    • Executives
    • Locations
      • San Francisco (HQ)
      • Boston
      • Boulder
      • Denver
      • London
      • Los Angeles
      • New York
  • Community
    • Blogs
    • Tech Talks
    • Events
  • Careers
    • Lifestyle
    • Principles & Practices
    • Benefits
    • FAQ
    • Apply
  • Tools
  • Contact
    • Press Room
    • Press Releases
    • In The News
    • Press Kit
  • All
  • Labs
  • Standup
  • Tracker

Centering a View within a ScrollView

Aaron VonderHaar
Wednesday, March 14, 2012

We have a View that we want centered on the screen, but that must scroll when there isn’t enough room to show the view fully (for example, when the keyboard is up).

Our first attempt:

<ScrollView
    android:layout_width=...
    android:layout_width=...
    >
    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        />
</ScrollView>

Unfortunately there is a bug in Android where setting layout_gravity=”center” on a ScrollView’s child causes incorrect scrolling when you start hiding and showing other views in the layout (the ScrollView will get stuck with an offset such that you can’t completely scroll to the top, and you can scroll past the bottom).

Here’s the solution:

<ScrollView
    android:layout_width=...
    android:layout_width=...
    android:fillViewport="true"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        />
        <View
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            />
        <View
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />
        <View
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            />
    </LinearLayout>
</ScrollView>

The wrap_content in the LinearLayout is a bit misleading: fillViewport=”true” in the ScrollView will cause its child to always be at least as large as the viewport. (See also Romain Guy’s article about fillViewport.)

  • 0 Shares
  • Share on Facebook
  • Share on Twitter

One comment

  1. Tobias Alrøe says:

    There is a problem with your code.

    should be

    February 16, 2013 at 5:37 am

Add New Comment Cancel reply

Your email address will not be published.

Aaron VonderHaar

Aaron VonderHaar
San Francisco

Recent Posts

  • Standup: 10/29/12: Underscore is sane again
  • Standup 04/24/2012: Make testing email (almost) pleasurable
Subscribe to Aaron's Feed

Author Topics

agile (2)
android (1)
layout (1)
scrollview (1)
  • About
  • Case Studies
  • Team
  • Community
  • Careers
  • Tools
  • Contact
  • Labs
  • Events

Contact Us

contact@pivotallabs.com
+1 415-77-PIVOT
TwitterLinkedInFacebook

Pivotal Tracker

Tracker is the award-winning agile project management tool that enables real-time collaboration around a shared, prioritized backlog.
Visit pivotaltracker.com >