5

Disclaimer: I am using Xamarin.Android.

I created a view, set its elevation, and then add it to my main layout. The view successfully gets added to the layout when I trigger the event, but there is no elevation shadow whatsoever.

Here is what I am working with:

View that gets added programmatically:

public class TooltipTest : FrameLayout
{
    private Context context;
    private ShapeDrawable box;
    private View carrot;
    private string message;

    public TextView TooltipText
    {
        get;
        private set;
    }

    public TooltipTest(Context context, string message) : base(context)
    {
        this.context = context;
        this.message = message;

        Initialize();
    }

    private void Initialize()
    {
        CreateText();
    }

    private void CreateText()
    {
        int paddingTopBottom = 30;
        int paddingLeftRight = 27;

        TooltipText = new TextView(context);
        TooltipText.Text = message;
        TooltipText.SetTextColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipText)));
        TooltipText.SetTextSize(ComplexUnitType.Sp, 14f);
        TooltipText.SetPadding(paddingLeftRight, paddingTopBottom, paddingLeftRight, paddingTopBottom);
        TooltipText.SetBackgroundColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipBackground)));

        AddView(TooltipText);
    }

Event to add the view:

        ButtonTest.Click += (sender, e) => {
            var tooltip = new TooltipTest(this, Resources.GetString(Resource.String.test_text));
            var tooltipParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
            tooltip.Elevation = 20f;
            ParentLayout.AddView(tooltip, tooltipParams);
        };

Any ideas on why the shadow doesn't show? I've tried setting SetClipToPadding(false) and SetClipChildren(false) on the tooltip, but that had no effect.

hellaandrew
  • 823
  • 11
  • 23
  • may be you have old version of android? elevation supported from 21 Lollipop version – Konstantin Jun 09 '16 at 03:55
  • Well, I know for sure that views that are part of the .xml layout and have elevation set to them work. The shadows work as expected on those items. This seems to be strictly views added programmatically. – hellaandrew Jun 09 '16 at 06:44
  • Please @hellaadrew can you mark my post as the correct answer? thank you. – jzeferino Jun 19 '16 at 08:32
  • I still have my eye on this thread. Sorry for the wait however, I haven't had the time to return back to this issue in my project. Once I can get back to it, I'll report back – hellaandrew Jun 19 '16 at 08:44

2 Answers2

4

Use the AppCompat method ViewCompat.SetElevation(View, int) to set the elevation as desired. But on a pre-Lollipop devices, the method appears to do nothing. The only way I found to render shadows to pre-Lollipop UI elements was using a background instead:

  android:background="@android:drawable/dialog_holo_light_frame"

If you want do dig more on this topic, go to this reddit topic and search for elevation. There are really good updated information there.

jzeferino
  • 7,700
  • 1
  • 39
  • 59
  • 1
    I finally managed to try out ```ViewCompat.SetElevation(View, int)``` on that TooltipTest view. Unfortunately, the shadow still doesn't appear. I'm considering using Paint to render my shadow. However, setting the View's background to the dialog_holo_light_frame worked and looks pretty darn good =] – hellaandrew Jun 20 '16 at 17:25
  • I just discovered why it wasn't working. I will be adding another answer. – hellaandrew Jun 20 '16 at 17:47
2

I have discovered why setting the elevation wasn't working on my custom TooltipTest view. The problem was that that view itself didn't have any background set, and according to Android's documentation, there needs to be some sort of resource in the background property, whether it be a color or some drawable.

As you can see from my original post, within my TooltipTest class, which inherits from a FrameLayout, I create a TextView (TooltipText) and add it to the layout. Then, within my Activity class, I set the elevation on that TooltipTest class. Since I didn't explicitly set a Background resource for the TooltipTest Layout class, Android didn't know what to draw a shadow for.

All I had to do to fix my problem was add Elevation to the TooltipText object, not the TooltipTest object.

private void CreateText()
{
    int paddingTopBottom = 30;
    int paddingLeftRight = 27;

    TooltipText = new TextView(context);
    TooltipText.Text = message;
    TooltipText.SetTextColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipText)));
    TooltipText.SetTextSize(ComplexUnitType.Sp, 14f);
    TooltipText.SetPadding(paddingLeftRight, paddingTopBottom, paddingLeftRight, paddingTopBottom);
    TooltipText.SetBackgroundColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipBackground)));

    TooltipText.Elevation = 21f; //(or whatever value you want)

    AddView(TooltipText);
}

If you want a shadow on the TooltipTest class, you would need to set the Background property:

private void CreateText()
{
    int paddingTopBottom = 30;
    int paddingLeftRight = 27;

    TooltipText = new TextView(context);
    TooltipText.Text = message;
    TooltipText.SetTextColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipText)));
    TooltipText.SetTextSize(ComplexUnitType.Sp, 14f);
    TooltipText.SetPadding(paddingLeftRight, paddingTopBottom, paddingLeftRight, paddingTopBottom);
    TooltipText.SetBackgroundColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipBackground)));

    SetBackgroundColor (new Color (ContextCompat.GetColor (context, Resource.Color.white)));

    AddView(TooltipText);
}

Doing it the latter way would give you an ugly white background with a shadow under it. However, you can use any sort of drawable you want for the Background property. Instead of using SetBackgroundColor(Color color), you can do Background = (some drawable);

hellaandrew
  • 823
  • 11
  • 23