Shinobi Android Library Multiple graphs - android

I am using Shinobi Android library to create different graphs like pie,bar and etc.
I have a childFragment (Created dynamically) , In that fragment I want to place multiple graphs one below other. For that I have created a LinearLayout with vertical orientation within a ScrollView. My plan is to adding graphs or charts one by one as childs of LinearLayout. This plan is not working, No matter how many children I added only one child is visible. This is happening only for Shinobi graphs views, If I add buttons or any other views I can see all the children when I scroll.
Problem Point: How can I insert multiple shinobi graphs one over the other in a Linearlayout?
Fragment Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/fragmentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/messageCard"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/messageLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Message:"
android:textColor="#color/accent_material_light"
android:textSize="18sp" />
<TextView
android:id="#+id/messageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/messageLabel" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
</RelativeLayout>

I work for ShinobiControls and placing multiple charts in a ScrollView is a fairly common use case. We have seen a number of successful implementations of this in the past, so I suspect this may simply be an issue with your layout.
I appreciate that you have posted the layout in which you demonstrate that multiple non-shinobi Views can be added to a ScrollView. Could you please post the layout file which includes the ShinobiCharts? This should help us spot the cause, and if necessary we can try it here at ShinobiHQ.
Thanks,
Kai.

Related

How to stack two item using Linear Layout in Android

I want to stack two different charts in one Linear Layout. Here is my code. I want when user choose the progress chart, the chart will convert from com.github.mikephil.charting.charts.LineChart to com.example.imed.Progress.CustomCalenderView and vice versa.
I set the visibility in the JAVA class. However, the problem is, is it possible to stack these two different charts in a Linear Layout? If yes, can you help me to fix the code segment below?
I already add orientation to vertical but these two chart does not stack to each other.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginBottom="20dp"
android:orientation="vertical">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
</com.github.mikephil.charting.charts.LineChart>
<com.example.imed.Progress.CustomCalenderView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:id="#+id/custom_calendar_view">
</com.example.imed.Progress.CustomCalenderView>
</LinearLayout>
If you mean overlaying the Views, then no, it is not possible using a LinearLayout.
To achieve this, you need to use, for example, FrameLayout, CoordinatorLayout or ConstraintLayout.
The recommended layout to create your UI is the ConstraintLayout. It is highly flexible and basically combines the function of any other layout and adds even more.
Refer to the linked docs to find out more about ConstraintLayout.
It is possible, you only need to have the next form
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="match_wrap"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
</com.github.mikephil.charting.charts.LineChart>
<com.example.imed.Progress.CustomCalenderView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_wrap"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:id="#+id/custom_calendar_view">
</com.example.imed.Progress.CustomCalenderView>
The CustomCalenderView should not be in match_parent's height

TextView cutting off content

I have a TextView within a ScrollView all wrapped in a LinearLayout and the end of the TextView is getting cutoff (multiple lines).
This is the XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text=""
android:textSize="10dp"
android:layout_weight="1"
android:layout_gravity="fill_vertical" />
</ScrollView>
</LinearLayout>
The TextView is cutting off regardless of whether the pane scrolls or not and it's driving me mad! Any help?!
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">//try this
if this doesnt solve the problem then:-
also you can try using ScrollView as a parent view.No need of that Linear layout if it just contains a single child(TextView)
Update. I 'fixed' the issue by changing the type of the fragment to work as a RecyclerFragment. Which when the fragment is added to the rest of the structure stops the cut-off!
I've inherited this app mid-development and the hand-over was...finish this app and fix the bugs, so I am finding my way through wearing a blindfold!
Thanks anyway!

Android/XML - How to align an immobile layout to top of parent and have scrollview below?

Please refer to example below. I want to have the top layout (below encased in red) to be unmoving in a scrollview in my activity. I have a scrollview as the parent layout and then I thought having a relative layout for the top one would work, and align it to the top, but that didn't really work out as it still remained within the scrollview. I would like to have the users have the red-layout box remain static when they scroll down.
I figure I would also have to put in a topMargin at the top of the scrollview or something in order to fit the redbox layout in.
XML Code posted here: http://pastebin.com/bxdREbeG
Do something like this (hand code, for reference only):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/YourTopStaticView"
android:layout_width="match_parent"
android:layout_height="48dp"> //Or any other height you want
//Contents of the top view
</RelativeLyout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/YourTopStaticView">
//Contents of the ScrollView
</ScrollView>
</RelativeLayout>
As a side note, do not hardcode children into the ScrollView like that. Use the RecyclerView (which is an updated, modern replacement for ListView), which you will be expected to know how to use if you want to move into serious Android programming. It is actually super easy to use, once you get the hang of it :-)
You should use the ScrollView with only one child (official documentation - http://developer.android.com/reference/android/widget/ScrollView.html). According to your xml, your ScrollView is very complicated with a lot of child widgets.
The best option for you is to use a LinearLayout as the root for the whole container, a LinearLayout( or Relative) for the top layout containing the Reset and Save buttons, and a ListView for the long list that you have. ListView takes care of it's own scrolling. So you don't have to worry about that.
This will improve your code performance as well.
This should suit your needs:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout android:id="#+id/topPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Multi TTS Implementation"/>
<Button android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="SAVE"/>
<Button android:id="#+id/resetAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/save"
android:layout_centerVertical="true"
android:text="RESET ALL"/>
</RelativeLayout>
<ScrollView android:id="#id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/topPanel"
android:layout_alignParentBottom="true"
android:padding="5dp">
<!-- Your scrollable content here -->
</ScrollView>
</RelativeLayout>

Android, Horizontal and Vertical Scroll for GridLayout

I'm having trouble getting a GridLayout to scroll horizontally.
I found a similar question Gridlayout + ScrollView. I tried that method, but it didn't work.
It cuts out many tables (because it was supposed to go display all tables from 1 to 20).
Here is the xml file
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="16dp" >
<android.support.v7.widget.GridLayout
android:id="#+id/table_mapGrid"
android:layout_width="250dp"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
<include layout="#layout/cell_list_loading" />
<TextView
android:id="#+id/table_errorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="20dp"
android:text="#string/message_error_connection"
android:visibility="invisible" />
</FrameLayout>
I want to have dynamic content displayed, varying the number of columns and rows possibly with empty spaces between tables.
This I have accomplished, but the problem is when the width of the GridLayout becomes greater than its container's, I wanted to solve that using horizontal scroll, but it doesn't seem to work...
Any suggestion?
Well I found the solution
It seems like the android ScrollView works as a VerticalScrollView and only that (the name is not so intuitive as HorizontalScrollView).
So to make something scrollable vertically and horizontally, you need to nest a (Vertical)ScrollView inside a HorizontalScrollView, or the other way around, like this
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent">
<!-- Your content here -->
</HorizontalScrollView>
</ScrollView>
The nested HorizontalScrollView / ScrollView will not allow you to scroll both directions at the same time.
I had this problem and created a custom component for that, here is the link if it can help anybody :
https://gist.github.com/androidseb/9902093

view rendered differently when I split the xml layout

I am fairly new to android programming, but not new to java.
I have been trying to setup a non-trivial view, and I'm having an odd problem. I have designed a layout that horizontally scrolls individual player panels (it's Yet Another ScoreKeeper)
So I created a playermain.xml with the HorizontalScrollView and LinearLayout to contain dynamically added player panels which are a TableLayout.
I want the playerpanel buttons and fields to stretch to consume all available playing space vertically (I also have some goals for horizontal, but let's ignore those for now)
Nothing I tried will get the playing panels to stretch - instead they center, but don't fill. The strange thing is, I tried a quick test, which was to create a flattened version of the xml files (ie. I copied two copies of the playerpanel xml into the main xml. when i simply setContentView to this combined xml I get the view I want.
When I do it programatically, I don't get the stretch, and I must be missing something here. I can also post the combined xml, but I thought it unnecessary, basically when I create a single xml file with Scrolls, Layout and tablelayouts, things stretch the way I want. When I create the Scroll/Layout with one xml file, then add the other items to the top level LinearLayout, they don't stretch.
onCreate:
<----SNIP----->
setContentView(R.layout.playingmain);
final LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout llayout = (LinearLayout)findViewById(R.id.layout1);
TableLayout tl = (TableLayout)inflater.inflate(R.layout.playerpanel, null);
InitializePlayer(player1,tl);
llayout.addView(tl);
<----SNIP----->
MAINPANEL.XML
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:isScrollContainer="true"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:gravity="center"
>
</LinearLayout>
</HorizontalScrollView>
Individual Panel.xml:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="5sp"
android:stretchColumns="*"
android:minWidth="200sp"
>
<TableRow
android:id="#+id/NameRow"
android:minWidth="500sp"
android:layout_weight = "1"
>
<TextView
android:id="#+id/PlayerName"
android:text="PlayerName"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<TextView
android:id="#+id/dbg1"
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</TableRow>
<TableRow
android:id="#+id/scoreRow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = "1"
>
<TextView
android:id="#+id/currentScore"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="10"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:id="#+id/dbg2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView"
/>
</TableRow>
<TableRow
android:id="#+id/TableRow17"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = "1"
>
<Button
android:id="#+id/subtractButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="-"
/>
<EditText
android:id="#+id/scoreEntry"
android:layout_span = "2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="number" />
<Button
android:id="#+id/addButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="+"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = "1"
>
<Button
android:id="#+id/plusOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="+1" />
<Button
android:id="#+id/plusFive"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="+5" />
<Button
android:id="#+id/minusOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="-1" />
<Button
android:id="#+id/minusFive"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="-5" />
</TableRow>
</TableLayout>
When I add the inflated objects, I needed to specify the proper parent object instead of null. Once I did that, all xml properties made it into the views.
I was able to confirm/debug this using the hierarchy viewer.
TableLayout tl = (TableLayout)inflater.inflate(R.layout.playerpanel, null);
needed to be
TableLayout tl = (TableLayout)inflater.inflate(R.layout.playerpanel, llayout, false);
Akameswaran,
The reason for this discrepency is simple: XML are "statically" defined with dynamic results based on those static paramaters. That is, XML provides an initial inflation using initial state defined by those XML files. The code, allows changes to be made at runtime and is treated by the engine as "dynamic" even if the positions and dimensions are constant. This leads to some very interesting relationships for those who are unfamiliar with Android.
When you have one XML file, during inflation the rendering engine knows what all of the objects are and how they relate to the view hierarchy. However, when you split the XML file, it doesn't know that the properties of the child views are dependant upon the properties of the parent views, unless you tell it so in code. This is, in essence, because the computer does exactly what you tell it to and freaks out if you don't tell it enough. It will "guess" but almost always guess incorrectly. Like HTML, Android is made to work as much as possible providing A RESULT if it can, even if it is the wrong one.
Android provides several ways to overcome this: OnLayout() allows you to dynamically apply positioning to any activity or view object. OnMeasure() allows you to redefine dimensions. OnDraw() allows you to dynamically draw or inflate the object. By overriding these functions, you can get the behavior back to what you need and still keep you XML modular, like you so desire. Since you are using standardized API controls, you'll probably want to override the functions directly in the Activity and save yourself a lot of trouble.
Hope this helps,
FuzzicalLogic

Categories

Resources