HorizontalScrollView hides its child views

Question

Whenever i enclose my custom viewws with horizontal scrollview tags in xml file, the views seem to disappear. In previous related questions it is mentioned as

"Horizontal scroll view hides its children if you set android:layout_gravity="center_horizontal" for inner container."

<HorizontalScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/scroll"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true" >
<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="horizontal"
    tools:layout_constraintTop_creator="1"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintBottom_creator="1"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginEnd="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="8dp"
    tools:layout_constraintLeft_creator="1"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp">

    <com.example.mahikanthnag.cs.views.StateProgressBar
        android:id="@+id/your_state_progress_bar_id"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:spb_currentStateNumber="three"
        app:spb_maxStateNumber="four"
        app:spb_stateBackgroundColor="#BDBDBD"
        app:spb_stateForegroundColor="#009688"
        app:spb_stateNumberBackgroundColor="#808080"
        app:spb_stateNumberForegroundColor="#eeeeee"
        app:spb_currentStateDescriptionColor="#009688"
        app:spb_stateDescriptionColor="#808080"
        app:spb_animateToCurrentProgressState="true"
        app:spb_checkStateCompleted="true"
        />

    <com.example.mahikanthnag.cs.views.StateProgressBar
        android:id="@+id/your_state_progress_bar_id1"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:spb_currentStateNumber="three"
        app:spb_maxStateNumber="four"
        app:spb_stateBackgroundColor="#BDBDBD"
        app:spb_stateForegroundColor="#009688"
        app:spb_stateNumberBackgroundColor="#808080"
        app:spb_stateNumberForegroundColor="#eeeeee"
        app:spb_currentStateDescriptionColor="#009688"
        app:spb_stateDescriptionColor="#808080"
        app:spb_animateToCurrentProgressState="true"
        app:spb_checkStateCompleted="true"
        android:layout_toRightOf="@+id/your_state_progress_bar_id"
        />

    <com.example.mahikanthnag.cs.views.StateProgressBar
        android:id="@+id/your_state_progress_bar_id2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:spb_currentStateNumber="three"
        app:spb_maxStateNumber="four"
        app:spb_stateBackgroundColor="#BDBDBD"
        app:spb_stateForegroundColor="#009688"
        app:spb_stateNumberBackgroundColor="#808080"
        app:spb_stateNumberForegroundColor="#eeeeee"
        app:spb_currentStateDescriptionColor="#009688"
        app:spb_stateDescriptionColor="#808080"
        app:spb_animateToCurrentProgressState="true"
        app:spb_checkStateCompleted="true"
        android:layout_toRightOf="@+id/your_state_progress_bar_id1"
        />
</RelativeLayout>
</HorizontalScrollView>

But in my case I dont have android:layout_gravity attribute at all. How do i solve this?

This is my layout xml file where i added cutom views

Any suggestion is welcome Thanks

Answer 1

Use Linear Layout instead of Relative Layout like below:

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

                            <HorizontalScrollView
                                android:layout_width="wrap_content"
                                android:layout_height="match_parent"
                                android:scrollbars="none">

                                <LinearLayout
                                    android:id="@+id/travelGallery"
                                    android:layout_width="100dp"
                                    android:layout_height="100dp"
                                    android:gravity="center"
                                    android:orientation="horizontal" >
                                     <Your view 1/>
                                     <Your view 2/>
                                     <Your view n/>
                                </LinearLayout>
                            </HorizontalScrollView>
                        </LinearLayout>