Layout

Posizionamento oggetti

Seguono esempi di attributi da applicare ad oggetti affinché un oggetto si possa posizionare relativamente rispetto ad un precedente
Per posizionare sotto l'oggetto seguente: android:layout_below

    <TextView
        android:text="Enter a PhoneWord:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/textView1" />
 
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:id="@+id/PhoneNumberText"
        android:text="1-855-XAMARIN" />

Oggetti UI

DropDownList

O finestra a scomparsa: Spinner. Vedi docs.microsoft.com per dettagli.

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="@string/planet_prompt"
    />
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:prompt="@string/planet_prompt"
    />

Notare che sia la TextView (senza ID altrimenti va in errore) che lo Spinner hanno la stessa risorsa testo nel file "string" è necessario affinché l'una sia il testo selezionato dell'altro, la TextView si definisce "titolo".
Il file Resources/Values/Strings.xml potrebbe essere fatto così:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">HelloSpinner</string>
  <string name="planet_prompt">Choose a planet</string>
  <string-array name="planets_array">
    <item>Mercury</item>
    <item>Venus</item>
    <item>Earth</item>
    <item>Mars</item>
    <item>Jupiter</item>
    <item>Saturn</item>
    <item>Uranus</item>
    <item>Neptune</item>
  </string-array>
</resources>

La lista degli items può essere popolata programmaticamente come un array di stringhe.
Dal punto di vista del codice:

private static string[] c_arrOwners = { "Giuseppe", "Maria", "Long"};
 
private ArrayAdapter<string> m_SpOwnerAdapter;
Spinner SpnOwner = null;
 
 
//...
protected override void OnCreate(Bundle savedInstanceState)
{
	//...
 
	SpnOwner = FindViewById<Spinner>(Resource.Id.SpnOwner);         //Spinner = DropDownList
 
	//...	
	//SpnOwner.ItemSelected += SpnOwner_ItemSelected;   <-- nel caso si volesse aggiungere un handler
	m_SpOwnerAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleSpinnerItem, c_arrOwners);
	m_SpOwnerAdapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem);
	SpnOwner.Adapter = m_SpOwnerAdapter;
}
 
// ...
// Per ottenere quanto selezionato:
string owner = SpnOwner.SelectedItem.ToString();
// ...
// Per preimpostare il valore salvato
int spinnerPosition = m_SpOwnerAdapter.GetPosition(itemSelected.Owner);
SpnOwner.SetSelection(spinnerPosition);
// ...
private void SpnOwner_ItemSelected(object sender, AdapterView.ItemSelectedEventArgs e)
{
	try
	{
		Spinner SpnOwner = (Spinner)sender;
		string toast = string.Format("The planet is {0}", SpnOwner.GetItemAtPosition(e.Position));
 
		Toast.MakeText(this, toast, ToastLength.Long).Show();
	}
	catch (Exception ex)
	{
		Manager.MessageBox(this, "Error (SpnOwner)", ex.Message);
	}
}

EditText

Es textBox multiline con allineamento verticale in alto (il default è al centro):

<EditText
	android:id="@+id/TxtTextToStore"
	android:hint="@string/Lbl_TxtTextToStore"
	android:inputType="textMultiLine"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:gravity="top|start"
	android:lines="13"
	android:visibility="gone"
	android:layout_row="9"
	android:layout_column="0"
	android:layout_columnSpan="3"
	android:layout_rowSpan="2"
	android:background="#ffe1f5fe" />

L'attributo chiave è android:gravity="top|start".

EditText x Password

Programmaticamente per impostare un campo di tipo password

editText.InputType = Android.Text.InputTypes.TextVariationPassword | 
                          Android.Text.InputTypes.ClassText;

ImageButton

<ImageButton
    android:id=@+id/saveButton"
    android:src="@drawable/save_image"
    android:contentDescription="Save data" />

FloatingActionButton

Caso in cui si sceglie l'icona e la si aggiunge al progetto:

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/FABSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_gravity="bottom|right"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_dialog_done_black_24dp"/>

Per riuscire a far vedere l'icona occorre aggiungere il file "ic_dialog_done_black_24dp.png" nella cartella \Resource\drawable ed i relativi file di opportuna dimensione nelle cartelle \Resource\mipmap-*.
Per cambiare il colore di sfondo es impostarlo trasparente:
app:backgroundTint="@android:color/transparent

Mentre se l'icona (es.: ic_dialog_email) la si vuol scegliere dalla libreria installata il possibile path per ottenerne il nome da usare potrebbe essere:
C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\Common7\IDE\Extensions\Xamarin\Android.Designer\java\data\res\drawable-hdpi

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

Grid Layout

Ottima guida: infobrother.com

Il seguente è in una vista XML il cui layout è una griglia 10 righe x 3 colonne. Ci sono oggetti non visibili con visibilità=gone, che occupano più colonne (columnSpan), che nella stessa cella due oggetti si posizionano relativamente uno sotto l'altro, c'è anche una ListView.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    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:padding="10dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"        
    android:rowCount="10"
    android:columnCount="3">
 
    <TextView
        android:id="@+id/LblItemToSearch"
        android:text="@string/Lbl_ItemToSearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="0" /> 
 
    <Button
        android:id="@+id/BtnBackMain"
        android:text="(back)"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_row="0"
        android:layout_column="0" />
 
    <EditText
        android:id="@+id/TxtItemToSearch"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:hint="@string/Lbl_TxtItemToSearch" />
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/LVMatchItems"
        android:layout_row="6"
        android:layout_column="0"
        android:layout_columnSpan="3" />
    <TextView
        android:id="@+id/LblTextToStore"
        android:text="@string/Lbl_TextToStore"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_row="6"
        android:layout_column="0"
        android:layout_columnSpan="3" />
 
    <EditText
        android:id="@+id/TxtTextToStore" 
        android:hint="@string/Lbl_TxtTextToStore"
        android:inputType="textMultiLine"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_below="@id/LblTextToStore"
        android:layout_columnSpan="3" />

EditText

<EditText
    android:id="@+id/someText"
    android:hint="Enter some text" />

Esempi

Da docs.microsoft.com:

<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"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="At runtime, I will display current time"
        android:id="@+id/timeDisplay"
    />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Up"
            android:id="@+id/upButton"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Down"
            android:id="@+id/downButton"/>
    </LinearLayout>
</LinearLayout>

Cambiare colore da Backend

Status bar

Sarebbe la line più in alto dello schermo, quella della rete e dell'orologio. Ciò è possibile dalla API Level 21 in su:

if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
   Window.ClearFlags(WindowManagerFlags.TranslucentStatus);
   Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
   Window.SetStatusBarColor(Android.Graphics.Color.Blue);
}

Oggetti UI

Toolbar

Doc docs.microsoft.com
Per seconda toolbar e per l'"Up button" (pulsante di ritorno pagina precedente): docs.microsoft.com
Tutorial: guides.peruzal.com
Ufficiale developer.android.com

Il menu è situato a dx della barra del titolo dell'app, ci sono due tipi di item, voci di menu ed icone da toolbar.
Gli item sono censiti nel file XML: \Resources\menu\menu_main.xml
e tradotti in: Recourcesvalues\strings.xml
XML, main activity (activity_main.xml)

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:theme="@style/AppTheme.AppBarOverlay" >
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:textAlignment="center"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>

XML (menu_main.xml)

<menu 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">
    <item
        android:id="@+id/action_uno"
        android:orderInCategory="100"
        android:title="@string/action_uno"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_due"
        android:orderInCategory="100"
        android:title="@string/action_due"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_tre"
        android:icon="@mipmap/ic_launcher"
        android:title="@string/action_tre"
        app:showAsAction="always" />
</menu>

action_tre è una icona con azione associata, occorre riporre l'aposita icona per ciascuna cartella mipmap-*

C# (MainActivity.cs)

//..
using Android.Views;
 
protected override void OnCreate(Bundle savedInstanceState)
{
	Android.Support.V7.Widget.Toolbar toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
	//Gli item sono censiti nel file XML: \Resources\menu\menu_main.xml
	//e tradotti in Recourcesvalues\strings.xml
	SetSupportActionBar(toolbar);
	//..
}
 
//..
 public override bool OnCreateOptionsMenu(IMenu menu)
{
	MenuInflater.Inflate(Resource.Menu.menu_main, menu);
	return true;
}
 
public override bool OnOptionsItemSelected(IMenuItem item)
{
	int id = item.ItemId;
	if (id == Resource.Id.action_uno)
	{
		Toast.MakeText(this, "Item menu uno", ToastLength.Long).Show();
		return true;
	}
	if (id == Resource.Id.action_due)
	{
		Toast.MakeText(this, "Item menu due", ToastLength.Long).Show();
		return true;
	}
	if (id == Resource.Id.action_tre)
	{
		Toast.MakeText(this, "Item menu tre", ToastLength.Long).Show();
		return true;
	}
 
	return base.OnOptionsItemSelected(item);
}

ListView

Da docs.microsoft.com

Un oggetto ListView viene popolato con i dati utilizzando la ItemsSource proprietà, che può accettare qualsiasi raccolta che implementa IEnumerable . Il modo più semplice per popolare un oggetto ListView prevede l'uso di una matrice di stringhe:

<ListView>
      <ListView.ItemsSource>
          <x:Array Type="{x:Type x:String}">
            <x:String>mono</x:String>
            <x:String>monodroid</x:String>
            <x:String>monotouch</x:String>
            <x:String>monorail</x:String>
            <x:String>monodevelop</x:String>
            <x:String>monotone</x:String>
            <x:String>monopoly</x:String>
            <x:String>monomodal</x:String>
            <x:String>mononucleosis</x:String>
          </x:Array>
      </ListView.ItemsSource>
</ListView>

AlertDialog

Esempio di Alert Dialog con pulsante che apre il Browser su un Link

private void Alert_Abount()
{
	AlertDialog.Builder adb = new AlertDialog.Builder(this);
	adb.SetPositiveButton("OK", delegate { });
	adb.SetNeutralButton("WebSite", (c, ev) =>
	{
		//Apre il Browser di Default di Android su un link preimpostato
		Uri uri = new Uri("http://aino.it/BankPassword/");
		Browser.OpenAsync(uri, BrowserLaunchMode.SystemPreferred);
	});
 
	AlertDialog ad = adb.Create();
	ad.SetIcon(Android.Resource.Drawable.IcDialogInfo);
	ad.SetTitle("About this app");
	ad.SetMessage(string.Format("Internal ver: {0}.\r\nAuthor: {1}"
											, SharedSetupParams.Ver_AndroidInternal
											, "Giuseppe AINO"));
	ad.Show();            
}

Mappa e Link

C# | Android App | Primi step

Visual Studio | MS SQL | Dizionario

Parole chiave:

Navigation

Help

Tools

WIDGETS

Widgets

Recent changes

Wanted articles

Who is online?

Article tools

CSharp:Android App - XAMARIN Tips

From Aino Wiki

Contents

Layout

Posizionamento oggetti

Oggetti UI

DropDownList

EditText

EditText x Password

ImageButton

FloatingActionButton

Grid Layout

EditText

Esempi

Cambiare colore da Backend

Status bar

Oggetti UI

Toolbar

ListView

AlertDialog

Mappa e Link