Custom view with scroll in Xamarin.Android - xamarin

I have to display a large diagram in a Xamarin.Android application and the user must be able to scroll it horizontally and/or vertically.
A. My first thought was to create a custom view (inheriting from View) that handles the drawing in OnDraw and then place the custom view in a ScrollView. But in this situation I do not know:
how to tell the ScrollView how much content it has to scroll;
how do I know inside my custom view where the scroll is so that I can draw the corresponding part of the diagram (I want to draw only what is visible).
Just for testing I tried the layout below but I cannot get it to scroll:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/btnLoadDiagram"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Load Diagram" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars = "vertical"
android:scrollbarStyle="insideInset" >
<my.namespace.DiagramView
android:layout_width="2000dp"
android:layout_height="2000dp"
android:id="#+id/diagramView" />
</ScrollView>
</LinearLayout>
B. The second thought was to inherit from ScrollView but I need to scroll both on horizontal and on vertical.
What is the recommended approach here?

In the end I implemented a solution based on option A.
I implemented a custom view that inherits from Android.Views.View. The view implements the GestureDetector.IOnGestureListener and ScaleGestureDetector.IOnScaleGestureListener interfaces for scrolling and zooming. Internally I keep track of current content position and draw only the content that fits inside the view area.

Related

coordinator layout not working on the framelayout

I created a floating button followed by a include layout and framelayout. It seems like the floating button created in another layout and framelayout in another as well. How to use coordinator layout inside linear layout to add both include layout and framelayout in the same screen? Here is my code flow,
<LinearLayout>
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<include android:id="#+id/floating_button"/>
<FrameLayout>
android:id="#+id/child_layout"
android:layout_weight="10"
android:layout_width="match_parent"
android:layout_height="0dp"/>
</LinearLayout>

How to scroll the content of an EditText by dragging the scrollbar?

I just noticed that the scrollbar only follows the content of the EditText.
If you start dragging the scrollbar, the content will intercept the touch and will scroll on the opposite direction of the scrollbar:
It works different in a ListView, where you can actually drag the scrollbar and scroll the content.
Another user pointed out this issue here, but I don't think he got the response he needed.
Anyone found a solution to this problem?
In case it's needed, this is the code for the example:
<EditText
style="#style/customScrollbar"
android:layout_width="200dp"
android:layout_height="200dp"
android:gravity="top"
android:inputType="textMultiLine"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbarStyle="outsideOverlay"
/>
I ended up wrapping my EditText inside a ScrollView, this is more a workaround than a real solution:
<ScrollView
android:id="#+id/scrollview"
style="#style/scrollbar_style"
android:layout_width="200dp"
android:layout_height="200dp">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:gravity="top"
android:inputType="textMultiLine"
>
<requestFocus />
</EditText>
</ScrollView>
This will let the touch drag the scrollbar.
Edit: I have to say, this approach is 100 times better than using a native EditText. The EditText has a weird scroll, it's not as smooth as the ScrollView.

Remove WearableRecyclerView extra top space

My Watchface Config activity has just a WearableRecyclerView with settings. When I run the activity in Wear Emulator, there seem to be a lot of extra space at the top. Unable to figure out how to remove it.
Activity Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.WearableRecyclerView android:id="#+id/setting_recycler_view"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:clickable="true"
android:focusable="true"
xmlns:android="http://schemas.android.com/apk/res/android" />
Screenshot
Thanks in advance.
You can use void setEdgeItemsCenteringEnabled (boolean isEnabled) to control this behavior.
From the WearableRecyclerView documentation:
Use this method to configure the WearableRecyclerView to always align the first and last items with the vertical center of the screen. This effectively moves the start and end of the list to the middle of the screen if the user has scrolled so far. It takes the height of the children into account so that they are correctly centered.

Add a floating action bar in Appcelerator

How to add a floating action bar in Appcelerator . I have designed the widget and would like to place it over a ScrollView . The widget should be always on the bottom right and should not move with the scroll view .
You can just add it to the parent view/window of your ScrollView. E.g.
<Window>
<ScrollView />
<Widget />
</Window>
and it will be on top of your ScrollView and stay at the desired place (use tss to set right and bottom to a value)

Changing the height of a Xamarin Forms NavigationPage Toolbar

I am trying to change the height of a Xamarin Forms Toolbar that is being rendered on Android with AppCompat. There is no height property from Forms to set this so I've attempted setting the layout_height in the toolbar.axml as follows
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="128dp"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
This doesn't change the height.
I've also tried setting
android:minHeight
android:height
height
android:actionBarSize
but those do not change the height either.
FWIW, when using Xamarin Forms non-AppCompat NavigationPage with the ActionBar, I was able to set the height with android:height.
I found the below really helpful for the same issue.
Xamarin Forms: How to change Toolbar height in Android?
Add <item name="android:actionBarSize">250dp</item> into your styles.xml
Remove android:layout_height="wrap_content" from Toolbar.axml.
This should let you define any height you want for your navigation bar.
Hope that helps

Resources