How to use the native control of Stepper in Xamarin Android - xamarin.android

I use a Xamarin.Forms layout, and it has a Stepper control.
On Android, it looks like this:
Now it seems that I have to create custom cells on each platform as the UWP performance is way-way-way below the normal scrolling speed.
According to this page, the Stepper is rendered via a custom view in Android:
I created an Android layout, and I intend to use the StepperRenderer, but I don't know how to inflate the custom view inside my custom viewcell:
<LinearLayout
android:id="#+id/Layout1"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<TextView
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:textSize="20dip"
android:textStyle="italic" />
<!-- NumberPicker is not applicable-->
<NumberPicker
android:id="#+id/Stepper"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--StepperRenderer
android:id="#+id/Stepper"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /-->
<Spinner
android:id="#+id/Picker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
protected override Android.Views.View GetCellCore(Xamarin.Forms.Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
{
var x = (MyViewCell)item;
var view = convertView;
if (view == null)
{
// no view to re-use, create new
view = (context as Activity).LayoutInflater.Inflate(Resource.Layout.MyViewCellLayout, null);
}
view.FindViewById<TextView>(Resource.Id.Text).Text = x.Text;
view.FindViewById<NumberPicker>(Resource.Id.Stepper).Value = x.Value;
return view;
}
Any idea how I could use that view in my viewCell?

There is similar thread related to this:
https://forums.xamarin.com/discussion/26173/custom-renderer-for-stepper
Hope this helps.

Related

Do I have to use the support library in Xamarin.Android to implement a toolbar?

I would like to implement a toolbar in my app, but I don't necessarily want to support versions of android that are older than Oreo.
I have a toolbar, it shows up, it replaced the action bar, but I don't know how to make it act like an action bar and place buttons on it properly.
This is the xml of the activity I'd want the toolbar for:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:title="Lyrics"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:titleTextColor="#DDDDDD"
android:background="#112244"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:id="#+id/lyricsToolbar">
</Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:minHeight="30px"
android:id="#+id/lyricsListView"/>
</LinearLayout>
And this is in the .cs file:
var lyricsToolbar = FindViewById<Toolbar>(Resource.Id.lyricsToolbar);
SetActionBar(lyricsToolbar);
The toolbar does appear, but I don't know how to properly put buttons on it. All the tutorials and code I've found are putting a menu on an appcompat support library version. I'd like to add an "add lyrics" button to the toolbar on it's right side and nothing else (it would be just a plus sign and if you click it it opens up another activity where adding new lyrics is possible).
Is this a wrong approach?
How should I do this? Should I make the app more backward-compatible, otherwise I can't properly use toolbars?
Any help is appreciated,
Thank you
Do you want to achieve it like following GIF?
If so, you could add this plus icon directly like following layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
>
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:title="Lyrics"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:titleTextColor="#DDDDDD"
android:background="#112244"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:id="#+id/lyricsToolbar">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_menu_add"
android:layout_gravity="end"
android:id="#+id/Toolbar_add"
/>
</Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:minHeight="30px"
android:id="#+id/lyricsListView"/>
</LinearLayout >
And set the click event listener.
[Activity(Label = "#string/app_name", Theme = "#style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
var imageView =FindViewById<ImageView>(Resource.Id.Toolbar_add);
imageView.Click += ImageView_Click;
}
private void ImageView_Click(object sender, System.EventArgs e)
{
var intent=new Intent(this, typeof(LyricsActivity));
StartActivity(intent);
}
If you want to hide the action bar, please do not forget to add the <item name="windowNoTitle">true</item> in styles.xml like following code.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowNoTitle">true</item>
</style>

How to force an item into a fixed position on the screen?

How can I place an item on the screen in a way that it doesn't move even if I scrolled ? I am using a LinearLayout.
If you're open to wrapping your LinearLayout with a RelativeLayout, this will work and is flexible in that you can make most any type of view (e.g., Button) fixed.
Layout File
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fillViewport="false">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txtScrollingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</ScrollView>
<Button
android:layout_width="600dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="This Button Is Fixed"/>
</RelativeLayout>
Screenshot
Solution:
Use a FloatingActionButton would work.
When you Create a new simple view Xamarin.Android project, there is FloatingActionButton sample in the activity_main.axml:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
And in the activity, you can customize the click event.
FloatingActionButton fab = FindViewById<FloatingActionButton>(Resource.Id.fab);
fab.Click += FabOnClick;
Here is a gif:
:

How to add text color to ListView

How to add text color to ListView ?
The background is white for Layout and I need the text color to be darkgray or black.
--UI
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ListView1" />
</LinearLayout>
-- code :
listV= FindViewById<ListView>(Resource.Id.ListView1);
itemlist = new List<string>();
itemlist.Add("item1");
itemlist.Add("item2");
itemlist.Add("item3");
itemlist.Add("item4");
itemlist.Add("item5");
itemlist.Add("item6");
itemlist.Add("item7");
itemlist.Add("item8");
ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist);
listV.Adapter = adapter;
Thanks
Create a layout file containing the textview you want with textSize, textStyle, color etc preferred by you and then use it with the ArrayAdapter.
e.g. mytextview.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tview"
android:textColor="#color/yourColor"
android:padding="5sp"
android:layout_width="fill_parent"
android:background="#drawable/rectgrad"
android:singleLine="true"
android:gravity="center"
android:layout_height="fill_parent"/>
and then use it with your ArrayAdapter as usual like
ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, R.layout.mytextview, itemlist);

MvvmCross MvxListView EmptyView is null and not displaying even when list is empty

I cannot access MvxListView's EmptyView property. Any idea what am I missing here?
My layout code:
<Mvx.MvxListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
local:MvxBind="ItemsSource Items"
local:MvxItemTemplate="#layout/listelement" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/empty">
<TextView
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:id="#+id/emptyTextView"
android:text="Hello World"
android:layout_centerInParent="true" />
</RelativeLayout>
And when I try to access EmptyView, it's null. Here is what I tried:
var list = FindViewById<MvxListView>(Resource.Id.listview);
list.EmptyView.FindViewById<TextView>(Resource.Id.emptyTextView); //EmptyView is null here
Thanks in advance!
Just assign your TextView to EmptyView.
this.listView.EmptyView = (Android.Widget.TextView)FindViewById(Resource.Id.emptyTextView);

Custom adapter does not called getVIew

Here is the code of my custom adapter... it doesn't call my get view... returns only white blank page without nothing. I don't know what is the problem. Does anybody can help. Thanks a lot previously!
public class ProductShopsAdapter extends ArrayAdapter<ProductShop> {
private Context cntx;
private ArrayList<ProductShop> shopValues;
ProductShopsHolder holder = null;
public ProductShopsAdapter(Context context, int textViewResourceId, ArrayList<ProductShop> stringValues) {
super(context,textViewResourceId);
shopValues = stringValues;
cntx = context;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
holder = new ProductShopsHolder();
LayoutInflater layoutInflater = (LayoutInflater)cntx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = layoutInflater.inflate(R.layout.shops_list, null);
//Holder Elements initialization
holder.setShopName((TextView)convertView.findViewById(R.id.shop_name));
holder.setPrice((TextView)convertView.findViewById(R.id.shop_part_price));
convertView.setTag(holder);
} else {
holder = (ProductShopsHolder) convertView.getTag();
}
holder.getShopName().setText(getItem(position).getShopName());
holder.getPrice().setText(getItem(position).getPrice());
return convertView;
}
}
and here is my XML
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductShopsActivity" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/footer"
android:padding="0dp" >
</ListView>
<include
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#android:id/list"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
layout="#layout/footer_menu" />
</RelativeLayout>
and single view :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_item"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#f2f2f2"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/shop_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Technomarket"
android:textSize="14sp" />
<TextView
android:id="#+id/shop_part_price"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="30 лв."
android:textSize="18sp" />
<TextView
android:id="#+id/details_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableRight="#drawable/rightarrow"
android:gravity="center"
android:text="Детайли"
android:textColor="#289bd6"
android:textSize="14sp" />
You don't need ArrayList inside your ArrayAdapter - ArrayAdapter can store items itself. And that's why getView() doesn't get called - default implementation of getCount() returns the number of items in ArrayAdapter itself. If you keep your items in your own ArrayList, at least override getCount() to return shopValues.getCount(). Otherwise it is always 0 and the ListView to which your adapter is bound doesn't even know there are any items to dsplay at all.

Resources