CODEWITHSUNDEEP
c#androidimagexamarinbutton
GeekyGuy83
GeekyGuy83

Reputation: 107

Xamarin not showing images in some cases

I'm having some trouble getting Xamarin to show images in my mobile app. When I use Image to put an image in, it works fine, but when I try to set the same image as the titleIcon or put the image on a button, it doesn't work. Is there some fundamental difference for these cases?

Relevant setup:

public partial class ThisPage : ContentPage
{

  ...

  public ThisPage(string data)
  {
    Content = new ScrollView()
    {
      Orientation = ScrollOrientation.Vertical,
      VerticalOptions = LayoutOptions.FillAndExpand,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
      Margin = new Thickness(10, 0)
    };

    ...

    (Content as ScrollView).Content = new StackLayout()
    {
      VerticalOptions = LayoutOptions.Start,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
    };

    ...

    StackLayout layout = (Content as ScrollView).Content as StackLayout;

Works perfectly fine

    Title = titleString;

Does not work!

    NavigationPage.SetTitleIcon(this as ContentPage, filename);

Works properly, showing that my titleIcon works perfectly fine as an image

    Image im = new Image
    {
      Source = filename,
      VerticalOptions = LayoutOptions.CenterAndExpand,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
    };
    layout.Children.Add(im);

And as for the buttons...

    AddButton(buttonData, layout);

  ...

  }
  public void AddButton(string buttonData, StackLayout layout)
  {

    ...

    Button b = new Button
    {
      VerticalOptions = LayoutOptions.FillAndExpand,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
      //CornerRadius = 14  //Does not compile
      BorderRadius = 14  //Gives a warning telling me that I should use CornerRadius instead
    };

This works fine

    b.Text = buttonText;

This doesn't work at all.

    b.Image = filename;

The button always appears on the page, it just never has an image on it. Making the button larger manually and/or omitting text doesn't cause the image to appear either.

    layout.Children.Add(b);
  }
}

More data:

Testing using Xamarin Live app on my DuraForce Pro running Android version 6.0.1.

The "run" button in Visual Studio Community 2015 says "KYOCERA KYOCERA-E6820 Player (Android 6.0 - API23)".

The version of Xamarin.Forms installed into the project (NuGet) is Latest stable 2.5.0.280555

EDIT:

Thanks to Dennis Schröer below, images now work fine for buttons, but they're still not working as a title icon.

The image I'm trying to use for a title icon is a jpg that's 80 x 578 pixels.

It's in the Android sub-project's Resources/drawable folder as an AndroidResource and the iOS sub-project's Resources folder as a BundleResource.

I cannot test the iOS version of the app yet, as I very recently became unable to update to the latest version of XCode. (The latest version is incompatible with the Mac I was previously connecting my PC to for compiling the iOS version). Because of this, I'm only debugging the Android version for now.

I've also tried setting the property directly in the page's xaml file, to no avail:

<?xml version="1.0 encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApplicationName.Views/ThisPage"
             NavigationPage.TitleIcon="Logo.jpg"
</ContentPage>

I've also tried to add it directly into Toolbar.axml as an ImageView, but that was not successful either:

<?xml version="1.0" encoding="UTF-8"?>
<android.support.v7.widget.Toolbar
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:minHeight="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
  app:layout_scrollFlags="scroll|enterAlways">
  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/Logo.jpg"
    android:layout_gravity="center"
  />
</android.support.v7.widget.Toolbar>

For anyone who wants to see what change I made based on Dennis Schröer's suggestion, here's the new AddButton:

public void AddButton(String current, StackLayout layout)
{
    string[] segments = current.Split('|');
    string link = null;
    Button b = null;
    Image im = null;

    int i = 0;
    foreach (string segment in segments)
    {
        switch (i)
        {
            case 0:
                {
                    link = segment;
                }
                break;
            case 1:
                {
                    if (segment.Length > 0)
                    {
                        b = new Button
                        {
                            Text = segment,
                            VerticalOptions = LayoutOptions.CenterAndExpand,
                            HorizontalOptions = LayoutOptions.CenterAndExpand,
                            //CornerRadius = 14  //Does not compile: "'Button' does not contain a definition for 'CornerRadius'
                            BorderRadius = 14  //Gives a warning: "'Button.BorderRadius' is obsolete: 'BorderRadius is obsolete as of 2.5.0. Please use CornerRadius instead.'"
                        };
                    }
                }
                break;
            case 2:
                {
                    im = new Image
                    {
                        Source = segment,
                        VerticalOptions = LayoutOptions.CenterAndExpand,
                        HorizontalOptions = LayoutOptions.CenterAndExpand
                    };
                }
                break;
        }
        i++;
    }

    if (im != null)
    {
        TapGestureRecognizer tap = new TapGestureRecognizer();
        if ((link.StartsWith(c_linkType)) || (link.StartsWith(c_mailType)))
        {
            tap.Tapped += (o, e) =>
            {
                LinkClicked(link);
            };
        }
        else
        {
            tap.Tapped += (o, e) =>
            {
                ButtonClicked(link);
            };
        }
        im.GestureRecognizers.Add(tap);
        layout.Children.Add(im);
    }

    if (b != null)
    {
        if ((link.StartsWith(c_linkType)) || (link.StartsWith(c_mailType)))
        {
            b.BackgroundColor = Color.White;
            b.TextColor = Color.Blue;
            b.BorderColor = Color.White;
            b.BorderWidth = 0;
            b.Clicked += (o, e) =>
            {
                LinkClicked(link);
            };
        }
        else
        {
            b.BackgroundColor = new Color(186.0 / 256.0, 39.0 / 256.0, 45.0 / 256.0);
            b.TextColor = Color.White;
            b.Clicked += (o, e) =>
            {
                ButtonClicked(link);
            };
        }
        layout.Children.Add(b);
    }
}

Upvotes: 4

Views: 772

Answers (1)

Robbit
Robbit

Reputation: 4358

I've also tried to add it directly into Toolbar.axml as an ImageView, but that was not successful either:

Don't add .jpg, please use this:

 <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/Logo"
    android:layout_gravity="center"
  />

Or you can add android:id="@+id/toolbarImage" to your ImageView:

<ImageView
        android:id="@+id/toolbarImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/Logo"
        android:layout_gravity="center"
      />

And in your MainActivity add this below LoadApplication(new App());:

        ImageView toolbarImg = this.FindViewById<ImageView>(Resource.Id.toolbarImage);
        toolbarImg.SetImageResource(Resource.Drawable.Logo);

Upvotes: 1

Related Questions