Fixing image in center of toolbar Android - c#

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>

Related

SortableTableView does not wrap height to its content

I am using SortableTableView as my table view and I am having trouble including a TextView right below the component.
<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">
<de.codecrafters.tableview.SortableTableView
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tableView_columnCount="4"
app:tableView_headerElevation="10" />
<TextView
android:id="#+id/txtSummaryRecords"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Summary details goes here"
android:layout_below="#+id/tableView"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="?android:attr/colorError" />
</RelativeLayout>
However, when I add a static value to the height as below, it displays right below to the table.
<de.codecrafters.tableview.SortableTableView
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="450dp" <--included value
app:tableView_columnCount="4"
app:tableView_headerElevation="10" />
Result:
I tried settingandroid:layout_height= to match_parent and no difference. Looks like SortableTableView filled through whole screen disregard to the wrap_content layout height. Any support would highly appreciate.
I also found this problem, which seems to be that the default height is already match_parent.
If you want the TextView at the bottom,and SortableTableView above it.You could do like below as a workaround.
<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">
<de.codecrafters.tableview.SortableTableView
android:id="#+id/tableView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:layout_above="#+id/txtSummaryRecords"
app:tableView_columnCount="4"
app:tableView_headerElevation="10"
app:tableView_headerColor="#color/primary" />
<TextView
android:id="#+id/txtSummaryRecords"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Summary details goes here"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="?android:attr/colorError" />
</RelativeLayout>

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.

TextInputLayout Xamarin(C#)

I writing app for Xamarin Android.
I try to use TextInputLayout
Here is my axml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#drawable/main_bck">
<android.support.design.widget.TextInputLayout
android:id="#+id/usernameWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp">
<EditText
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="Username" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/passwordWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/usernameWrapper"
android:layout_marginTop="5dp">
<EditText
android:id="#+id/username"
android:inputType="textPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="password" />
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
I need to set Edit Text on center of screen.
How I can do this?
Thanks
Use this in the TextView
android:layout_gravity="center_vertical"
or horizontal
android:layout_gravity="center_horizontal"

Categories

Resources