I am showing the user some stats. There is a lot of information on the screen so space is cramped. I decided to use a horizontal scroll view which contains 9 TextViews in total. However, I only want to display three of these text views at a time.
Like so:
(The arrow is a just separate image view that just show's the user they can scroll)
This is fine and how I want it to look. However, there is 6 other stats which I need to show. I wish to be able to scroll to the right and three new text views to appear (and back to the left when I get to the last three stats). This horizontal scroll view is the parent of a LinearLayout which has 9 child TextViews. I tried putting every three TextViews in there own linear layouts but was prevented because the Horizontal Scroll View can only have one LinearLayout child.
I currently have the other 6 stats visibility to gone
because they are currently added below the top 3 stats in a vertical order like this image shows:
My plan was originally to pro-grammatically display the next three stats and hide the original when scrolled but before I programmed this I tested to see if the first three were scroll-able but they don't react when I try to scroll.
How do I got about this?
Here is my current xml:
<HorizontalScrollView
android:id="@+id/sv_horizontalP1Stats"
android:layout_width="0dp"
android:layout_height="97dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="@+id/sv_horizontalP2Stats"
app:layout_constraintEnd_toStartOf="@+id/sv_player1PastScores"
app:layout_constraintHorizontal_bias="0.596"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/iv_navArrowP1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv_legAvg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="@string/tv_LegAVG"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_matchAVG"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="@string/tv_MatchAVG"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_first6Avg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="@string/tv_first6AVG"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_100plus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/tv_100plus"
android:visibility="gone" />
<TextView
android:id="@+id/tv_140Plus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/tv_140plus"
android:visibility="gone" />
<TextView
android:id="@+id/tv_180s"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/tv_180"
android:visibility="gone" />
<TextView
android:id="@+id/tv_bestFinish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/tv_bestFinish"
android:visibility="gone" />
<TextView
android:id="@+id/tv_bestLeg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/tv_BestLeg"
android:visibility="gone" />
<TextView
android:id="@+id/tv_doublesPercentage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/tv_doubles"
android:visibility="gone" />
</LinearLayout>
</HorizontalScrollView>
All you need to do is create multiple linear layouts inside your main linear layout. Each containing 3 textviews and change the orientation of main linear layout to horizontal and you're good to go.
eg :
<HorizontalScrollView
android:id="@+id/sv_horizontalP1Stats"
android:layout_width="0dp"
android:layout_height="97dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="@+id/sv_horizontalP2Stats"
app:layout_constraintEnd_toStartOf="@+id/sv_player1PastScores"
app:layout_constraintHorizontal_bias="0.596"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/iv_navArrowP1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"> <!-- Changing orientation to horizontal -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"> <!-- Group 1 of TV -->
<TextView
android:id="@+id/tv_legAvg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="@string/tv_LegAVG"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_matchAVG"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="@string/tv_MatchAVG"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_first6Avg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="@string/tv_first6AVG"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"> <!-- Group 2 -->
// .. Next three
</LinearLayout>
// .. And soo on
</LinearLayout>
</HorizontalScrollView>`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.