I want a toolbar which is customized.

Left corner I need to place an rounded Image and right side I have a search icon and bell icon i.e notification icon. So how to achieve this

Best Answer

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    I achieve the result like the following GIF.

    1. Achieve the CircleImageView for Xamarin.Android, you can use the nuget.
      https://github.com/jamesmontemagno/CircleImageView-Xamarin.Android

    2. Add the notifcation icon and the search icon.

    First of all add the Toolbar in your layout.

     <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.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff">
        <refractored.controls.CircleImageView
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:id="@+id/profile_image"
         android:layout_width="36dp"
         android:layout_height="36dp"
         android:src="@drawable/james"
         app:civ_border_width="2dp"
         app:civ_border_color="#FF000000"/>
    
    
    </android.support.v7.widget.Toolbar>
    </LinearLayout>
    

    Then add the menu item for toolbar. Create a base_toolbar_menu.xml

     <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
     <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="search"
        app:showAsAction="ifRoom" />
    
    <item
        android:id="@+id/action_notification"
        android:icon="@drawable/ic_notifications"
        android:title="notifications"
        app:showAsAction="ifRoom" />
    
    
     </menu>
    

    And handle the click lisener for menu item

        public class MainActivity : AppCompatActivity
    {
    
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
    
            SetContentView(Resource.Layout.activity_main);
            //If you have actionbar ,please hide it.
            SupportActionBar.Hide();
    
            Android.Support.V7.Widget.Toolbar toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            toolbar.InflateMenu(Resource.Layout.base_toolbar_menu);
    
    
            // Button mybtn = FindViewById<Button>(Resource.Id.mybtn);
            // mybtn.Click += Mybtn_Click;
            toolbar.MenuItemClick += Toolbar_MenuItemClick;
    
        }
    
        private void Toolbar_MenuItemClick(object sender, Android.Support.V7.Widget.Toolbar.MenuItemClickEventArgs e)
        {
            switch (e.Item.ItemId)
            {
                case Resource.Id.action_search:
                    Toast.MakeText(this, "action_search", ToastLength.Short).Show();
                    break;
                case Resource.Id.action_notification:
                    Toast.MakeText(this, "action_notification", ToastLength.Short).Show();
                    break;
            }
        }
    }
    
  • subramanyamnuggusubramanyamnuggu Member ✭✭

    Thanks LeonLu For the Solution :) :)

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    @subramanyamnuggu If the reply is helpful, please mark it as an answer, it will help others who have similar issue.

  • subramanyamnuggusubramanyamnuggu Member ✭✭

    Hi, I have one more question.

    As per the below image I have a list i.e, apps which should navigate to new page i.e as shown in the same way as that of image, It should be scrollable . Here when click on top level i.e SN or Subbu Nuggu it should navigate to new page and when click on buttons its should navigate to new page.

    APP.png 14.3K
  • subramanyamnuggusubramanyamnuggu Member ✭✭

    How the above UI can be achieved using RecyclerView

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited August 8

    @subramanyamnuggu
    You could achieve the click event in the OnBindViewHolder method like this thread.
    https://forums.xamarin.com/discussion/69136/xamarin-android-recyclerview-with-cardview-button-clicked-multiple-times

    And if you have other questions, please open a new thread.

Sign In or Register to comment.