Develop Reference

Same Design on different Android versions

I am new at Xamarin and started working with it yesturday. I am trying to make an Android App using it in Visual Studio 2017, it works fine on Android Version 8.0, but on v. 7.0 the control elements on the screen get into different places.
Android 8.0:
Android 7.0:
Designer 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:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Available Queries:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/queriescnt"
android:textAlignment="center" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/queriescnt"
android:id="#+id/email"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="35dp"
android:layout_marginRight="326.0dp"
android:singleLine="true" />
<Button
android:text="Search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/email"
android:id="#+id/submit"
android:layout_marginVertical="20dp"
android:layout_marginHorizontal="10dp" />
<EditText
android:layout_width="249.0dp"
android:layout_height="wrap_content"
android:layout_below="#id/submit"
android:id="#+id/keybox"
android:layout_marginVertical="300dp"
android:layout_marginHorizontal="50dp"
android:layout_marginRight="201.5dp"
android:password="true"
android:inputType="none|textPassword" />
<TextView
android:text="KEY:"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/submit"
android:id="#+id/textView1"
android:layout_marginVertical="320dp"
android:layout_marginHorizontal="10dp" />
<CheckBox
android:text="S"
android:layout_width="54.5dp"
android:layout_height="wrap_content"
android:layout_below="#id/submit"
android:id="#+id/store"
android:layout_marginVertical="315dp"
android:layout_marginHorizontal="300dp" />
<TextView
android:text="Current line count:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/submit"
android:id="#+id/dbcount"
android:gravity="center_horizontal|center_vertical"
android:textSize="40dp"
android:inputType="none|textMultiLine" />
</RelativeLayout>
Can you please help me to make all the elements appear the same on different versions? I would be really thankful, if you also suggest me, what i can do better.

Your margins are messing up your layout. You cannot just add more margin to a view to position it relatively to another view.
I have adjusted your layout to match what you have in the first screen shot.
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/queriescnt"
android:text="Available Queries:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center" />
<EditText
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/queriescnt"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="35dp"
android:maxLines="1" />
<Button
android:id="#+id/submit"
android:text="Search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/email"
android:layout_marginVertical="20dp"
android:layout_marginHorizontal="10dp" />
<TextView
android:id="#+id/dbcount"
android:text="Current line count:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/submit"
android:gravity="center_horizontal|center_vertical"
android:textSize="40dp"
android:inputType="none|textMultiLine" />
<TextView
android:id="#+id/textView1"
android:text="KEY:"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"/>
<CheckBox
android:id="#+id/store"
android:text="S"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_margin="10dp"
android:layout_alignParentBottom="true" />
<EditText
android:id="#+id/keybox"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:password="true"
android:inputType="none|textPassword"
android:layout_alignBaseline="#+id/textView1"
android:layout_toEndOf="#+id/textView1"
android:layout_toStartOf="#+id/store"
tools:text="abc" />
</RelativeLayout>
What you may notice here is that I use toEndOf, toStartOf, alignBaseline, alignParentStart, alignParentEnd and alignParentBottom instead of the margins you had.
Simply adding 300dp margin to a view may work in the view port of the preview of the designer while you are fiddling with it. However not all screens have equal width and height both in physical size and in pixel density. Hence, 300dp will not look the same on all screens.

You can try the following code. I have tested the code on Android 7.0 and Android 8.0, it works properly.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Available Queries:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/queriescnt"
android:textAlignment="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/queriescnt"
android:id="#+id/email"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="35dp"
android:layout_marginRight="326.0dp"
android:singleLine="true" />
<Button
android:text="Search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/email"
android:id="#+id/submit"
android:layout_marginVertical="20dp"
android:layout_marginHorizontal="10dp" />
<TextView
android:text="Current line count:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/submit"
android:id="#+id/dbcount"
android:gravity="center_horizontal|center_vertical"
android:textSize="40dp"
android:inputType="none|textMultiLine" />
<LinearLayout
android:layout_marginTop="200dp"
android:gravity="center"
android:layout_marginBottom="12dp"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/dbcount"
android:orientation="horizontal">
<TextView
android:text="KEY:"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:layout_marginHorizontal="10dp" />
<EditText
android:hint="input"
android:layout_width="249.0dp"
android:layout_height="wrap_content"
android:id="#+id/keybox"
android:layout_toRightOf="#id/textView1"
android:password="true"
android:inputType="none|textPassword" />
<CheckBox
android:text="S"
android:layout_width="54.5dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/keybox"
android:id="#+id/store"/>
</LinearLayout>
</RelativeLayout>
Android 7.0
enter image description here
Android 8.0
enter image description here
Note:
You could include the three controls(TextView, EditText, CheckBox) into a parent layout(eg. LinearLayout), then you do not need to set the properties for each three controls.
The layout_below perperty you set is not right. When you add the parent layout for the below controls, you just need to add the property for the parent layout.
android:layout_below="#id/dbcount"

Unable to set equal row heights in ListView

I have a problem. I created a ListView with a custom adapter. Therefore I created a new Layout for just 1 row. In that layout I set the main layout to a height of 120dp, but when the list gets created all the rows are not equal and for my opinion not 120dp. Here is the code of the row layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="120dp"
android:minWidth="0px"
android:minHeight="50px"
android:background="#edf0f4">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="70"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingName">
<TextView
android:text="Dark Theme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtSettingName"
android:textColor="#000000"
android:autoSizeMaxTextSize="20dp"
android:autoSizeMinTextSize="17dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:textStyle="bold" />
<TextView
android:text="Change the theme to something more dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtSettingDescription"
android:textColor="#666666"
android:autoSizeMaxTextSize="18dp"
android:autoSizeMinTextSize="16dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="30"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingValue"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#dddddd"
android:textColor="#FFFFFF"
android:id="#+id/SettingEditText" />
<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/SettingSpinner" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/SettingSwitch" />
</LinearLayout>
</LinearLayout>
Here is a screenshot of the ListView I have right now:
I want to rows to be double the size of the first row, but it doesn't matter which size I give them, they always look like this.
What am I doing wrong?

If you go back through the source code you can see that ListView will call makeAndAddView(... ) to get the View, and in this method, the obtainView method of the parent AbsListView is called, which generates an AbsListView.LayoutParams of MATCH_PARENT width and WRAP_CONTENT height,so the height you set in the item XML doesn't take effect because the ListView defaults to LayoutParams for each item
you could change by the following two ways：
1.Nest the layout in the XML one more time:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#edf0f4"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="70"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingName">
<TextView
android:text="Dark Theme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtSettingName"
android:textColor="#000000"
android:autoSizeMaxTextSize="20dp"
android:autoSizeMinTextSize="17dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:textStyle="bold" />
<TextView
android:text="Change the theme to something more dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtSettingDescription"
android:textColor="#666666"
android:autoSizeMaxTextSize="18dp"
android:autoSizeMinTextSize="16dp"
android:autoSizeTextType="uniform"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="30"
android:layout_height="match_parent"
android:background="#edf0f4"
android:id="#+id/LayoutSettingValue"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#dddddd"
android:textColor="#FFFFFF"
android:id="#+id/SettingEditText" />
<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/SettingSpinner" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/SettingSwitch" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
2.Manually set an abslistview.layoutparams for convertView in the getView method in Adapter
public override View GetView(int position, View convertView, ViewGroup parent)
{
...
convertView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.layout6, null);
convertView.setLayoutParams(new AbsListView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, 300));//300 is your custom height
...
}

Crop overlay to mark the scan field

I implemented a barcode scanner in our Xamarin app. To implement the scanner I followed this tutorial: https://www.c-sharpcorner.com/article/xamarin-android-qr-code-reader-by-mobile-camera/
So, I have a SurfaceView, a CameraSource and a BarcodeDetector. Now I want to crop the camera preview to say the scanner where the barcode in which we have to scan because it is possible that the source from which we can have more than one barcode.
I think this will work with Simple Crop View (or something similar) but I don't how to implement it.
All solutions found here are not working or I'm missing something.

Do you want to acheve it like this GIF?
If so, you could achieve it with ZXing.Net.Mobile
https://github.com/Redth/ZXing.Net.Mobile
There is my demo
https://github.com/851265601/Scanebarcode
Update: If you still want to use the solution like the blew link
https://www.c-sharpcorner.com/article/xamarin-android-qr-code-reader-by-mobile-camera/
I changed the layout like following code. I usd FramLayout, SurfaceView was coverd by other raylout just like LinearLayout or relativelayout
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<SurfaceView
android:id="#+id/cameraView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<RelativeLayout
android:background="#953399ff"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="330dp"
android:orientation="horizontal">
<RelativeLayout
android:background="#953399ff"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<RelativeLayout
android:id="#+id/rlscan"
android:layout_width="220dp"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/area_above_left" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/area_above_right" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/area_below_left" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/area_below_right" />
</RelativeLayout>
<RelativeLayout
android:background="#953399ff"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
<RelativeLayout
android:background="#953399ff"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:id="#+id/txtResult"
android:layout_below="#+id/cameraView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Please focus Camera to QR Code"
android:textSize="10sp"
android:layout_marginTop="20dp" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>

textView position for slidedown menu

Xamarin Android
I'm trying make slidedown menu.
I don't know, what i'm doing wrong.
I can't position textView like i want.
View should be on the top of screen. However, it's on the bottom.
<?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"
android:minWidth="25px"
android:minHeight="25px"
android:background="#f2f2f2">
<RelativeLayout
android:id="#+id/productTitleBar"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:background="#ff46a1e1">
<TextView
android:id="#+id/txtProductTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:text="Product List"
android:layout_gravity="center"
android:clickable="true"
android:layout_centerVertical="true"
android:textSize="18dp"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<TextView
android:id="#+id/txtDescription"
android:layout_width="match_parent"
android:layout_height="100dp"
android:textColor="#000000"
android:text="Desription goes here"
android:layout_gravity="center"
android:clickable="true"
android:textSize="18dp"
android:layout_above="#+id/btnImgExpander"
android:background="#FFFFFF"
android:gravity="center"
android:visibility="gone" />
<ImageView
android:id="#+id/btnImgExpander"
android:layout_alignParentBottom="true"
android:layout_height="30dp"
android:layout_width="match_parent"
android:src="#drawable/up_arrow"
android:background="#fff2f2f2" />
<ListView
android:id="#+id/productListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="55dp"
android:layout_marginBottom="30dp"
android:background="#android:color/background_light"
android:fastScrollEnabled="true" />
</RelativeLayout>
I have
I want
Someone can help me with this problem?

android:layout_above="#+id/btnImgExpander" is set on the TextView, but android:layout_alignParentBottom="true" is set on the ImageView, which is aligning it to the bottom of the container (the outer RelativeLayout). You could try: android:layout_alignParentTop="true" and remove the android:layout_alignParentBottom="true"

xamarin card view layout

I'm trying to recreate a cardview similar to this one with an image with title on top and then some data and maybe some action buttons below. But for the life of me I can't get the text to be on top of the image.
Here is what I have so far
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="325dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image1"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_alignParentTop="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/recipeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image1"
android:maxLines="3"
android:padding="8dp"
android:text="name"
android:textColor="#222"
android:textStyle="bold"
android:textSize="22dp" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="description"
android:textColor="#666"
android:textSize="14dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/description">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="View"
android:textColor="#666"
android:textSize="14dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="Add"
android:textColor="#666"
android:textSize="14dp" />
</LinearLayout>
</RelativeLayout>

I will assume you want #+id/recipeName on top of #+id/image1.
On recipeName, you have set: android:layout_below="#+id/image1" which will layout the element below image1. Remove that line as you do not want it below that element. Try android:layout_alignBottom="#+id/image1". There are enough layout parameters to do most things: LayoutParams, though it can be a bit of a rabbit hole once you start doing complex layouts...
Also you've got layout_below on elements inside your LinearLayout which won't do anything.