How to stop items in Xamarin Android StackView element overlapping?

Question

The image shows overlapping items that have been added to a StackView in a Xamarin Android app. How do I get them to display without over lapping?

The StackView element

        <StackView 
            android:id="@+id/stackViewMaterials"  
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </StackView>

The code that loads the StackView.

            if (Arguments != null)
            {
                quote = JsonConvert.DeserializeObject<Quote>(Arguments.GetString("quote"));

                if (Arguments.GetString("work") != null)
                {
                    work = JsonConvert.DeserializeObject<Work>(Arguments.GetString("work"));

                    v.FindViewById<EditText>(Resource.Id.editDescription).Text = work.strDescription;

                    if (work.Materials.Count > 0)
                    {
                        StackView stackMaterials = v.FindViewById<StackView>(Resource.Id.stackViewMaterials);
                        stackMaterials.Adapter = new MaterialAdapter(v.Context, work.Materials);
                        stackMaterials.ItemClick += OnListClick;
                    }

                    v.FindViewById<EditText>(Resource.Id.editWaste).Text = work.dblWaste.ToString();
                    v.FindViewById<EditText>(Resource.Id.editDelivery).Text = work.dblDelivery.ToString();
                    v.FindViewById<EditText>(Resource.Id.editLabour).Text = work.dblLabour.ToString();

                    v.FindViewById<EditText>(Resource.Id.editComment).Text = work.strComment;
                }

            }

score 0 · Answer 1 · answered Nov 08 '21 at 07:30

You could set the layout of the text to prevent the StackView item overlapping.

MainLayout: layout9.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

ItemLayout: layout10.xml

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

Model:

public class StackItem
{
    public string itemText1 { get; set; }
    public string itemText2 { get; set; }
    public StackItem(string text1, string text2)
    {
        this.itemText1 = text1;
        this.itemText2 = text2;
    }
}

Adapter:

public class StackItemAdapter : BaseAdapter<StackItem>
{
    private List<StackItem> sList;
    private Context sContext;
    public StackItemAdapter(Context context, List<StackItem> list)
    {

        this.sList = list;
        this.sContext = context;
    }

    public override StackItem this[int position]
    {
        get
        {
            return sList[position];
        }
    }
    public override int Count
    {
        get
        {
            return sList.Count;
        }

    }
    public override long GetItemId(int position)
    {
        return position;
    }

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        View row = convertView;
        if (row == null)
        {
            row = LayoutInflater.From(sContext).Inflate(Resource.Layout.layout10, null, false);
        }
        var m = sList[position];
        if (m != null)
        {
            TextView text1 = row.FindViewById<TextView>(Resource.Id.textView1);
            TextView text2 = row.FindViewById<TextView>(Resource.Id.textView2);
            text1.Text = sList[position].itemText1;
            text2.Text = sList[position].itemText2;
        }
        return row;
    }

}

MainActvity: Activity9

public class Activity9 : Activity
{
    private StackView exchangesStack;
    private List<StackItem> stackItems;
    StackItemAdapter adapter;
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        // Create your application here
        SetContentView(Resource.Layout.layout9);
        stackItems = new List<StackItem>();
        stackItems.Add(new StackItem("Waney Fence Panel","0*1830*1500*50mm 0kg"));
        stackItems.Add(new StackItem("Postmix", "0*0*0*0mm 25kg"));
        stackItems.Add(new StackItem("Recessed Concrete Gravel Board", "0*1830*300*50mm 0kg"));
        stackItems.Add(new StackItem("Comcrete Intermediate Post", "0*100*2400*100mm 0kg"));
        


        exchangesStack = FindViewById<StackView>(Resource.Id.exchangesStack);
        adapter = new StackItemAdapter(this, stackItems);
        exchangesStack.Adapter = adapter;
        exchangesStack.ItemClick += ExchangesStack_ItemClick;
    }

    private void ExchangesStack_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
    {
        var select = stackItems[e.Position].itemText1;
        Android.Widget.Toast.MakeText(this, select, Android.Widget.ToastLength.Long).Show();
    }
}

How to stop items in Xamarin Android StackView element overlapping?

1 Answers1