Question

I want to design a simple interface for a calculator. The calculator has 2 group of keys, the basic keys and the extra keys. I want to put the extra keys on a HorizontalScrollView. Here is the xml file:

<HorizontalScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="A" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="B" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="C" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="D" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="E" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="F" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="G" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="H" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="I" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="J" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="K" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="L" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="M" />
        </LinearLayout>
    </HorizontalScrollView>

Here is how it looks like:

However, it works very well and I can scroll horizontally and click on any button I want. But I want to customize it more. So here is my questions:

• How can I edit the width of each button so that only 5 buttons can be displayed on the screen at a time.
• How can I make the scrolling by 5 buttons offset, i.e if I have the leftmost 5 buttons appear on the screen and I scroll to the right, those 5 buttons will be gone to the left and the next 5 buttons will be shown.
• How to disappear the scrollbar (i.e scrolling with invisible scrollbar).

Thank you 🙂

Answer 1

if you add android:weightsum="5" to your linearlayout and then add android:layout_weight="1" to each of the buttons I think it will put 5 of them on the screen at a time. However I am not very good at using the weight attribute, anytime I use it I end up with a bunch of guess and check, however my gut tells me that it is possible to achieve what you are after with weight and weightsum somehow.

However, I do wonder does it make sense to always show 5 buttons no matter what screen you are on? To me it seems like you may want to vary it at least some so that maybe the smallest of screens only get 4 buttons, and the widest of screens might get 6, otherwise you are going to end up with a very wide range of button sizes across all of the different device densities.

add this to your HorizontalScrollView:

android:scrollbars="false"

that should take care of the scroll bar for you.

As for the part about scrolling 5 at a time, Im afraid to implement this you might have to manually handle it with the horizontalScrollView.smoothScrollBy() method, you’ll have to make it do the calculations to figure out how far it needs to go in order to pass 5 buttons. Then override your onTouch listener to make the smoothScrollBy() call for you.

smoothScrollBy() – its worth looking at smoothScrollTo() also.