109

I want the content inside the scrollView as center.

<ScrollView
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay"
    android:layout_gravity="center" >

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="check" 
        android:gravity="center_vertical|center_horizontal"/>

</ScrollView>

Note: there is no android:gravity attribute for scrollvew.

any sol:-

7 Answers 7

184

I had the same issue and finally figured it out. This is for a vertical ScrollView.

Put your ScrollView inside a RelativeLayout and center it in the RelativeLayout. In order for this to work, your ScrollView should have

android:layout_height="wrap_content"

This is how the final code should look like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:layout_centerVertical="true" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b1"/>
            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b2"/>
            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b3"/>
        </LinearLayout>

    </ScrollView>

</RelativeLayout>
7
  • 30
    This one seems to work better for me than the accepted answer. Thank you! Commented Oct 31, 2013 at 14:38
  • Ideally android should look into this issues when there is a hierarchy of layout. Also should provide both scrolling(horizontal/vertical) options in one scrollview.BTW thanks @hadi Commented Jan 5, 2015 at 9:42
  • 2
    This is a bit of a hack, so while this works fine it feels wrong.
    – DariusL
    Commented Aug 12, 2015 at 13:48
  • 3
    Hey its working, but doesn't scroll when the keyboard is visible, I tried add in manifest android:windowSoftInputMode="stateHidden|adjustResize" but, dont scroll, help me please Commented Apr 15, 2016 at 17:41
  • 3
    No need to use heavy RelativeLayout as root view. It can be FrameLayout and android:layout_gravity="center_vertical" for ScrollView
    – Pavlo28
    Commented Sep 8, 2018 at 11:58
148

How about this?

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:layout_gravity="center"
        android:gravity="center">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" 
            android:gravity="center_vertical|center_horizontal"/>
    </LinearLayout>

</ScrollView>
4
  • 2
    Yeah! How ABOUT that! This worked fantastically for me, so thank you very much, kind sir.
    – RileyE
    Commented Jan 10, 2013 at 21:12
  • 103
    There is one problem with this. If you content in the ScrollView is bigger than the scrollview, it will still center it and cut off content at the top (not sure yet why though). Meaning you can't scroll there. Commented Oct 31, 2013 at 13:39
  • 7
    PatrickBoos is right; this doesn't seem to work. Use hadi's answer below, vertically centering the scrollview in a RelativeLayout.
    – Mason Lee
    Commented Nov 3, 2013 at 12:13
  • Yes, this way have bug, content bigger than scrollView, the content will not scroll to top, his top is negative number, strange :(
    – krosshj
    Commented Aug 15, 2017 at 6:57
104

I think a more elegant solution would be to use the ScrollView's android:fillViewport property. A ScrollView is a little different in how it treats it's content view (can only have one), even if you set match_parent (fill_parent) to the ScrollView it won't give that much spacing to it's content view, instead the default behavior is for the ScrollView to wrap the content regardless of what you specify for that view. What android:fillViewport does is tell the ScrollViewto stretch its content to fill the viewport (http://developer.android.com/reference/android/widget/ScrollView.html#attr_android:fillViewport). So in this case, your LinearLayout would be stretched to match the viewport and if the height goes behind the viewport then it will be scrollable which is exactly what you want!

The accepted answer won't work properly when the content extends beyond the ScrollView because it will still center the content view first causing it to cut off a portion of the view, and the ScrollView centered in another layout works but just doesn't feel right, besides I think it will also result in a lint error (useless parent or something along those lines).

Try something like this:

<ScrollView
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay"
    android:fillViewport="true">

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" />

    </LinearLayout>

</ScrollView>

Just remember that the reason it is being centered here now is because of the android:gravity on the LinearLayout since the ScrollView will stretch the LinearLayout so keep that in mind depending on what you add to the layout.

Another good read on ScrollView although not about centering but about fillViewport is http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/

6
  • 11
    This looks like the most correct implementation, no extra views required.
    – DariusL
    Commented Aug 12, 2015 at 13:49
  • 1
    Nice solution, seems to be the cleanest one for me. Thanks for it Commented Sep 18, 2016 at 11:42
  • 2
    Works better than the accepted answer, you saved me a lot of time! Really well done Brian Ethier! Commented Dec 20, 2016 at 17:04
  • This is the correct solution, for all the reason described in it.. If you try the solution above, and your scroll view is wider than your screen, you will indeed have part of your scrollview unreachable and be unable to scroll to it... This should be accepted as the proper solution
    – Speckpgh
    Commented Apr 1, 2018 at 4:36
  • 2
    Typical Stackoverflow .. the correct solution is often somewhere in the middle.
    – Teovald
    Commented Jul 11, 2018 at 2:04
18

Use this attribute in ScrollView

android:fillViewport="true"

Example

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay"
android:fillViewport="true"
>
   <RelativeLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

         <!--Your Code goes here-->

   </RelativeLayout>

</ScrollView>

Make sure to use Single Child in ScrollView just like in above example which is Relativelayout.

6
  • @JoshuaKing may because it is 7 years old question and i posted this answer recently 9 months ago. Commented Feb 7, 2019 at 9:45
  • Ha! oh.. truth. 😆Well, it worked perfectly! So thanks!
    – Joshua
    Commented Feb 7, 2019 at 22:31
  • 1
    This should definitely be the accepted answer! It works perfectly and centers a ScrollView if the content is less than the container size. Works for both ScrollView and HorizontalScrollView. Thank you so much! 💝💖
    – Ray Li
    Commented Apr 16, 2019 at 21:08
  • this can have the unintended effect of stretching your content inside the scroll view Commented Dec 20, 2019 at 13:11
  • @martinseal1987 i think effect will depends on your child component, that how you make your layout design, though if this does not work for you, you can make your own custom scroll view component as per your design and work needs. and please also share you desired result screenshot with me, so i can look into and can provide your more better and working solution. ready to help. cheers. Commented Dec 21, 2019 at 14:39
9

For @Patrick_Boss - what stopped the content from cutting of in my application was to change the gravity and layout_gravity to center_horizontal for the LinearLayout.

It worked for me...but not sure if it will work for you.

Modification of @Ghost's answer -

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" 
            android:gravity="center_vertical|center_horizontal"/>
    </LinearLayout>

</ScrollView>
2
  • 1
    This solves the cutting the top off problem. But there is still one problem with this solution. The ScrollView content was not centered vertically. But this can be fixed by setting the following values of the ScrollView: android:layout_height="wrap_content" android:layout_gravity="center_vertical" Commented Aug 18, 2014 at 9:52
  • I have found that for this to work within other layouts, the top ScrollView must be embedded within a FrameLayout.
    – Theo
    Commented Jul 20, 2016 at 21:26
1

One thing to consider is what NOT to set. Make certain your child controls, especially EditText controls, do not have the RequestFocus property set.

This may be one of the last interpreted properties on the layout and it will override gravity settings on its parents (layout or ScrollView).

0

using the scroll view inside the ConstraintLayout. It is worked for me

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white">

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" />
            </ScrollView>
        </androidx.constraintlayout.widget.ConstraintLayout>

Scroll view height should be wrap_content

<ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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