I am trying to add a border to an alert dialog. I am hoping to make it look like this:
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...) :
The problem is that this produces a dialog like this:
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?
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.
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.
Related
I'm implementing a widget which can draw a "blanking" fill behind a popup. I would like this fill to be the same transparent black as the one used in the default Android AlertDialog.
It's easy enough for me to guess, to use a color picker and estimate. But what I'd really like is to know if there is, somewhere, defined in the android codebase an android.R.color.dialogWindowBackground or some such value.
I've done some sleuthing, but to no avail.
The source for AppCompat's AlertDialog specifies the theme: R.attr.alertDialogTheme. But going through the appcompat source repo, I find styles that are close, but not helpful, such as https://android.googlesource.com/platform/frameworks/support.git/+/master/v7/appcompat/res/values/styles_base.xml
I've also pored through the colors.xml, etc files and I simply can't find where the AlertDialog's windowBackground is defined.
I know this is sill, I can just run with something arbitrary like #77000000, but I'd like it to be the correct dialog window background color.
EDIT:
I've tracked Dialog window background down to a shape drawable:
https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/drawable/dialog_background_material.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:inset="16dp">
<shape android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="?attr/colorBackground" />
</shape>
</inset>
But, how do I resolve the ?attr/colorBackground value?
Short question:
Suppose I use this style on a button:
<Button
style="#style/Widget.AppCompat.Button.Borderless.Colored" ...
(or without the "Colored" part).
How do I set the background of it to be a selector that has a different color when being pressed? The default one is quite a bold color on pre-Lollipop...
I want to have all of the style working as the default (including padding), except for the color of the selector.
I think the easiest would be to create a typical multi-state drawable and replicate Android's default button drawable properties for padding, etc...
From the Android SDK AppCompat theme:
<!-- Colored bordered ink button -->
<style name="Base.Widget.AppCompat.Button.Colored">
<item name="android:background">#drawable/abc_btn_colored_material</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Widget.Button.Inverse</item>
</style>
They use the drawable abc_btn_colored_material, whose source is like this: https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_borderless_material.xml
You can see it's just a layer list with the following multi-state drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/abc_btn_default_mtrl_shape"/>
<item android:state_pressed="true" android:drawable="#drawable/abc_btn_default_mtrl_shape"/>
<item android:drawable="#android:color/transparent"/>
</selector>
https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_default_mtrl_shape.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<shape android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material" />
<solid android:color="#android:color/white" />
<padding android:left="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:bottom="#dimen/abc_button_padding_vertical_material" />
</shape>
</inset>
So just make it yours :) Copy the drawable xml into your app and customize it.
I don't know if you will be able to access the #dimen/... from outside the SDK package, those values are defined in the SDK Values.xml, take a look at https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/values/values.xml . If it's not possible, just create your own version of the dimens in your values.xml
If there's a cleaner solution any android guru can point out, I'll be glad to know!
Requested Update
Another trick is to apply a ColorFilter to the whole Button View. It's a very simple thing but not useful for all situations, as the color filter will blindly change the view as a whole (including Font color, borders, etc...). However, smartly selecting Alpha on the colors, could work for specific situations.
I'd suggest a LightningColorFilter. To apply a color filter to the Button, or to any view, you can do something like
myButton.getBackground().setColorFilter(new LightingColorFilter(Color.WHITE, Color.RED));
Check out what every color means here: http://developer.android.com/reference/android/graphics/LightingColorFilter.html
I would like to create a ProgressBar with no background. I've been able to turn the background transparent, but there is still padding in the space where the background normally shows. Setting padding to 0 does not change this. Is it possible to achieve what I want without creating a custom drawable?
The issue is that the default 9Patch images used for ProgressBar have space around them. For example below is the standard holo_dark image used for the primary progress, secondary progress and background . As you can see, they each have areas of transparent space in their images.
progress_primary_holo_dark.9.png
progress_secondary_holo_dark.9.png
progress_bg_holo_dark.9.png
To achieve what you are after, you'll need to supply your own 9Patch images which do not have this extra space. Use setProgressDrawable() in your code or android:progressDrawable in xml, to set the Drawable for your ProgressBar.
You can combine all the necessary images in a single LayerList Drawable like the Android OS does. For example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/my_progress_bg" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_secondary" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_primary" />
</item>
</layer-list>
You can find all the default graphic resources used by Android in the sdk/platforms/android-xx/data/res/ folder on the computer you're developing on.
in my current project I'm building an App with API 10 which should look like an ICS App.
Since my GUI is not very complex I can build this all manually, but I have some problems with button states.
I googled a lot and found nothing that would work for me so I would appreciate any help ;)
I designed an action bar with google ICS stock icons. When for example someone touches the search-loupe-icon, which has an 8dp padding around it, it's background color should change to a defined highlight-color-value.
So now you would suggest probably a selector drawable. But my case is: I have an icon-drawable which has an background-color, which I want to change. I dont want to change the icon, so since I cant change the backgroundcolor from a selector-xml this doesn't work.
(I thought I can setup multiple drawable-xml with my icon static bg colors so that I could refer with one selector to those different colored icons, but since a shape-drawable-xml cannot have a source and an bitmap-drawable-xml cannot have a background color, this is no sollution.)
If I try to change the background color in my onclick-listener (also tried onTouch) with:
ImageButton searchIcon = (ImageButton) findViewById(R.id.upper_actionbar_icon_search);
searchIcon.setBackgroundColor(R.color.android_ics_blue_light);
The Icon gets a dark grey bg color. This is also true for any other color altough nothing lies on top of the ImageButton. I also tried an ImageView.
So could someone explain to my please how the hell I can define a highlighted bg color-image without any hacks (default-gone image that lies above the icon and is set visible onclick).
Thanks so much!!
Okay the solution is simple.
Write yourself a drawable selector which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<item android:state_selected="true">
<shape android:shape="rectangle">
<solid android:color="#color/android_ics_blue_light"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/android_ics_blue_light"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/light_grey"/>
</shape>
</item>
Within your ImageButton code define your icon as src and your new drawable as background, like this:
<ImageButton
<!-- ... -->
android:src="#drawable/icon_search"
android:background="#drawable/actionbar_ontouch"
/>
Works like a charm!
Using progress_horizontal.xml as a base drawable for my seekbar i was able to customize it pretty well. But unfortunately i stuck with the following problem. I need my progress to be made from two horizontal lines with different color something like this http://picasaweb.google.com/manigoad/Other#5442553107070487330 . In this case a blue line and transparent line below it.
So how can i make my progress to be made from two different colors.
Tnaks
I've had a look into creating the "stack" of shapes that you are looking for using "drawable" XML, but the padding/height values seem to be ignored.
There are two possible workarounds that I can think of:
Create a class that implements Drawable for the background and the progress and draw the custom colours/gradients yourself.
-OR-
Create a PNG of the background (on the right) and progress (on the left) from your mockups. About 30px wide should be fine (if you make them 1px wide, it will be put more pressure on the layout because it has to be repeated more times). Throw those in res/drawable/ and then load them into your styles using <bitmap>:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<bitmap android:src="#drawable/scroll_bg" />
</item>
<item android:id="#android:id/progress">
<clip>
<bitmap android:src="#drawable/scroll_progress" />
</clip>
</item>
</layer-list>