I'm working on a project in android studio and I'm trying to change the border to my button.
My default button when I just add it to my grid look like this:
After adding new XML file (called box_solid_border.XML) in the drawable file that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="4dp"
android:color="#000000" />
</shape>
the result is that it's creating the next shape that I can see:
and that exactly what I want to add to my button.
when I come back to my XML at the main file and add to my button the next line:
as you can see in line 226 I'm adding the background that I just created for this button to the button. and near the line, there is the exact border that I want.
but in the application, the button still stays the same as the default one with no border added to him.
Like this:
Does someone know the reason that the drawable file doesn't affect the button?
If I'm doing the same thing for a textView or something else its works perfectly fine, just the button looks like not affected by the drawable extension to him.
Thank you!
You need to add this attribute to your button:
app:backgroundTint="#null"
If it has both attributes android:background and app:backgroundTint(if you are using the default theme for your application, it has a default value), the color specified by app:backgroundTint will be cover on the shape of drawable.
For border to button try to edit box_solid_border.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#color/black"
android:width="5dp"/>
<corners
android:radius="8dp"/>
<solid
android:color="#color/colorAccent"/>
</shape>
In layout xml file
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/box_solid_border"
android:text="Button"
android:textColor="#fff"
android:textSize="30sp" />
Related
I have a simple button
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/add"
android:backgroundTint="#color/add_bg"
android:textColor="#color/add_fg"
<!--android:borderColor?="#color/button_border"-->
android:text="#string/add"/>
I would like to have white background, blue text and blue border around. I am aware that I can achieve that through a drawable as shown here and in numerous other places. However I have observed that if you add a drawable to the button then it will lose all of its material properties (such as shadow and also upon clicking having the fancy ripple animation). So how would I add a border around the button without losing the material theme animations (shadow and tipple animation on click)?
Most of the items that android comes with are simply a pre-packaged set of attributes.
It would be almost impossible to expect the Android API developers to include a pre-packaged set of attributes for every possible color/border combination, but there is always a solution!
Unfortunately,as you mentioned, the solution does reside in creating your own custom XML file which can often be intimidating until you get the hang of it. Once you do, you too will marvel at the flexibility it allows.
Specifically for your situation, there are two options...
1) Create a custom XML border drawable.
2)under your buttons background property set your new custom border drawable
3)then also set the ripple effect under your buttons xml properties by adding:
android:foreground="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
----OR----
A more complex way is to make a drawable like the one below. This will add the "ripple" button effect as well as a custom shadow, button color, and border color!
"For anybody reading this later that may be less experienced)
1)In your project view go to res/drawable
2)right click the folder itself and select new/drawable resource file
3)Enter a file name my_ripple_button.xml(the root doesn't really matter because you wil replace it with the below code)
4)Click on the text tab 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)
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimaryDark">
<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>
I am doing such type of project, in my project, i want to change the color of only a portion of my picture, for example when I click on a button I want the blue become green, i want to know if there is any way to do that or it's impossible
To achieve the above feature, you could define a shape and place it above the button and then change the color onClick. A simple example is:
shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp"
android:bottomRightRadius="4dp"
android:bottomLeftRadius="4dp">
</corners>
<solid
android:color="#4848ea">
</solid>
</shape>
Now change the color of the shape using the following code.
GradientDrawable Shape = (GradientDrawable)shape.getBackground();
Shape.setColor(Color.GREEN);
Place the above code within the button onClick.
I am trying make a simple music player. When I try to use the android's default seek bar in my music playback controls section, there is a default padding at the top and bottom of the seekbar. The effect I am trying to achieve is similar to the seekbar used in shuttle music player.
But this the effect I'm getting. I would be grateful if any would tell me how to achieve the desired result.I'm using linear layout as the root container.
Because the option of specifying
android:background="#color/your_colour"
will not work because you have two colors there one for the Top and one for the Bottom.
The working solution is by using a layerlist as follows:
Go to your drawable folder create a file call it lets say
back_ground_seek_bar.xml and add the following code inside it:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#colour/your_top_color" />
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#color/your_bottom_color" />
</shape>
</item>
</layer-list>
Replace the colours with your own colors when you paste this.
Remember we have added top and height of as 10.But because we want our SeekBar to have colour then we have to set the height of seekbar to twice the value so It should be twice and thats 20dp. So we should add our new height of the seekbar to be 20dp as well set the background as the xml we have defined as follows. Go to your SeekBar and paste this:
android:layout_height="20dp"
android:background="#drawable/back_ground_seek_bar"
For customization you can also change the values of height and whatsoever in the drawable/back_ground_seek_bar.xml but it should always be twice. The given height set in SeekBaraim is to divide it equally.
Please give me code to design edit text box, button with round corners, etc. Which is shown in the image.
you can use xml drawable and use it as background
first go to drawable directory and create new Drawable Resource file and name it MyRoundButton then copy all this code into it
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#ff66cc"
android:width="2dp"/>
<corners
android:radius="10dp"/>
</shape>
then add this to your Button background
android:background="#drawable/MyRoundButton"
now you can change the corner radius by changing
android:radius="someValue"
and border color by
android:color="#someColor"
I want to create a customize button that have the shape of a round image I have created with CS6.
To customize a button first it is needed to define a drawable element.
If I want to use 2 diferent images depending on the state of the button, I can define an .xml (customize_button.xml) like follow:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="#drawable/btn1" />
<item android:drawable="#drawable/btn2" />
</selector>
Where btn1 and btn2 will be 2 .png images placed in the drawable folder.
If I want to make a button with an oval shape, the xml file I should write would be something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:startColor="#6586F0"
android:centerColor="#D6D6D6"
android:endColor="#4B6CD6"
android:angle="90"/>
</shape>
Finally, if I would like to add this customized button to my applications I just would need to add in the layout:
<Button
android:id="#+id/BtnPrueba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customize_button"
/>
My problem:
By default a button will be squared, so if I want to add a image in the background that is oval, there will be a white gap around it. Do anyone knows how could I combine both .xml files in one?
The problem is that the background of your image is white so what you need to do is
Solution:
You could use photoShop and
Use the lasso to cut of the background so it will be transparent