I am trying to set a selectable background on a linear layout with a background color. I know the usual way is android:background="?android:attr/selectableItemBackground" but i already have another code in background. Here is the snippet of the code.
<LinearLayout
android:id="#+id/number"
android:layout_width="150dp"
android:layout_height="130dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="5dp"
android:layout_marginTop="0dp"
android:background="#color/category_colors"
android:gravity="center"
android:orientation="vertical"
android:weightSum="1">
The question is how do i set selectable background, there?
Try this code snipped on for size:
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
the android foreground attribute is relatively newly added XML attribute, but it does not work for API 22 and below! If this is the case then looks like we are going to have to stack attributes in a custom XML file,but don't worry, it is easier than it sounds!
1)In your project view go to res/drawable folder
2)right click the Drawable folder itself and select new>>>drawable resource file
3)Enter a file name my_custom_button.xml(the root doesn't really matter because you will replace it with the below code)
4)Click on the XML text tab (as opposed to the design view) if you aren't already there
5)Select all text and basically replace with the following:
(creating a custom color border is basically the same steps).
Feel free to change and play with the colors or to replace the gradient (mixture of colors) to a custom color of your own!
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/category_colors">
<item android:id="#android:id/ripple">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
<corners android:radius="#dimen/button_radius_large" />
</shape>
</item>
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#color/colorPrimaryLight"
android:startColor="#color/colorPrimary"
android:type="linear" />
<corners android:radius="#dimen/button_radius_large" />
</shape>
</item>
</ripple>
HOPE THIS HELPS!!!
You should background selector XML file like below code and apply your initial colour along with press and pressed colour.
Then you would have to create the res/drawable/bg_selector.xml file like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/color_056DAE" /> <!-- pressed -->
<item android:state_focused="true"
android:color="#color/color_056DAE" /> <!-- focused -->
<item android:color="#color/color_333333" /> <!-- default -->
</selector>
then you have to apply this file to the background of your layout in XML.
android:background="#drawable/bg_selector"
Related
<Button
android:id="#+id/sort_time"
android:layout_width="0dp"
android:layout_height="52dp"
android:layout_marginTop="54dp"
android:background="#drawable/roundless_button"
android:backgroundTint="#2A56C6"
android:text="#string/order_by_time"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/sort_status"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/IndBlue"
>
<shape android:shape="rectangle">
</shape>
<solid android:color="#color/IndBlue" />
</item>
</selector>
I tried to edit the buttons colors, but for some reason it won't change. Solid android:color / android:drawable doesn't work even though I placed it everywhere.
when you use selector as button background it inherits the color from theme. you can try changing the theme primary color and that will affect the button color.
I've this issue, I don't know where it come from, I've created this buttons with custom background, but the background color talking the primary color and cannot change it unless change the primary color.
<Button
android:id="#+id/btn_teacher"
style="#style/normalText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_16sdp"
android:background="#drawable/btn_rounded_stroke"
android:text="#string/txt_teacher" />
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="bg_color">#FFD7A4</color>
</resources>
I have many buttons with different colors, so i can't change the primary color
here is my drawable background
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<size android:height="#dimen/_48sdp" />
<corners android:radius="#dimen/_24sdp" />
<stroke android:width="#dimen/_1sdp" android:color="#59CECE" />
<solid android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
I'm using new material design by google
implementation "com.google.android.material:material:1.3.0-alpha02"
How can i override this color?
Since you are using a Theme.MaterialComponents.* your Button is replaced at runtime by a MaterialButton.
Currently the backgroundTint is still the default MaterialButton style.
It means that if you are using a custom android:background, you have to make sure to null out backgroundTint to avoid that the custom background doesn't get tinted with the attr/colorPrimary defined in your theme.
You have to add app:backgroundTint="#null":
<Button
app:backgroundTint="#null"
android:background="#drawable/.."
In any case you don't need a custom background (btn_rounded_stroke) in your case. You are just using a custom background only to define rounded corners. This feature is provided by default by the MaterialButton, then just use the cornerRadius attribute.
Use the standard MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="48dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#59CECE"
app:cornerRadius="24dp"
When Material theme is used then Button view is mapped to MaterialButtton.
There is one more way to setup the button background in this case.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"
...
<item name="materialButtonStyle">#style/ColoredButton</item>
</style>
<style name="ColoredButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="backgroundTint">#color/customButtonColor</item>
</style>
What worked for me
First create btn_style in your styles.xml or themes.xml
<style name="btn_style" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#null</item>
</style>
then in you layout apply the style and use the color or drawable that you want
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:background="#color/Red"
style="#style/btn_style"
android:text="Button"/>
Try this .
Your Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_margin="5dp"
android:background="#drawable/round_btn"
android:padding="20dp"
android:text="My Text" />
Here is your round_btn drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:radius="20dp" />
</shape>
In your Gradle just replace this line
implementation "com.google.android.material:material:1.3.0-alpha02"
with this
implementation 'com.google.android.material:material:1.2.1'
All you need to do is simply go to your themes.xml file and change the style name to:
style name="Theme.AnimatedLogin"
parent="Theme.AppCompat.Light.NoActionBar"
in Light theme mode and to:
style name="Theme.AnimatedLogin"
parent="Theme.AppCompat.DayNight.NoActionBar"
in Dark theme mode in your theme.xml(night) file and then you can customize your button and change its colour.
I'm making custom buttons for an android application, but I want the buttons to look like an overlay over a video being played.
At the moment the buttons get displayed over the video, but instead of having a transparent background the background is white. It looks like this:
Buttons over video
I'm setting the background for the button with an xml file in the drawable folder, so I can set different images for the different states. Therefore I can't just set android:background="color/transparent" because my line is android:background="#drawable/custom_button". Where I am setting the images like this: item android:drawable="#drawable/left_default_small".
Is there a line that can fix this or do I have to change a styles file or something?
btw I'm using API 21 so that's why the shadow is default, but I don't know how to fix it other than changing the API
Try to use ImageButton
<ImageButton android:id="#+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/media_skip_backward"
android:background="#null"></ImageButton>
OR
android:background="#android:color/transparent"
If you want to create a StateListDrawable like this one in res/drawable directory.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/my_bluish_color" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
This way the default background is transparent. When pressed the background has the color you specified (instead of color you can use any drawable here).
use this for global backgroud store this in your res/drawable and call this drawable for transperent image
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="100dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#00000000"
android:startColor="#00000000"
android:endColor="#00000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="100dp"
/>
<stroke
android:width="1dp"
android:color="#99000000"
/>
</shape>
or simply use
android:background="#00000000"
I want to add a shadow and have rounded edges on my button, like box-shadow and border radius in CSS how can I do this in XML?
XML code:
<Button android:id="#+id/dummy_button"
style="?metaButtonBarButtonStyle"
android:layout_width="198dp"
android:layout_height="69dp"
android:layout_weight="1"
android:text="#string/dummy_button"
android:fontFamily="trebuchet ms"
android:clickable="true"
android:onClick="printStarter"
android:background="#8c96ff"
android:layout_gravity="center_horizontal|bottom" />
The Android Developer's Guide has a detailed guide on this: Shape Drawbables.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#1a1a1a" />
button with shadow
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shadow"/>
<item
android:drawable="#drawable/button"
android:bottom="4px" />
</layer-list>
</shape>
Refer this tutorial
You can use XML, here are some links:
How to provide shadow to Button ;
http://zrgiu.com/blog/2011/01/making-your-android-app-look-better/ . OR
You can use a 9patch image: http://developer.android.com/tools/help/draw9patch.html
I want to use a set of 2 image layers as a background in my Layout XML.
I am guessing I can do it :
Using code, may be by extending the ImageView/Canvas/Drawable, which is I am trying avoiding.
Using Layout XML, with 2 nested Layouts with each layer image as a background. OR a FrameLayout with 2 ImageViews in it.
But, I was wondering if there is another way to define a drawable using XML (just like I define an Animation Set using XML).
Something like this :
mylayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/2_image_layer_drawable" >
2_image_layer_drawable.xml [imaginary]
<Set>
<drawable src="#image_layer_back"/>
<drawable src="#image_layer_front"/>
</Set>
Is there any?
Use a layer-list with two Bitmap(with those images) drawables as children.
Example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap android:src="#drawable/ic_launcher" />
</item>
<item>
<bitmap android:src="#drawable/ic_launcher" />
</item>
</layer-list>
Are you talking about this:
Save the below code with .xml file:
<?xml version = "1.0" encoding = "utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#image_layer_back" />
<item android:state_focused="true" android:drawable="#image_layer_back" />
<item android:state_selected="true" android:drawable="#image_layer_back" />
<item android:drawable="#image_layer_front" />
</selector>