Search code examples
androidandroid-actionbarxamarin.android

How can I change the color of the bottom border of my ActionBar in Android?


I'm trying to achieve a bottom border effect for my ActionBar, similar to this image:

enter image description here

Here's what I've tried so far in my styles.xml:

<style name="MyActionBar"
        parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:titleTextStyle">@style/TitleTextStyle</item>
        <item name="android:background">#088A29</item>
        <item name="android:backgroundStacked">#088A29</item>
        <item name="android:backgroundSplit">#0B3B0B</item>
        <item name="android:layout_marginBottom">5dp</item>

I've added a margin at the bottom, but the margin appears white. How can I change the color of this bottom margin to match the ActionBar background color?

Thank you for your assistance!


Solution

  • For me the following solution worked perfectly and smooth.

    <style name="MyActionBar"
        parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:titleTextStyle">@style/TitleTextStyle</item>
        <item name="android:background">@drawable/custom_background_bar</item>
        <item name="android:layout_marginBottom">5dp</item>
    

    And of course I built the custom_background_bar that I saved into drawable forlder.

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
        <shape android:shape="rectangle" >
          <solid android:color="#ffff0000" />
        </shape>
      </item>
      <item android:top="-3dp" android:right="-3dp" android:left="-3dp">
        <shape>
          <solid android:color="@android:color/transparent" />
          <stroke
              android:width="2dp"
              android:color="#ff00ff00" />
        </shape>
      </item>
    </layer-list>
    

    You are free to change #ffff0000 (the background bar color) and #ff00ff00 (the bottom border color) with the values you prefer. You can change also then thickness and style of the border or add other shape and elements inside the layer-list. You can also set again another drawable as background and give shade or transparency as you prefer.

    I hope it will help.