How can i have an image on a button with text?

Hi Guys,

I want to have a button that has an image on the left hand side and next to it has some text. I want to be able to add this programmatically based on entries in a list.

Can i use the Button or ImageButton controls to accomplish this? i cant seem to seem any options for setting the image location on a button.
If these are not suitable what would you suggest i do? I have looked into creating usercontrols but i cant seem to find any useful documentation on how to do that.

Regards
Ben

Best Answer

Answers

  • CortezCortez USMember ✭✭✭

    Hello @BenRiches!

    The layout is something like this.

    <Button android:id="@+id/myButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/Icon" android:text="@string/hello" />

  • CortezCortez USMember ✭✭✭
    edited April 2015

    Hello @BenRiches !

    Finished

    Main.axml

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btnAdd" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text = "Add new button"/> <ListView android:id="@+id/lvButtons" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>

    ImageTextButton.axml

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/itButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/Icon" android:text="Hello"/> </LinearLayout>

    ImageTextButtonAdapter.cs

    public class ImageTextButtonAdapter : ArrayAdapter { private List<string> captions; public ImageTextButtonAdapter (Context Context, int ImageTextButtonRowId, List<string> Captions) : base (Context, ImageTextButtonRowId, Captions) { this.captions = Captions; } public override int Count { get { return this.captions.Count; } } public override Android.Views.View GetView (int position, Android.Views.View convertView, Android.Views.ViewGroup parent) { View v = convertView; if (v == null) { LayoutInflater inflater = (LayoutInflater) Context.GetSystemService (Context.LayoutInflaterService); v = inflater.Inflate (Resource.Layout.ImageTextButton, parent, false); } v.FindViewById<Button> (Resource.Id.itButton).Text = this.captions [position]; return v; } }

    MainActivity.cs

    [Activity (Label = "ImageButtonText", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { protected override void OnCreate (Bundle bundle) { base.OnCreate (bundle); // Set our view from the "main" layout resource SetContentView (Resource.Layout.Main); List<string> list = new List<string> (); list.Add ("First"); list.Add ("Second"); list.Add ("Third"); ListView listview = FindViewById<ListView> (Resource.Id.lvButtons); ImageTextButtonAdapter adapter = new ImageTextButtonAdapter (this, Resource.Layout.ImageTextButton, list); listview.Adapter = adapter; Button btnAdd = FindViewById<Button> (Resource.Id.btnAdd); btnAdd.Click += (sender, e) => { list.Add("Fourth"); RunOnUiThread(() => { adapter.NotifyDataSetChanged(); }); }; } }

  • BenRichesBenRiches GBMember

    Hey Cortez,

    Thanks that's how i want it to look.

    Do you know how i can assign it like this in c# code when creating a new button?

    Regards
    Ben

  • CortezCortez USMember ✭✭✭

    Here is the sceenshot.

  • CortezCortez USMember ✭✭✭

    Hello @BenRiches !

    Here we are.

    Main.axml

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/llMain" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/myButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>

    MainActivity.cs

    [Activity (Label = "AddImageTextButton", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { protected override void OnCreate (Bundle bundle) { base.OnCreate (bundle); SetContentView (Resource.Layout.Main); Button button = FindViewById<Button> (Resource.Id.myButton); button.Click += delegate { Button newButton = new Button(this); Drawable icon = Resources.GetDrawable(Resource.Drawable.Icon); icon.SetBounds(0, 0, 60, 60); newButton.SetCompoundDrawables(icon, null, null, null); newButton.Text = "Newly added button."; FindViewById<LinearLayout> (Resource.Id.llMain).AddView(newButton); }; } }

  • BenRichesBenRiches GBMember

    Hey Cortez,

    Is it possible to create it from scratch without having resource that's already been outlined in axml?

    I want to create it similar to this if possible.

        LinearLayout layout = FindViewById<LinearLayout>(Resource.Categories.mainLayout);
         FrameLayout.LayoutParams imgViewParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MatchParent,   FrameLayout.LayoutParams.WrapContent, 0.0f);
         imgViewParams.SetMargins(10, 10, 10, 10);
    List<Category> categories = GetCategories();
            foreach (var cat in categories)
            {
                Button button = new Button (this);      
                button.Text = cat.Text;
    
                button.Image = cat.BitMap;
    
                button.Click += new System.EventHandler(buttonEvent);
                layout.AddView (button);
            }
    

    This categories are coming from an outside source and will have BitMap images. Your solution is great but i need to dynamically set the image from the category, i don't know the images during compiling.
    Category is a type that contains a bitmap and text.

    Thanks for the all help.
    Ben

  • BenRichesBenRiches GBMember

    This is excellent, exactly what i needed! Thank You.

    Kind Regards
    Ben

Sign In or Register to comment.