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>`
Related
I'm trying to build the screen from picture on a tablet.
Inside fragment i have a RecyclerView with items. Each item has as root a LinearLayout. and has exactly 8 children spread horizontally with weight 1 (as in below code). The first cell on each row is a TextView and the other cells are a CustomView (a vertical LinearLayout with 2 TextViews).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:orientation="horizontal" />
<TextView
android:id="#+id/item_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/item_border"
android:drawableTop="#drawable/ic_id"
android:fontFamily="#font/cabin_bold"
android:gravity="center"
android:padding="5dp"
android:text="#string/mock"
android:textColor="#android:color/black"
android:textSize="17sp" />
<CustomView X 7 times
android:id="#+id/item_attr1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
app:titleText="Mock" />
</LinearLayout>
Given that, the row's children are not spread correctly on width, as you can see in the image. I've tried with weightSum attribute to row's root LinearLayout, but no luck. I've noticed that this issue appears (especially) when the first child of the row (which is a TextView) has a many characters.
Here is fragment's layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F1F1F1">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
app:layoutManager="LinearLayoutManager" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="30dp"
android:src="#android:drawable/ic_input_add"
android:tint="#android:color/white"
app:backgroundTint="#android:color/holo_blue_dark"
app:fabSize="normal" />
<TextView
android:id="#+id/loading_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/roboto_light"
android:text="#string/loading"
android:textSize="23sp"
android:visibility="gone" />
</android.support.design.widget.CoordinatorLayout>
Any ideas are appreciated
On the TextView:
<TextView
...
android:maxLines="1"
android:maxLength="8"
android:ellipsize="end"/>
This will prevent the TextViews from becoming too big. You can play about with the maxLength attribute to see which will fit your scenario better.
Your LinearLayout should encompass the rest of the code it's self closing now. Replace the closing tag /> with >
Close the LinearLayout below the custom view
I have 6 Image buttons or maybe 9 in future and I want to arrange 2 Image buttons side by side on every row
how can I do it?
I have used gridview but It wasnt what i wanted
here is my code
////////////////////////////////////////////////////////////////////////
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="60dp"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/apple"
android:id="#+id/apple"
android:background="#null"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/googleplay"
android:id="#+id/googlep"
android:background="#null"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/psn"
android:id="#+id/psn"
android:background="#null"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/steam"
android:id="#+id/steam"
android:background="#null"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/xbox"
android:id="#+id/xbox"
android:background="#null"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/amazon"
android:background="#null"
android:id="#+id/amazon"
/>
</LinearLayout>
</ScrollView>
Create a vertical recycler view and keep two buttons in xml which you will inflate in it as you shown in figure and keep length to 3 in getItem count so you will get two button in every row and six buttons in three row
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
I am trying to create a layout as per this picture (paint'ed).
Layout Design
Target level is API 17. This has to be created programmatically, not using XML. This has to be a responsive design.
I extensively researched and attempted other partially similar situations on stackoverflow, using GridLayout, TableLayout, GridView, various layout parameters, gravity, weight, view nesting and so on. However,
(a) I can't get the text buttons width to fill the available width real estate as per device screen size and orientation. Buttons with shorter texts are coming with shorter width.
(b) The plus, minus and number buttons are of fixed height and width irrespective of screen sizes and orientation. But they are not aligning with the text button in the left on the same row. only the bottom few pixels are visible.
I would appreciate any code snippet that can achieve the above layout. Thanks a million.
UPDATE:
Following inputs from #tiny-sunlight, I did this. Next I will recreate this programmatically.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTable"
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layoutRow"
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="10dp"
android:layout_weight="17"
android:text="This is my button"
android:textSize="15sp"
android:textAllCaps="false"
android:gravity="start"
android:layout_width="0dp"
android:layout_height="40dp" />
<Button
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:text="-"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="0"
android:textSize="15sp"
android:gravity="center"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:layout_weight="1"
android:text="+"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Try to build layout below programmatically.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="1111"
android:layout_width="0dp"
android:layout_height="40dp" />
<ImageView
android:layout_marginRight="5dp"
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginRight="5dp"
android:background="#44bb11"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="11"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You can use a recycler view, which will provide you scrolling option plus bind views on the fly for you.
So load a linear layout (orientation horizonal) into the recycler view. now for the layout, it then becomes easier. You need a textview, button,textview,button.
For each of these textview and buttons, set widht = 0dp and weight as 7,1,1,1 respectively i.e. your leftmost textview occupy 70% of width whereas all other occupy 10%. Obviously you can change these weights as per your requirements. Thats it for the layout.
Now just fill your data using the adapter.
I have a game layout in my app that has four buttons that should display at the top of my view and then I have two FrameLayouts that are also in this linear layout. The first FrameLayout just makes the top 1/4 of the view so my imageButtons that implement the Drag and drop API are not allowed at the top. The second FrameLayout is for the bottom 3/4 of the view which has 4 imagebuttons in it.
My issue is that when the game layout is displayed, the buttons in the linear layout are displayed just how i want them to, but the two FrameLayouts are squished to the top right corner.
Here is the code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/game_layout" >
<Button
android:id="#+id/doneButton"
android:layout_width="170dp"
android:layout_height="wrap_content"
android:onClick="onDoneClicked"
android:text="#string/done" />
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCancelClicked"
android:text="#string/cancel" />
<Button
android:id="#+id/leaveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onLeaveClicked"
android:text="#string/leave" />
<Button
android:id="#+id/finishButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onFinishClicked"
android:text="#string/finish" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.75"
android:orientation="horizontal"
android:id="#+id/topHalf" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:orientation="horizontal"
android:id="#+id/bottomHalf" >
<ImageButton
android:id="#+id/polarCapButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/polarCapButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:background="#drawable/polarcap" />
</FrameLayout>
<TextView
android:id="#+id/scores"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="#+id/spaceRockButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:background="#drawable/spacerock" />
<ImageButton
android:id="#+id/spaceRockButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:background="#drawable/spacerock" />
</LinearLayout>
Any help would be appreciated guys. Thanks.
I see several things that can be a potential problem.
Your linear layout contains several widgets and only 2 of those contain layout_weight values. To solve this issue, you want to wrap your two frame layouts in another LinerLayout container, where you specify the distribution of your 2 frame layouts inside your new linear layout.
In your new linerLayout, you want to specify the total weight of the layout, such as: android:weightSum="1".
Depending of your linear layout orientation, (if unspecified, it will be horizontal) If your LinearLayout orientation is horizontal, specify: android:layout_width="0dp". If the orientation is vertical, specify: android:layout_height="0dp" for the child elements.
Also, it seems to me that you want your buttons to align horizontally next to each other (horizontal orientation), and your two frames to align underneath the buttons, but right underneath each other (vertical orientation).
So in this case, the code would look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/top_layout" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/game_layout" >
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCancelClicked"
android:text="#string/cancel" />
<Button
android:id="#+id/leaveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onLeaveClicked"
android:text="#string/leave" />
<Button
android:id="#+id/finishButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onFinishClicked"
android:text="#string/finish" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/ll_layout_frames" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.75"
android:orientation="horizontal"
android:id="#+id/topHalf" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal"
android:id="#+id/bottomHalf" >
<ImageButton
android:id="#+id/polarCapButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/polarCapButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:background="#drawable/polarcap" />
</FrameLayout>
</LinearLayout>
<!-- you can insert more widgets here, they will be placed in the vertical linear layout -->
</LinearLayout>