Xamarin: An Introduction to develop a soundcloud (Part 1)

  • Article

Prerequisites

  1. You need install xamarin tool or visual studio for mac or windows
  2. You Install newest platform(> android 5.0)
  3. Xamarin.android.support.v7.appcompat and xamarin.android.support.v4 that you need install them from nuget.

Toolbar
**
**

  • This is the toolbar. You will see it has 4 parts, which such as a nav icon, title, action icon, menu icon...

http://i.stack.imgur.com/FlEaW.png

So this is code of the toolbar.

Here we use the toolbar instead of the actionbar. Now the toolbar dont has nav icon, title,... with default color is #CCCCCC

I want to replace this color for the toolbar. So I create a xml file name is Styles.xml. I saved it in values folder.

This is code of Styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#3a1972 </item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#3a1972 </item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
  </style>
</resources>

After I open the Properties folder, then I open AndroidManifest.xml -> switch to source at the bottom of screen-> you find this code and replace android:theme="..." into "@style/MyTheme".

<application android:allowBackup=``"true" android:icon=``"@mipmap/icon" android:theme=``"@style/MyTheme" android:label=``"@string/app_name"``></application>

  • windowNoTitle, windowActionBar, colorPrimary, colorPrimaryDark, colorAccent. Whatre they?

The picture will explain to you.

http://developer.android.com/training/material/images/ThemeColors.png

How to create a Nav icon and action bar.

In MainActivity.cs

I call the DrawerLayout in MainActivity:Activity as below code.

DrawerLayout  drawerLayout;

After in Oncreate. 

var mToolbar= FindViewById<Toolbar> (Resource.Id.toolbar);
mToolbar.Title = "Home";
  
//Toolbar will now take on default action bar chacracteritics
SetActionBar(mToolbar);
//ActionBar.Title = "home";
  
  
//Set menu hambuger
ActionBar.SetHomeAsUpIndicator (Resource.Drawable.ic_menu_white_24dp);
  
ActionBar.SetDisplayHomeAsUpEnabled (true);

Resource.Drawable.ic_menu_white_24dp it is a icon which I saved it to Drawable folder. So weve had a Nav icon. Thats great.
**
**

Next, we will create an action icon.
**
**Create a folder name is menu and then I create a xml file name actionmenu.xml

Ok. Thats fine.

In actionmenu.xml. You should search the ""showAsAction" on google to deep understand.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  
 <item
      android:id="@id/menu_share"
      android:icon="@drawable/ic_search_white_24dp"
      android:showAsAction="ifRoom"
      android:title="Search"
      
      />
       
 
</menu>

And

public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
        {
            MenuInflater.Inflate (Resource.Menu.Action_menu, menu);
            return base.OnCreateOptionsMenu (menu);
        }

Main.xaml

android:background=``"?attr/colorPrimary". It is get color from MyTheme

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Toolbar
                android:id="@id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:titleTextColor="@android:color/background_light" />
        </LinearLayout>
         
    </LinearLayout>

See Also

Source code