How to achieve MvxListView alternate row background images? - c#

I am newbie in Xamarin Android and MvvmCross and I have been trying to achieve alternate rows background for MvxListView. Below is my code for MvxListView
<Mvx.MvxListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="#null"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/llSubtotal"
android:cacheColorHint="#android:color/transparent"
local:MvxBind="ItemsSource Items;ItemClick ItemSelectedCommand"
local:MvxItemTemplate="#layout/listviewitem"
android:id="#+id/mvxLVCustomerItemList" />
Yes, I am binding itemsource of listview from ViewModel.
Template for above Listview is ListViewItem.axml as below -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:id="#+id/lvItemTemplate"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/odd">
<Mvx.MvxImageView
android:layout_width="150dp"
android:layout_height="fill_parent"
android:id="#+id/ivItemImage"
android:textSize="40dp"
android:layout_gravity="center_horizontal|center"
local:MvxBind="ImageUrl StripUrl" />
<TextView
android:layout_marginTop="20dp"
android:layout_width="fill_parent"
android:id="#+id/tvItemName"
android:layout_height="fill_parent"
local:MvxBind="Text Title" />
</LinearLayout>
I tried to achieve alternate rows using custom adapter but in that case listview does not show data. Somehow I failed for it due to my lack of knowledge on Android or MvvmCross.
Any Help will be highly appreciated.
Please note that this project is in Xamarin and has only Android app in it. There is no UWP or other in my project this is completely Xamarin Android with MvvmCross.
Thanks.

Related

MaterialSpinner label/hint not showing when running the app

The materialspinner is not showing any hints or labels.
This is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://shcemas.android.com/apk/res-auto"
android:orientation="vertical"
android:minWidth="300dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fr.ganfra.materialspinner.MaterialSpinner
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/eventnameSpinner"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelText="Select Event"
app:ms_hint="Select Event"
app:ms_alignLabels="true"/>
<fr.ganfra.materialspinner.MaterialSpinner
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/eventpackageSpinner"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelText="Select Package"
app:ms_hint="Select Package"
app:ms_alignLabels="true"/>
</LinearLayout>
With the code
app:ms_floatingLabelText="Select Package"
app:ms_hint="Select Package"
it is supposed to show when running the app, instead it only shows the content inside it. It is supposed to show a hint "Select Event" and "Select Package" for both spinners but it did not, and when clicking the spinner, the label would hover on top same as the EditTexts. Is there something missing?
This is the layout
Are you using nuget Nivaes.Droid.Ganfra.MaterialSpinner,right?
I found that this nuget hasn't been updated for several years and is not recommended.
But you can use Xamarin.Android Spinner as an alternative.
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/planet_prompt"
/>
Similarly, when setting property prompt, the spinner does not display the value of prompt.
But when we set property style="#android:style/Widget.Spinner" for spinner, if we set data resource for the Spinner and click the Spinner, the prompt will display in a dialog.
<Spinner
style="#android:style/Widget.Spinner"
android:tooltipText="abc"
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/planet_prompt"
/>
Of course, you can also add a TextView to display the prompt,just as document Xamarin.Android Spinner says.
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="#string/planet_prompt"
/>
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/planet_prompt"
/>
Note:
You can check the following threads for more ideas:
How to make an Android Spinner with initial text "Select One"?
Spinner prompt not showing

Vertical tabLayout on Android (Xamarin)

Issue
Make a vertical tablayout but it uses more spaces than it need.
In addition, I want tabItem's text be horizonal.
I couldn't paste an image so I paste a link that I asked at other website.
She told me that make a vertical tab with tablayout is impossible.
Screen I want to make
First image is the display what I want to make. Second image is the display at now.
https://teratail.com/questions/0p99tlvnpzqpoj
Code
XML file
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<!--AppBar
#+id/appBar-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expanded="false">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="46dp">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<!--Tab & Content-->
<LinearLayout
android:id="#+id/linLay_TabContent"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/linLay_EventRep"
app:layout_constraintTop_toBottomOf="#+id/appBar">
<!--Tab & image
#+id/Tab-->
<LinearLayout
android:id="#+id/Tab"
android:layout_width="300dp"
android:layout_height="300dp"
android:rotation="-90"
app:layout_constraintEnd_toStartOf="#+id/Content"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:tabTextAppearance="#style/TabLayoutTextAppearance"
app:tabMinWidth="79dp"
app:tabMode="scrollable">
<com.google.android.material.tabs.TabItem
android:text="test1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabItem
android:text="test2"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabItem
android:text="test3"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.tabs.TabLayout>
<ImageButton
android:id="#+id/image"
android:layout_width="60dp"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingRight="19dp"
android:paddingLeft="17dp"/>
</LinearLayout>
<!--Content
#+id/Content-->
<LinearLayout
android:id="#+id/Content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/Tab">
<TextView
android:id="#+id/txt1"
android:text="data"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linLay_EventRep"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt1"
android:text="text1"
android:layout_width="78dp"
android:layout_height="48dp"
android:layout_gravity="bottom"/>
<TextView
android:id="#+id/txt2"
android:text="text2"
android:layout_width="78dp"
android:layout_height="48dp"
android:layout_gravity="bottom"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Version
Microsoft Visual Studio 2019 Version 16.11.19
Microsoft .NET Framework Version 4.8.04084
MonoAndroid, Version=v9.0
remarks
I checked this site but couldn't understand the meaning of code Setup in Code thus couldn't write with C#.
Vertical Android TabLayout not scroll vertically
I test the code you provided and link provided. Unfortunately, TabLayout can't achieve the effect you want. And here is my screenshot of test effect. As the second answer in the link said:
TabLayout provides a horizontal layout to display tabs.
You can choose this case's method.

How to put button, edittext etc below custom toolbar

I have created a custom toolbar. But when I put things like imageview, button etc it wont be below toolbar. I also tried android:layout_below but i either its not working or I put wrong id (i tried multiple ids). Its just mixing with the toolbar.
In the code the imageview is merging with the toolbar and i want the imageview to be below it.
Thanks for anyone who answers
code:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ImageView
android:id="#+id/icon"
android:layout_below="#id/toolbar"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/shoppingcart"
android:layout_width="100dp"
android:layout_height="100dp"
/>
<android.support.design.widget.TextInputLayout
android:layout_below="#+id/icon"
android:id="#+id/forgot_input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/forgot_email"
android:hint="Enter groceries"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.TextInputLayout>
P.s.
include is just the normal toolbar settings
I got my answer! I had to put on image view tag android:layout_marginTop="?attr/actionBarSize", it just do it below the height of the toolbar/actionbar Like that:
<ImageView
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/shoppingcart"
android:layout_width="100dp"
android:layout_height="100dp"

Clickable Button in a custom listview

My problem is I can't make the button I added in my custom listview to be clickable.
Here is the XML file of my custom listview:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="335dp"
android:layout_height="100dp"
android:minHeight="80dp"
android:maxHeight="250dp"
android:background="#ffffff"
android:id="#+id/list"
android:baselineAligned="false"
android:longClickable="false"
android:descendantFocusability="blocksDescendants"
android:clickable="false">
<Button
android:background="#drawable/grbgCan"
android:layout_width="15dp"
android:layout_height="20dp"
android:id="#+id/deleteMemo"
android:layout_gravity="start"
android:layout_marginLeft="270dp"
android:layout_marginTop="5dp"
android:duplicateParentState="false"
android:clickable="true" />
<TextView
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/id"
android:layout_marginLeft="290dp"
android:layout_marginTop="-20dp"
android:layout_marginRight="15dp"
android:clickable="true" />
<TextView
android:id="#+id/top"
android:text="Title"
android:textColor="#ff7e7777"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="255.5dp"
android:layout_height="19.9dp"
android:paddingLeft="10dp"
android:layout_marginTop="-20dp" />
<TextView
android:id="#+id/bottom"
android:textColor="#ff7e7777"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="63.3dp"
android:paddingLeft="50dp"
android:layout_gravity="left"
android:text="Note" />
<TextView
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/date"
android:layout_marginLeft="250dp"
android:layout_marginRight="5dp" />
</LinearLayout>
In my main activity I tried the Btn.Click event but it only produces an error. And from what I've read in similar problems, their button was initialize in their Array Adapter but I'm using SimpleCursorAdapter because I'm fetching data from my sqlite database.
What should I do then? Please don't give me java codes because some them aren't applicable in xamarin studio since it's c#. Thanks.
You can't do it this way because you have a lot of same items in ListView with same ids
You must set OnClickListener to your button in your Adapter's getView() method like this
(this is java code for android studio, so it can differ from c# code, but gist is the same)
Button btn = (Button) convertView.findViewById(R.id.deleteMemo);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//here you go
}
});
Try something like this (If you don't have Fragments delete the view. below)
var _view = view.FindViewById<ListView>(Resource.Id.listView1);
if (_view.ChildCount > 0){
Button _button = (Button)_view.GetItemAtPosition(0).GetChildAt(0);
}
Because you have a lot of similar objects on a list this is the only way i think to access them,
Remember that item position is relative to the current visible items on the screen and you cant access items that are not visible

MvvmCross Specific ViewModel for MvxItemTemplate to populate AutoCompleteTextView

I was wondering if, when you create a MvxListView in xml and use a MvxItemTemplate to describe the Items, there is a way to assign the ViewModel that gets used (assuming there is one) for each line. I fixed a similar problem by extending my Item class, but I want to have another item be an AutoCompleteTextView that has its hint list populated from a database. I can get the list into and IEnumerable, its just a matter of assign that list to to each item in the list. I figure if I can control that creation of the ViewModel for each item, I can add a property that contains the hint list and bind it.
My main View is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Mvx.MvxListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
local:MvxBind="ItemsSource ShipmentInventory.Items"
local:MvxItemTemplate="#layout/inventoryitemview" />
<FrameLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frameLayout2" />
<EditText
android:inputType="date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText1" />
</LinearLayout>
The view for the Item template is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<MvxSpinner
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:padding="2dp"
local:MvxBind="ItemsSource TagColors; SelectedItem TagColor"
android:id="#+id/spinner1" />
<EditText
android:layout_width="300dip"
android:layout_height="wrap_content"
style="#style/InputEditText"
local:MvxBind="Text InventoryNumber" />
<AutoCompleteTextView
android:layout_width="300dp"
android:layout_height="wrap_content"
style="#style/InputEditText"
local:MvxBind="Text Articles; completionHint HintList" />
</LinearLayout>
I figure if I can control the ViewModel its using for each item, I can add a property to it called HintList. Is there a way to do this?
Jim
I figured out most of the nuances for this and created an example at
https://github.com/JimWilcox3/MvxAutoCompleteTest
In a nutshell, when you bind data to an MvxItemList, the object in the datamodel for each item acts as your ViewModel for that item. In my example, I just created a list of items. If you are working with data from say WCF, you can extend the object created in the WCF using a partial class. In that partial class you can create MvxCommand and other things that you might want to bind to. Hope this helps someone.

Categories