Develop Reference

Horizontal scroll view with child TextViews not scrolling

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.
e.g :
<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>`

Xamarin:Android - Layout_Height changes with wordwrap

I have three identical buttons in one linear layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Kamera öffnen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Bild hochladen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Abbrechen" />
</LinearLayout>
If I turn my device from horizontal to vertical, the text of the first two buttons need a wordwrap.
The problem is, that the buttons change their height -> the two buttons with wordwrap have a lower height than the third button with only one text line.
Horizontal view:
Vertical view:
Why is that happening and how can I prevent it?

Hope this following xml will resolve your problems.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android"
android:weightSum="3">
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Kamera öffnen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Bild hochladen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Abbrechen" />
Use weightSum on root layout while your are using layout_weight coz it will make conflict when you have more view or complex view. You should also use layout_width/height="0dp" depending on root layout orientation for getting the advantage of layout_weight. Because you trying to control your view using weight. Thank you

Nesting a Listview and LinearLayout together within a LinearLayout creates ui problems [duplicate]

This question already has answers here:
How to use ScrollView in Android?
(8 answers)
Closed 5 months ago.
I want my ui to be scrollable. I have a LinearLayout within which a ListView and another Linear layout are nested. Following is my code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="10"
android:divider="#null"
android:dividerHeight="0dp"
android:paddingTop="10dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_weight="5"
android:background="#drawable/border"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vessal Name:" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Maize" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ETD: " />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="09 OCT 2014" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ETA: " />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="89.Oct 2034" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Revised ETA" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9 Oct 2014" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Notes/ Remarks" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nice delivery" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
The problem is that the few textviews present at the last is not visible in the ui. How can I make it visible?

According to Docs
Layout container for a view hierarchy that can be scrolled by the
user, allowing it to be larger than the physical display. A ScrollView
is a FrameLayout, meaning you should place one child in it containing
the entire contents to scroll; this child may itself be a layout
manager with a complex hierarchy of objects. A child that is often
used is a LinearLayout in a vertical orientation, presenting a
vertical array of top-level items that the user can scroll through.
You should never use a ScrollView with a ListView, because ListView
takes care of its own vertical scrolling. Most importantly, doing this
defeats all of the important optimizations in ListView for dealing
with large lists, since it effectively forces the ListView to display
its entire list of items to fill up the infinite container supplied by
ScrollView.
The TextView class also takes care of its own scrolling, so does not
require a ScrollView, but using the two together is possible to
achieve the effect of a text view within a larger container.
Your xml would be like
<ScrollView>
<LinearLayout>
<EditText/>
<TextView/>
</LinearLayout>
</ScrollView>
Note: There should be only one parent layout inside a ScrollView

Aligning views with views outside the RelativeLayout

I am designing a table using RelativeLayout in Android and add entries programmically. The result pleases me so far:
The layout code is
<RelativeLayout
android:id="#+id/table_relativelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
<TextView
android:id="#+id/example_column1_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/column1_header"
android:text=""
android:paddingLeft="8dip"
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column2_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column2_header"
android:text=""
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column3_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column3_header"
android:paddingRight="8dip"
android:text=""
android:visibility="gone"
/>
</RelativeLayout>
However, as more entries are added, scrolling becomes necessary. So I wrap the whole thing in a ScrollView (as per this answer)
<ScrollView
android:id="#+id/table_scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true"
>
...
</ScrollView>
This of course has the result that the header row is hidden if I scroll down. I'd much rather have it outside the ScrollView but then I don't know how to align the entries with the header. Any ideas?

Try with something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
</LinearLayout>
<ScrollView
android:layout_below="#id/header"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/scroll_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<rows>
</LinearLayout>
</ScrollView>
<RelativeLayout>

you don't want to do this with xml.
Because you simply can't reference views inside of an relativeLayout
from the outside and vice versa, to align things.
I had to deal with exactly your issue, as I implemented a in size selfadjusting tableView. The trick is to add all your textViews for one row into a ViewGroup (LinearLayout e.g, because easy to use with addView) and calculate the width of every row header in forehand. Than set the size of the viewGroups programmaticaly.
That's the key. This way, you can easily change your row header later and keep beeing flexible. Moreover you are not limited to a fixed size of columns.
calculate the width of the header
set the size of the (e.g) LinearLayouts for every row
add all TextViews to the LinearLayouts
This should hopefully help you. Answers to all the upcoming question for calculation sizes etc, should you find yourself on stackoverflow.
Greets, Steve.

OK, I found a solution: I'll have the three header TextViews outside of the ScrollView, as suggested by several commenters, and three additional "header" TextViews with the same parameters plus android:visibility="invisible" inside the ScrollViews. Those invisible TextViews will be used to align the visible entries.
Thanks for your answers!

Block elements in android development

I am going through the tutorials at developer.android.com and they do not cover something I want to try.
In my XML file (LinearLayout) I have 3 elements, a textblock and 2 buttons.
I would like to have the TextBlock taking up all available width. IN HTML terms I would like it to be block.
Then underneath I would like the 2 buttons to be on the same line. In HTML terms I would like it to be inline.
My XML:
<LinearLayout android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Another option:
Create a linearlayout and add textview and another linearlayout with orientation horizontal within that the 2 buttons.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

you can sort of do it in one linear layout, but it's not going to be very flexible. You'd either want to use a relative layout and position the button below the text view or you can use two linear layouts (first is vertical orientation containing the textview and the second linear layout, that one is a horizontal linear layout containing the two buttons)

Simple fixes:
<TextView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<Button android:id = "#+id/thisbutton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="thisbutton"
/>
That's the basic idea.
Look up all the features that are available in the layouts. Because there are a lot, and they are quite flexible.