Develop Reference

Xamarin.Android UI not displaying appropriately on run time as it does while Android Designer

I made a Layout File and added different kinds of views and adjusted them using Layout - ViewGroup and Layout - RelativeLayout properties. The images and icons that I'm using were made for mdpi by a graphic designer. The runtime display doesn't match the one in the desinger mode. Since I am positioning the UI elements based on the element above it, the resulting elements shift downwards and some aren't even visible on the screen.
I tried aligning using Layout - RelativeLayout both with the element above and below the current element and then adjust margin using Layout - ViewGroup properties but I couldn't do the later because the element got stretched even though I set Layout Height and Layout Width to wrap_content.
Here's the code:
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/imageViewLoginBG"
android:src="#drawable/loginbg"
android:scaleType="fitXY" />
<ImageView
android:src="#drawable/loginlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageViewLoginLogo"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="75dp" />
<EditText
android:inputType="textEmailAddress"
android:layout_height="wrap_content"
android:id="#+id/editTextLoginEmail"
android:hint="Email"
android:layout_below="#+id/imageViewLoginLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:layout_marginRight="0.0dp"
android:layout_width="300.0dp"
android:textSize="15sp" />
<EditText
android:inputType="textPassword"
android:layout_width="300.0dp"
android:layout_height="wrap_content"
android:id="#+id/editTextLoginPass"
android:hint="Password"
android:textSize="15sp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editTextLoginEmail"
android:layout_marginTop="15.0dp" />
<ImageButton
android:src="#drawable/loginbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButtonLogin"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editTextLoginPass"
android:layout_marginTop="45.0dp" />
<TextView
android:text="Don't have an account? Register Now"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textViewLoginReg"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageViewLoginBG"
android:layout_marginBottom="10.0dp"
android:textColor="#fffafafa"
android:textSize="12sp"/>
<TextView
android:text="Forgot Password?"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textViewLoginFrgPass"
android:layout_centerHorizontal="true"
android:layout_marginBottom="0.0dp"
android:textColor="#fffafafa"
android:textSize="12sp"
android:layout_below="#+id/imageButtonLogin"
android:layout_marginTop="10.0dp" />
</RelativeLayout>
This is how the layout looks in the designer:
https://ibb.co/YLn3X4g
This is what it looks like in an emulator:
https://ibb.co/4wyDB9D
Note: Even the action bar gets displayed!?

Fixing image in center of toolbar Android

I am working whit Xamarin pcl. Now has the Android project an auto rendered layout for Toolbar and Tabbar. I am customizing the toolbar.axml to have a icon in the center of it. Everything is going wel untill a page got a back button (navigation page attribute I guess) end the icon shifts to the right because its not anymore the only one in the toolbar. Is there an easy fix to give the icon a fixed position? The back-button, I think, is not declared in an axml but generated through the function of Xamarin.Forms new NavigationPage().
My axml looks now like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</android.support.v7.widget.Toolbar>
I already look into the use of android:layout_gravity="center" and android:layout_gravity="center_horizontal" and android:center_horizontal or something but it didn't fix it
How it looks:
Startup screen without the return button
With return button and out of center

You can try to nest the Image in a RelativeLayout. And in this you can center your Image. Like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_centerInParent="true"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>

Image set in center using LinearLayout.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_img"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

Scaling a View in axml or c#

Currently I am trying to create a little app with mainly a horizontalscrollview and a main view. The horizontalscrollview contains a linearlayout with a bunch of BoxItems defined in my BoxItem.axml file. One BoxItem is also displayed on the main view.
The Problem is that I need to shrink the items in order to fit the scrollview. I would like the items to automatically resize (with all its child views) to fit the parentview (in height).
If it is possible I would also like to implement a function the set the size in code (but that’s not my main concern).
BoxItem.axml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Box"
android:gravity="center_vertical">
<TextView
android:text="Shelf"
android:id="#+id/Shelf"
android:textColor="#009900"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30sp" />
<TextView
android:text="ProductName"
android:id="#+id/Name"
android:textColor="#009900"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30sp" />
<TextView
android:text="Barcode"
android:id="#+id/Barcode"
android:textColor="#009900"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30sp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout3"
android:gravity="center">
<TextView
android:text="10"
android:id="#+id/StockCurrent"
android:textColor="#009900"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp" />
<TextView
android:text="/"
android:id="#+id/textView4"
android:textColor="#009900"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp" />
<TextView
android:text="10"
android:id="#+id/StockMax"
android:textColor="#009900"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>

I would like the items to automatically resize (with all its child views) to fit the parentview (in height).
You need API 11 or above to scale a View. Usage like this :
LinearLayout ll = FindViewById<LinearLayout>(Resource.Id.Box);
float scalingFactor = 0.5f; // scale down to half the size
ll.ScaleX = scalingFactor;
ll.ScaleY = scalingFactor;
But the scale size is difficult to calculate.
Alternative choice, it is suggested that use CardView to implement this function.

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.

How to have one ImageView in front of another ImageView (Background fills parent?)

I'm trying to have one ImageView overlap another, but I want the background ImageView to take up all the space available in its container.
This is what I have for the ImageView area:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearLayout1"
android:gravity="center">
<RelativeLayout
android:id="#+id/imagelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".75"
android:layout_gravity="center">
<ImageView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_centerInParent="true"
android:id="#+id/imageView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/img"
android:background="#android:color/transparent" />
<VideoView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".75"
android:id="#+id/videoView1"
android:adjustViewBounds="true"
android:visibility="gone" />
</RelativeLayout>
And this is the output:
I want the camera preview (checkered area) to fill up the entire available space behind the person icon.
What do I need to change?
Thanks

layout_weight inside RelativeLayout doesn't work so the VideoView
android:layout_weight=".75"
doesn't have effect.
fill_parent is deprecated, and it's the same as match_parent.
If you want ImageView takes all space you must use on the ImageView
android:scaleType="fitXY"