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));
Related
I am working on a project where I will have many buttons of the same size.
I was wondering if there is a way to create a standard button formatting with a set
height
weight
padding
etc.
I have looked into styles but I am not sure if that is the road I should be taking. I also thought about extending the button class and programmatically setting these values to a standard.
Hello, how are you!
The best way is to create a style in the style.xml resource, all the necessary features.
just add the style with style = "#style/mystyle" to all the buttons.
example:
<style name="mystyle">
<item name="android:textSize">20sp</item>
<item name="android:gravity">center|center_horizontal</item>
<item name="android:textAlignment">center</item>
</style>
In the same way when you want to create a customized button (java/kotlin)
it will also be added in the same way.
Greetings.
You can create a reusable component in a separate .xml file and use it everywhere since you said the dimensions exactly the same all across the app. Here is a sample:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="4dp" />
<!--customize and animate stuff-->
<gradient
android:angle="270"
android:endColor="#88b823"
android:startColor="#b0dc54" />
</shape>
I have been using the new MaterialButton class. I want different colors on the button when the user clicks the button.
I have been using selector drawables for this purpose since the very beginning, however it doesn't appear to be working on MaterialButton.
<com.google.android.material.button.MaterialButton
android:layout_width="0dp"
android:text="#string/login"
style="#style/Widget.Mohre.Button"
android:layout_height="wrap_content"
app:cornerRadius="#dimen/card_corner_radius"
android:padding="#dimen/unit_large"
android:id="#+id/loginBtn"/>
My Widget.Mohre.Button style
#color/textColorWhite
#drawable/mohre_button_selector
#style/TextAppearance.Button
#animator/button_state_list_anim
My selector drawable
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/mohre_button_pressed" android:state_pressed="true" />
<item android:drawable="#drawable/mohre_button_selected" android:state_enabled="false" android:state_pressed="false" />
<item android:drawable="#drawable/mohre_button_normal" />
My individual drawables are just rectangle shapes with different colors like these
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp"></corners>
<solid android:color="#3a516a"></solid>
</shape>
The button doesn't take on the colors at all from the selector drawable. It just shows the default accent color of the application
With the normal way (setting the selector drawable as background of the button), it won't work as expected if you are using Theme.MaterialComponents.
You can use Theme.AppCompat.DayNight.NoActionBar as an alternative, but if you don't want to use that theme, then simply use:
<androidx.appcompat.widget.AppCompatButton
................/>
You will get the same result as it was working with the Appcompat theme even if you are using latest Material themes!
as explained in this medium post https://medium.com/over-engineering/hands-on-with-material-components-for-android-buttons-76fa1a92ec0a we can use ColorStateList to change color or background of Button.
For me working solution for now was to set backgroundTint to null and backgroundTintMode to add like this:
<style name="Button.XYZ" parent="Button">
<item name="shapeAppearance">?attr/shapeAppearanceLargeComponent</item>
<item name="drawableTint">#color/ColorXYZ</item>
<!-- background drawable -->
<item name="backgroundTint">#null</item>
<item name="backgroundTintMode">add</item>
<!-- background drawable -->
<item name="android:background">#drawable/XYZ</item>
<!-- Color drawable -->
<item name="android:textColor">#color/XYZ</item>
</style>
And also using the style in xml not in theme
If you want a button that has a custom background (to apply <selector> e.g), but your theme is set up to use Theme.MaterialComponents (which is nowadays, 2021), you could switch the XML element in the layout to be <android.widget.Button> instead of <Button>. This should cause the Material Components for Android to ignore that element, and you can manipulate this button normally with respect to XML attributes.
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 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
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>