Search code examples
androidandroid-layouthorizontalscrollview

How to set width of LinearLayout (with 7 TextView Elements), which is a child of HorizontalScrollView, so that only 4 are visible at a time?


I have an LinearLayout (with 7 TextView Elements), within a HorizontalScrollView. The HorizontalScrollView is set to fillViewport. I want only 4 TextView elements to be visible at a time. The user can scroll to view the rest.

Case 1: I am able get the required layout using layout_weight but then I am not able to scroll, as shown in the attached code. I am assuming the scroll doesn't work because weights are computed after GUI renders and so the width of the HorizontalScrollLayout doesn't change. Is that right?

Case 2: If I fix the width, eg "60dp", Then it displays as required and I can scroll as well. However, this wont work on other screen sizes.

How can I achieve this effect in a way that it works with different screen sizes.

Here's the code for Case 1.

Layout:

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

        <TextView
            style="@style/ViewStyle"
            android:text="1" />

        <TextView
            style="@style/ViewStyle"
            android:text="2" />

        <TextView
            style="@style/ViewStyle"
            android:text="3" />

        <TextView
            style="@style/ViewStyle"
            android:text="4" />

        <TextView
            style="@style/ViewStyle"
            android:text="5" />

        <TextView
            style="@style/ViewStyle"
            android:text="6" />

        <TextView
            style="@style/ViewStyle"
            android:text="7" />
    </LinearLayout>

Style:

<style name="ViewStyle">
    <item name="android:layout_weight">1</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_centerVertical">true</item>
    <item name="android:layout_centerHorizontal">true</item>
    <item name="android:gravity">center</item>
    <item name="android:textSize">10sp</item>
    <item name="android:textColor">@color/white</item>
</style>

Solution

  • Using the layout_weight in a LinearLayout wrapped in a HorizontalScrollView will not go well for what you want. I suggest you do something like this:

    1. remove the layout_weight attribute from the style, also modify the layout_width to a value(or you could use wrap_content)
    2. post a Runnable on one of your views in the onCreate method to update the text of the TextViews like this:

      // wrapperLinearLayout being your LinearLayout wrapping the 7 TextViews
      wrapperLinearLayout.post(new Runnable() {
      
          @Override
          public void run() {
              // find out the width of the HorizontalScrollView
              HorizontalScrollView hsv = (HorizontalScrollView) wrapperLinearLayout
                      .getParent();
              // the value below will be the new width of all the TextViews so
              // you can see only for initially
              int targetWidth = (hsv.getWidth() / 4) * 7;
              // modify the width of all 7 TextViews
              for (int i = 0; i < wrapperLinearLayout.getChildCount(); i++) {
                  LinearLayout.LayoutParams lpc = (android.widget.LinearLayout.LayoutParams) wrapperLinearLayout
                          .getChildAt(i).getLayoutParams();
                  lpc.width = targetWidth / 7;
              }
          }
      });