I would like to create a background that contains an image repeating itself horizontally and vertically. Above the entire background I would like to apply a gradient that goes from white to transparent, covering the half of the background.
Now, I would like to know if I can do this with style. It is because I get this warning:
"Possible overdraw: Root element paints background #drawable/background with a
theme that also paints a background (inferred theme is #android:style/Theme)"
It looks like the background is applied twice, once by the default theme (Theme) and then by my layout, drawable element, or whatever.
So, my questions is: how can I do it by creating a new theme or creating a drawable and disable the default Theme background that would be overdrawn by the new one?
Thanks to everyone!
Assuming you want to set the background for all your windows, the style is defined like this:
<style name="MyTheme" parent="#android:style/Theme.Holo">
<item name="android:windowBackground">#drawable/activity_background</item>
</style>
If you want to do it for a specific view, usually there is an "android:background" attribute that must be set to your drawable.
To have a bitmap with a gradient on top of it, your drawable must be defined using a layer list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:dither="true"
android:src="#drawable/dialog_background_img"
android:tileMode="repeat" >
</bitmap>
</item>
<item>
<shape>
<gradient
android:angle="90"
android:endColor="#66ff0000"
android:startColor="#5500ff00" />
</shape>
</item>
</layer-list>
Related
I have a bottomsheet that has constraint layout as root.How to curve the top edges?
Tried this code but it's not working.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bottom_sheet_bg"
android:paddingTop="#dimen/dimen_20dp"
android:paddingBottom="#dimen/dimen_20dp"
app:layout_behavior="#string/bottom_sheet_behavior">
bottom_sheet_bg is
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="#dimen/dimen_20dp"
android:topRightRadius="#dimen/dimen_20dp"/>
<solid android:color="#color/white" />
</shape>
Something to keep in mind is that view structures that an application programmer creates are usually placed into some type of view group enclosure by Android. Let's take a simple app and color the background of the main activity a blue and color the background with the curved top red. This is to better show what is going on.
Here is an image from the layout inspector of Android Studio:
As you can see, the curved top of the background drawable is there but the corners have a white background which is the background of the FrameLayout design_bottom_sheet. This is also true in your app but the background colors of your background and of the FrameLayout are both white, so it appears that the rounded corners are just not there. They are present but are masked by the white of the background of the FrameLayout.
To solve this you can search for the design_bottom_sheet and explicitly change its background to transparent, but it may be better to approach this issue through styles.
In your styles file create the following:
<style name="BottomSheetDialogStyle" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetModalStyle</item>
</style>
<style name="BottomSheetModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/bottom_sheet_bg</item>
</style>
(Your styles may differ, but the concept will still apply.)
In the BottomSheetDialogFragment add the following:
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NO_FRAME, R.style.BottomSheetDialogStyle);
}
or just add the setStyle() line if you already have onCreate() defined. This code will prevent the design_bottom_sheet from drawing a background.
This will show the following:
and in the Layout Inspector:
Change the colors to what you need but keep in mind that the color that shows at the corners will now be whatever color shows under the FrameLayout.
Okay so the way I achieved it is simply through the drawables.
rounded_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:topLeftRadius="16dp"
android:topRightRadius="16dp"/>
</shape>
inside res/values/styles.xml
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/AppModalStyle</item>
</style>
<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/rounded_dialog</item>
</style>
and inside the java/kotlin
final BottomSheetDialog dialog = new BottomSheetDialog(getActivity(), R.style.AppBottomSheetDialogTheme));
I want layout with dynamic background gradient. Start scroll from one color and at the end of scroll another color. If this screen without scroll, background looks like usual gradient.
Is there are any way to do it?
Thank a lot.
I'm not sure if this is what you mean.You can create a xml file in drawable and name it like background.xml. In this file, for example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape = "rectangle>
<gradient
android:startColor="#`enter code here`"
android:endColor="#`enter code here`"
android:angle="..." />
</shape>
</item>
</selector>
Then in the layout of your activity, you set background by #drawable/background.xml
I am trying to add a stroke to the top of a Holo button, my application allows theme change from Holo --> Holo.Light. Every piece of information I have found relates to providing a solid in a custom drawable. Is there a way to keep all the holo themed buttons intact and just add a stroke to the top of particular buttons?
Basically I want to keep the colors Holo/Light have but just add a stroke at the top.
Sample:
Tried drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="6dp" />
<solid android:colorBackground="#00000000" />
<stroke android:width="2px" android:color="#050875">
</stroke>
</shape>
This when applied as a background overrides the Holo/Light colors to transparent background.
What you should do, is create a drawable (with a colored stroke), like you described. You can then make the regulars solid color transparent color (#00000000) and apply it as a background to the view component you wish to style.
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.
I have an ImageButton with a background image that has some transparency. By default, the button gets a grey background where the transparency pixels are - due to the Holo.Light theme. I tried setting the background color of the button to transparent via the setBackgroundColor(Color.TRANSPARENT) method. That works just fine and does what I need except now my button no longer has the light blue color when focused/pressed and looks rather flat (no borders around it, so it looks like an image).
I googled and saw that you can assign selectors as explained here but that would mean that I have to specify an image per button state and I don't want to do that. I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that?? Please provide a working example as I have tried many different combinations with no success.
Edit
Thank you all for helping. I figured out how to make this work without having to recreate the same image with the focused and pressed states for each button!
Here is my solution:
My button is defined as:
<ImageButton
android:id="#+id/ImageButton05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button" />
And my background XML file (titled button.xml) is defined as follows:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:drawable="#drawable/btn_default_pressed_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item android:state_focused="true">
<layer-list>
<item android:drawable="#drawable/btn_default_focused_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item android:state_hovered="true">
<layer-list>
<item android:drawable="#drawable/btn_default_focused_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="#drawable/btn_default_normal_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
</selector>
You can put something into an xml file, for example, custom_button.xml and then set background="#drawable/custom_button" in the button view.
Please refer to this link as there is an xml example: Standard Android Button with a different color
I used it in my code and it worked just the way I wanted.
Reference:
Standard Android Button with a different color
Edited:
If you would rather use
Maybe you should try to set a border.
For example (Reference: Android - border for button ):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#00FF00"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
OR,
You could try to set the style/theme for the button. (But it would be in a separate file)
The style/theme contains the color attributes for various states of button such as focused / enabled / disabled/ etc.
For setting background color/image and having click highlight effect,
Here is an example (Reference: How to programmatically setting style attribute in a view)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/btn_pressed" />
<item
android:state_pressed="false"
android:drawable="#drawable/btn_normal" />
</selector>
You can then apply this selector to a Button by setting the property android:background="#drawable/my_button".
I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that??
AFAIK you can't because the focus/pressed colors are built in to the same image resources that contain the grey background.
If you want to keep the system focus/pressed but remove the background you'll have to grab a copy of the image resources (which can be found in your SDK at /sdkroot/platforms/[version]/data/res/drawable-hdpi replace [version] with whatever api level you are after. And if needbe replace hdpi with another density) and edit out the grey button from them with a photo editor. Then make a selector that references your modified images and set that as the background for your button.
EDIT:
Here are the default holo button images for focused and pressed
You can use ImageView instead of ImageButton to solve your problem. Please set the android:background property of the ImageView to the background color of the parent.
You can write this in your xml file:
android:background="#null"
It worked for me.
if u don't need the default gray background and u need your ImageButton seems like an icon without no backgrounds just use android:background attribute and set it to
#android:color/transparent**
<ImageButton
android:id="#+id/ImageButton05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:background="#drawable/button" />
hope that help anybody