Ok so my buttons are not showing gradient as they should be (the gradient is not showing, its just a normal color background), idk why this is happening, everything looks like how it should be to me, can someone please take a look :
activity_main.xml
...
<Button
android:id="#+id/button1"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:background="#drawable/button"
app:icon="#drawable/ic_baseline_room_service_24"
android:fontFamily="monospace"
android:padding="15dp"
android:paddingEnd="40dp"
android:text="BROWSE BY INGREDIENTS"
android:textColor="#FFFFFF"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.084"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/viewPager"
app:layout_constraintVertical_bias="0.396" />
...
Here's a photo of the button as seen in the layout :
button (gradient not working)
button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#1746D3"
android:endColor="#6D34CF"/>
<corners
android:bottomRightRadius="900dp"
android:radius="90dp"/>
</shape>
</item>
</selector>
Here's a photo of the gradient background : gradient
However, the android:background="..." does show the mini preview at the side : button_preview
Any help is appriciated!
Replace in Button with androidx.appcompat.widget.AppCompatButton in activity_main.xml
It seems that using Button it is not possible to have the complete personalization of the widget.
Button widget handles its own background and you can only use tinting to change its color. This is an open issue and hasn't been fixed yet.
Related
I am trying to input an image in a regular button, however it does not show up. My code looks like this
<Button
android:text="#string/buttonexit"
android:layout_width="300dp"
android:layout_height="50dp"
android:id="#+id/buttonexit"
android:layout_marginLeft="50dp"
android:background="#drawable/wood"/>
I also hoped and included src instead of background, however it still did not work.
<Button
android:text="#string/buttonexit"
android:layout_width="300dp"
android:layout_height="50dp"
android:id="#+id/buttonexit"
android:layout_marginLeft="50dp"
android:src="#drawable/wood"/>
Lastly I also tried to make an image button, however once I added an image I cannot adjust the corners anymore.
You can use AppCompatButton instead of Button.
For a Button, the primary color defined in the app theme overrides any custom background that you want to apply to a Button, but it is not the case for the AppCompatButton.
For example:
<androidx.appcompat.widget.AppCompatButton
android:text="test"
android:layout_width="300dp"
android:layout_height="50dp"
android:id="#+id/buttonexit"
android:layout_marginLeft="50dp"
android:background="#drawable/bg"/>
Besides, you can also use ImageButton to achieve this function.
You can add an image by property android:src and adjust the corners with property android:background by creating a shape xml file.
You can refer to the following code:
1.create file button_shape.xml in folder drawable:
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android = "http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--background color-->
<solid android:color="#20a4e5"/>
<!--radius-->
<corners android:radius="10dip"/>
<!--Sets the width and color of the border line-->
<stroke android:width="2dp" android:color="#fffff0" />
</shape>
2.set it for android:background of ImageButton
<ImageButton
android:text="test"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginLeft="50dp"
android:background="#drawable/button_shape"
android:src="#drawable/grass"/>
I want to make a perfect square shaped button and the shape looks like this:
Here, xml is :
<Button
android:id="#+id/button3"
android:layout_width="#dimen/box_size"
android:layout_height="#dimen/box_size"
android:layout_weight="50"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.598"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.146" />
I want to delete the blank between the line and blue square and don't know how to.
I tried to make an Image button and it also gave me unwanted result.
One way to solve this (Which I use), is to create a "Layout Resource File" and set it as the background for your button.
You could do this for example: create a "custom_background.xml" file (or any name you like), and write in it:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
Then add in the button code:
android:background="#drawable/button_background"
In my Android Studio application, I have a button for which I set a drawable as the background. The drawable rounds the corners and changes the color of the button.
However, when I look at the resulting design of the activity, the color I want doesn't show up. Instead, the button assumes colorPrimary (orange, #ED3616). The same occurs when I run the application.
Note: the other attributes of the drawable file translate perfectly to the button (i.e. the rounded corners). The problem is only with the color.
I have tried using a MaterialButton, and setting the color with android:backgroundTint. Then, the color does show up as I want to, but the design looks odd (there is a different colored rectangle inside of the button(Picture of MaterialButton if you'd like to see it)
How can I make the regular button have the color I desire?
Button:
<Button
android:background="#drawable/round2"
android:id="#+id/signIn"
android:layout_width="256dp"
android:layout_height="66dp"
android:text="#string/logIn"
android:textColor="#FFFFFF"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.878" />
Drawable: round2.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#B30C44"
android:paddingLeft="6dp"
android:paddingTop="6dp" />
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<padding
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp" />
</shape>
What shows up:
What the Button looks like
It happens because the default style of the MaterialButton (the Button is replaced with a MaterialButton automatically if your are using a MaterialComponents theme) tints the background with the colorPrimary.
You have to use:
<Button
android:background="#drawable/round2"
app:backgroundTint="#null"
... />
I just updated my android Studio and every time that I try to change the background color of AppCompatButton the layout gets flat and looses the ripple effect, it wasn't like that.
And normal :
In my old project, works fine too!
<androidx.appcompat.widget.AppCompatButton
android:clickable="true"
android:onClick="Login"
android:layout_marginEnd="50dp"
android:layout_marginTop="17dp"
android:textColor="#color/primaryDarkColor"
android:layout_marginStart="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:text="Logar"
android:focusable="true" />
A good way to change your buttons background and keep the ripple effect is to create a separate drawable for them.
So you would create a default_button_background.xml with some pre-defined colors
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/button_ripple_color">
<item>
<shape android:shape="rectangle">
<corners android:radius="#dimen/button_corner_radius" />
<solid android:color="#color/buttonBackground" />
</shape>
</item>
</ripple>
Then you can assign this drawable to your button background like:
<androidx.appcompat.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/default_button_background"/>
I am looking for a way to style my button like an example from an older question (How to create standard Borderless buttons (like in the design guidline mentioned)?) but some things were left out from the answer.
How can I add more than one value to an XML element, particularly android:background ="";?
I figured out how to make my buttons borderless, but I want them to have a really thin border, and a different background color. I have seen lots of tips online, but I can't find a way to put all my items together properly in code. Below is a copy pasted image with the top part representing the layout I want to achieve with the button name and a thumbnail image on the right hand side on the button with the button being a different color then the background of the app, and below that is a copy pasted image of the border style I'm trying to achieve, thin, touching borders between buttons. I have looked everywhere and tried many ideas but none seem to work properly, or some require me to have
android:background="?android:attr/selectableItemBackground"
but this interacts with
android:background="#22272D"
I need to keep the text in the button because my app is going to translate the buttons text to the language of the users phone, so I can't make the whole button just an image. Below is my XML and the output, any recommendations to how I should change it would be of massive help!
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="6"
tools:context="com.aid.travelers.myapplication.Transportation">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/transportation_page"
android:textSize="40sp"
android:textColor="#000000"/>
<Button
android:layout_width="match_parent"
android:text="#string/airport"
android:id="#+id/AirportButton"
android:layout_height="60dp"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="?android:attr/selectableItemBackground"/>
<Button
android:layout_width="match_parent"
android:text="#string/bicycle"
android:id="#+id/BicycleButton"
android:layout_height="60dp"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="?android:attr/selectableItemBackground"/>
I'm not sure that I get your question, but I guess you want to custom the background of your button, and have a touch effect when you press it.
Have a look at this answer :
https://stackoverflow.com/a/7176006/5446285
You should create your own resource file background.xml (for example) that you create in your drawable folder.
The code should be like :
<?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/background_selected"/> <!-- pressed -->
<item android:drawable="#drawable/background_unselected" /> <!-- default -->
</selector>
You should now create 2 other files in your drawable folder : background_selected.xml, and background_unselected.xml.
To do so, I advise you something like this if you want a thin border :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#7c7c7c" />
</shape>
</item>
<item android:bottom="2dp" android:top="2dp" android:right="2dp" android:left="2dp">
<shape android:shape="rectangle" >
<solid android:color="#a0a0a0" />
</shape>
</item>
Then you set the background of your button in your xml :
android:background="#drawable/background"