CODEWITHSUNDEEP
androidandroid-alertdialog
jcw
jcw

Reputation: 5162

Adding a border to an AlertDialog

I am trying to add a border to an alert dialog. I am hoping to make it look like this:

enter image description here

The best solution I have found thus far is to use a nine patch drawable as the background for the dialog.

The problem with this is that I have not found a way to make a nine patch background that actually gives the dialog a consistent white line around it. This has been my best attempt thus far (sorry it is a little hard to see...) :

enter image description here

The problem is that this produces a dialog like this:

enter image description here

The problems here are twofold; the lines at the sides are way too thick, and the lines at the top are kind of faded by the shadow.

My only ideas are to either find a working nine patch that gives a consistently thick border, or to find a way to get the 'main layout' of the alert dialog, so I can add a padding to that directly.

What is the best way to go about setting up a border on an Alert Dialog like this?

Upvotes: 3

Views: 6313

Answers (2)

jcw
jcw

Reputation: 5162

The answer by questioner was very close to what I wanted, but it still left a big black line around the dialog that I was not interested in.

I deleted one of the layers from the layer list, and customised the padding on the white border. I also did not set the background to transparent as suggested would be a good idea in the comments.

The shape the is inside the item is to give the background the same curved edges on a dialog (if you look really closely on 3.0+, you can see a few pixels of round corners).

In a dialog_border.xml file in the drawable folder, I had this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="6dp"
        android:left="13dp"
        android:right="13dp"
        android:bottom="6dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/offWhite" />

            <corners
                android:radius="3dp"/>
        </shape>
    </item>
</layer-list>

And in my style I had this:

<style name="DialogTheme" parent="android:Theme.Holo.Dialog">
    <item name="android:windowBackground">@drawable/dialog_border</item>
</style>

Although it could probably be set programatically rather than in the style if necessary.

Upvotes: 6

questioner
questioner

Reputation: 2293

In your dialog's xml set following background for top level view:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white"/>
    <item
        android:bottom="1dp"
        android:drawable="@color/black"
        android:left="1dp"
        android:right="2dp"
        android:top="2dp">
    </item>
</layer-list>

You can customise border width on each side.

Upvotes: 2

Related Questions