Forum Xamarin.Android

Circular Button

meirrotfleischmeirrotfleisch USMember ✭✭✭

Hi 👋
Ive seen tutorials that use nuget packages for circular buttons but the one mentioned is not compatible with newer android.

So what's the best solution to circular (and /or other ) shapes haven't just using an image? Can we recognize a click on an image?

Regards

M.R.

Best Answer

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    A simple method is to use nuget Forms.Controls.FlexButton.

    You can follow this document How to use.

    1.Add the NuGet package to the Xamarin.Forms project and all platform projects
    2. [iOS only] Initialize the control In your AppDelegate.cs call this after Forms.Init();

        FlexButton.Init();
    

    Add the XML namespace

      xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"
    

    Add the control

    <flex:FlexButton
        WidthRequest="76"
        HeightRequest="76"
        CornerRadius="38"
        HorizontalOptions="Center"
        Icon="lightbulb.png"
        ForegroundColor="#ffffff"
        HighlightForegroundColor="#49516F"
        BackgroundColor="#6279B8"
        HighlightBackgroundColor="#8EA4D2" 
        Clicked="FlexButton_Clicked"
       />     
    
    private  async void FlexButton_Clicked(object sender, EventArgs e)
         {
            await DisplayAlert("Alert", "You have been alerted", "OK");
        }
    
  • meirrotfleischmeirrotfleisch USMember ✭✭✭
    edited June 2020

    @jezh
    Thanks for your response...

    I tried to add a new layout to the project with the following xml see attached .. wont let me paste here

    I get the following errors

    android.view.LayoutInflater.inflate(LayoutInflater.java:470)
    android.view.LayoutInflater.inflate(LayoutInflater.java:394)
    com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:323)
    com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:394)
    com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:271)
    mono.android.DesignerSession.loadInternal(DesignerSession.java:273)
    mono.android.DesignerSession.lambda$load$0(DesignerSession.java:223)
    mono.android.MonoDroidBroker.executeInMonoDroidContext(MonoDroidBroker.java:80)
    mono.android.DesignerSession.load(DesignerSession.java:223)
    mono.android.DesignerSession.processMessage(DesignerSession.java:676)
    mono.android.MessageListener.executeMessage(MessageListener.java:88)
    mono.android.MessageListener$Runner.run(MessageListener.java:44)
    java.lang.Thread.run(Thread.java:748)

    Regards

    M.R.

  • jezhjezh Member, Xamarin Team Xamurai
    edited June 2020

    I am sorry, I'm talking about the xamarin form project,not the xamarin android.

    If you want to achieve this function in xamarin android, you can to do like this:

    1.create file round_button.xml in drawable folder

     <?xml version="1.0" encoding="utf-8"?>
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false">
            <shape android:shape="oval">
                <solid android:color="#fa09ad"/>
            </shape>
        </item>
        <item android:state_pressed="true">
            <shape android:shape="oval">
                <solid android:color="#c20586"/>
            </shape>
        </item>
    </selector>
    

    2.And set it as background of Button in xml like this:

      <Button
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/round_button"
    android:gravity="center_vertical|center_horizontal"
    android:text="hello"
    android:textColor="#fff" />
    

    The result is:

    Refer: https://stackoverflow.com/questions/9884202/custom-circle-button

  • meirrotfleischmeirrotfleisch USMember ✭✭✭

    @jezh
    Thanks again.. This works fine except that in my current layout it becomes oval . I want to have in the end 2 buttons on each side down at the bottom of the layout.

    Can you suggest a good tutorial that really goes into depth about layouts?

    Regards

    M.R,

  • jezhjezh Member, Xamarin Team Xamurai

    I want to have in the end 2 buttons on each side down at the bottom of the layout.

    You can use RelativeLayout to achieve this.For example:

     <?xml version="1.0" encoding="utf-8"?>
    <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:padding="20dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:layout_margin="10dp"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/round_button"
                android:gravity="center_vertical|center_horizontal"
                android:text="hello"
                android:textColor="#fff" />
    
            <Button
                android:layout_margin="10dp"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/round_button"
                android:gravity="center_vertical|center_horizontal"
                android:text="hello"
                android:textColor="#fff" />
        </LinearLayout>>
    </RelativeLayout>
    

    The result is:

  • jezhjezh Member, Xamarin Team Xamurai

    Can you suggest a good tutorial that really goes into depth about layouts?

    You can check the official document Xamarin.Android Layouts, this document explain how to use the most commonly-used layouts in Xamarin.Android apps.

    For more details, you can also check: https://developer.android.com/guide/topics/ui/declaring-layout

  • meirrotfleischmeirrotfleisch USMember ✭✭✭

    @jezh
    thanks... I'll read those resources later.. in the meantime if i want to add elements above the buttons??

    Regards

    M.R.

  • meirrotfleischmeirrotfleisch USMember ✭✭✭

    @jezh

    Cant begin to thank you enough....

    M.R.

  • jezhjezh Member, Xamarin Team Xamurai

    It's my pleasure to help you . Have a nice day! :)

  • dhwanipatildhwanipatil Member
    edited March 11

    Great Suggestion.

    Get to learn more from this answer

Sign In or Register to comment.