I know how to make Material Design button with color fill:
style="#style/Widget.AppCompat.Button.Colored"
And no-bordered transparent button:
style="#style/Widget.AppCompat.Button.Borderless.Colored"
However, is there a way to make Material design bordered (transparent inside) button? Something like below?
You can also use the Material Components for Android.
Add the dependency to your build.gradle:
dependencies { implementation 'com.google.android.material:material:1.3.0' }
In this case you can use the MaterialButton in your layout file:
<com.google.android.material.button.MaterialButton
....
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:cornerRadius=".."
app:strokeColor="#color/colorPrimary"/>
Apply the style #style/Widget.MaterialComponents.Button.OutlinedButton.
In your case use the app:cornerRadius attribute to change the size of corner radius. This will round off the corners with specified dimensions.
Use te attribute app:strokeColor and app:strokeWidth to change the color and the width of the border.
You can also customize the corners using ShapeApperance (it requires version 1.1.0)
<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="shapeAppearanceOverlay">#style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance" parent="">
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerFamilyBottomLeft">rounded</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSize">8dp</item>
</style>
The official doc is here and all the android specs here.
With jetpack compose you can use the OutlinedButton and the border attribute:
OutlinedButton(
onClick = { },
border = BorderStroke(1.dp, Color.Blue),
shape = RoundedCornerShape(8.dp)
) {
Text(text = "Save")
}
OLD (support library)
With the new Support Library 28.0.0, the Design Library now contains the Material Button.
You can add this button to our layout file with:
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="XXXX"
android:textSize="18sp"
app:icon="#drawable/ic_android_white_24dp" />
You can customize the button with these attributes:
app:backgroundTint: Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background.
app:strokeColor: The color to be used for the button stroke
app:strokeWidth: The width to be used for the button stroke
Also
Here's how to do it correctly.
What you need to do is
1 - Create shape drawable with stroke
2 - Create ripple drawable
3 - Create selector drawable for less than v21
4 - Create a new style for button with border
5 - Apply style on button
1 - Create shape with stroke
btn_outline.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/colorAccent">
</stroke>
<solid android:color="#color/colorTransparent"/>
<corners
android:radius="5dp">
</corners>
</shape>
2 - Create ripple drawable
drawable-v21/bg_btn_outline.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorOverlay">
<item>
<shape>
<stroke
android:width="2dp"
android:color="#color/colorAccent"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item android:id="#android:id/mask">
<shape>
<stroke
android:width="2dp"
android:color="#color/colorAccent"/>
<solid android:color="#android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</ripple>
android:id="#android:id/mask" is required to have ripple touch feedback on the button. The layer that is marked as mask is not visible on screen, its just for touch feedback.
3 - Create selector drawable for less than v21
drawable/bg_btn_outline.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_outline" android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorOverlay"/>
</shape>
</item>
<item android:drawable="#drawable/btn_outline" android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorOverlay"/>
</shape>
</item>
<item android:drawable="#drawable/btn_outline"/>
</selector>
4 - Create a new style for button with border
All resources that that are needed to create the style are given above, that's how your style should look like
<style name="ButtonBorder" parent="Widget.AppCompat.Button.Colored"/>
<style name="ButtonBorder.Accent">
<item name="android:background">#drawable/bg_btn_outline</item>
<item name="android:textColor">#color/colorAccent</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">16sp</item>
<item name="android:singleLine">true</item>
</style>
4 - Apply style on button
<Button
style="#style/ButtonBorder.Accent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
That's pretty much it. Here's a sample of how the buttons looks now.
You could do this pretty easily by setting Material Design Button's style attribute to #style/Widget.MaterialComponents.Button.OutlinedButton and setting app:strokeColor attribute value to your preferred color.
example:
<com.google.android.material.button.MaterialButton
android:text="Rounded outlined button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/btnRound"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#color/colorPrimaryDark"/>
References:
https://material.io/develop/android/docs/getting-started/
https://material.io/develop/android/components/material-button/
Credits to #NomanRafique for the detailed answer! However, because of the custom background, we've lost a few important things:
Button's height is bigger than the default Widget.AppCompat.Button
Paddings
Enable/Disable states
In case you're wondering, here is how the default background looks like: https://android.googlesource.com/platform/frameworks/support/+/a7487e7/v7/appcompat/res/drawable-v21/abc_btn_colored_material.xml
By reusing original insets, paddings and color selectors, in a simple case we can come up with something like this (all the values are default and come from android support/material library) :
drawable-v21/bg_btn_outlined.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item>
<shape>
<stroke
android:width="2dp"
android:color="#color/abc_btn_colored_borderless_text_material"/>
<corners android:radius="#dimen/abc_control_corner_material"/>
<padding
android:bottom="#dimen/abc_button_padding_vertical_material"
android:left="#dimen/abc_button_padding_horizontal_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"/>
</shape>
</item>
<item android:id="#android:id/mask">
<shape>
<stroke
android:width="2dp"
android:color="#color/abc_btn_colored_borderless_text_material"/>
<solid android:color="#android:color/white"/>
<corners android:radius="#dimen/abc_control_corner_material"/>
</shape>
</item>
</ripple>
</inset>
styles.xml
<style name="Button.Outlined" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="android:background">#drawable/bg_btn_outlined</item>
</style>
At this point, we should have an outlined button that responds to touches, respects the enabled="false" state and of the same height as the default Widget.AppCompat.Button:
Now, from here you can start customizing colors by providing your own implementation of the #color/abc_btn_colored_borderless_text_material color selector.
In your XML use this,
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Its a button"
android:textColor="#android:color/white"
android:textSize="#dimen/_12ssp"
app:backgroundTint="#android:color/transparent"
app:strokeColor="#android:color/white"
app:strokeWidth="#dimen/_1sdp" />
where
app:backgroundTint is used for background color
app:strokeColor is border color
app:strokeWidth is border width
This is how I do buttons only with a border and the ripple effect on Lollipop and above. Just like the AppCompat buttons, these have a fallback pressed effect on lower APIs (if you need ripples on lower APIs, you need to use an external library). I use FrameLayout because it's cheap. The color of the text and the border is black, but you can change it with a custom one:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:background="#drawable/background_button_ghost">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:gravity="center"
android:padding="14dp"
android:textSize="16sp"
android:textAllCaps="true"
android:textStyle="bold"
android:textColor="#android:color/black"
android:text="Text"/>
</FrameLayout>
drawable/background_button_ghost.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#android:color/black"/>
<solid android:color="#color/transparent"/>
</shape>
If I have missed something, please leave a comment and I will update the answer.
You can do this with Jetpack Compose too. To do it, just create a composable function with a OutlinedButton and pass the as parameter the border you want:
#Composable
fun OutlineButton() {
OutlinedButton(
onClick = { //TODO - implement click here },
border = BorderStroke(1.dp, Color.Blue), // <-- border property
shape = RoundedCornerShape(corner = CornerSize(20.dp)),
colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Blue)
){
Text(text = "CONFIRM")
}
}
Just use MaterialButton with an outline style.
<com.google.android.material.button.MaterialButton
...
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="Delete Mentor Manager"
app:strokeColor="#color/...."
app:strokeWidth="1dp" />
Simply you can use this code. Its looks soo Good.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical">
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#F48025"
android:text="login"
android:textColor="#color/colorWhite" />
</LinearLayout>
Here border color is:
android:background="#ffffff"
And background color is:
android:backgroundTint="#F48025"
<Button
android:id="#+id/btn_add_discussion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="15dp"
android:padding="8dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:backgroundTint="#80ffffff"
android:textColor="#color/colorPrimaryDark"
style="#style/btn_start_new_discussion"
android:text="Start new discussion" />
Put below code in Styles.xml file :
<style name="btn_start_new_discussion">
<item name="android:layout_marginTop">15dp</item>
<item name="strokeWidth">2dp</item>
<item name="strokeColor">#color/colorPrimary</item>
<item name="cornerRadius">10dp</item>
</style>
Related
I'm trying to create an outlined Material Components button, however I need it to have a semi-transparent background in addition to the stroke.
This is my XML code so far:
<android.support.design.button.MaterialButton
android:id="#+id/foo"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:backgroundTint="#CFFF"
app:strokeColor="#color/colorAccent"
app:strokeWidth="2dp" />
And this is what this looks like:
The issue is that some of the background is visible outside the stroke around the button (the larger the stroke width, the more white pixels getting out).
For example, here's a 5dp stroke:
Is there a way to fix this, a better way to set the background color, or anything?
Just use the Widget.MaterialComponents.Button.OutlinedButton style:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeWidth="2dp"
app:strokeColor="#color/colorAccent"
app:backgroundTint="#3ad64f"
.../>
If you create a style of that you have to remove the app: In my example this style is called SecondButton
<style name="SecondButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:theme">#style/SecondButtonTheme</item>
<item name="backgroundTint">#color/second_button_back</item>
<item name="strokeColor">#color/second_button_text</item>
<item name="strokeWidth">1dp</item>
<item name="android:textColor">#color/second_button_text</item>
</style>
Use it like that in you
<com.google.android.material.button.MaterialButton
style="#style/SecondButton"
.../>
You could try to create your button in drawables directly in xlm based on this :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="backgroundcolor"/>
<stroke android:color="strokecolor" android:width="2dp" />
<!--corners allow us to make the rounded corners button-->
<corners android:radius="15dp" />
</shape>
</item>
</selector>
founded here : https://android--code.blogspot.fr/2015/01/android-rounded-corners-button.html
and use it like this in your layout :
android:background="#drawable/nameofbutton.xml"
I want to add a white stroke to black text inside a button. I can figure out to do this with regular textview but not when it comes to a button.
Thi is regarding Xml android studio btw.
activity_main.xml:
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:background="#drawable/login_button_style"
android:text="Log Ind"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/editTextPass"
android:layout_alignEnd="#+id/editTextPass"
android:clickable="true" /><![CDATA[
/>
login_button_style.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#d7d7d7"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
<stroke android:color="#d10f0f" android:width="3dp" />
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="shadoweffect">
<item name="android:paddingLeft">4px</item>
<item name="android:paddingBottom">4px</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">25sp</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">0</item>
<item name="android:shadowRadius">3</item>
</style>
</resources>
can someone please enlighten me?
Look at this answer to a similar question on how to make a border. He creates a new file that is a shape of just that color then stores it as a drawable to be used as the background image
https://stackoverflow.com/questions/7690416/android-border-for-button
Just change the color to white and there you go
EDIT:
Actually seeing now. You want the letters to be outlined in white.
So my best guess would be to draw the entire image with the text and border up in Photoshop/Sketch. And then save that as a drawable. To set for your buttons background. Make sure to set the buttons text to just quotes since you will already have the text in the Photoshop mockup
android:text = ""
I have come across this weird issue in which the EditText fields change color to Red in the start of an Activity like they change incase there is a SetError. Also, this does not happen everytime, only in some cases it appears. How do I fix this bug? Any help is appreciated.
Please refer image for more.
here is the code
<android.support.design.widget.TextInputLayout
android:id="#+id/input_name"
style="#style/my_style_textInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<EditText
android:id="#+id/edt_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name:"
android:inputType="textPersonName"
android:singleLine="true"
android:textSize="#dimen/subHeading" />
</android.support.design.widget.TextInputLayout>
Here is the style:
<style name="my_style_textInput" parent="#style/TextAppearance.AppCompat">
//hint color And Label Color in False State
<!--<item name="android:textColorHint">#color/item_color</item>-->
<!--<item name="android:textColor">#color/colorPrimary</item>-->
<item name="android:textSize">#dimen/caption</item>
//Label color in True State And Bar Color False And True State
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorControlNormal">#color/colorPrimary</item>
<item name="colorControlActivated">#color/colorPrimaryAccent</item>
</style>
Please note, none of colorPrimary, colorAccent and item_color are red.Thank You.
You can use this code to customize the color.
Apply android:background="#drawable/edittext_bg" on your layout
<EditText
android:la`enter code here`yout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/login_username"
android:hint="#string/username_hint"
/>
After under drawable and create the file edittext_bg.xml and put this code inside.
<layer-list>
<item>
<shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke android:color="#ff1e0c" android:width="2dp"/>
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#fffbce"/>
</shape>
</item>
Hope it helps you.
Can I change the line color on EditText. When is active it has some greenish color.
Is it possible to change only the color of line when is active, and how can I do this...?
You need to set background source for an edit text.
Generate it http://android-holo-colors.com/
Than you can apply generated drawable as background like android:background="#drawable/my_theme_edit_text" for the custom EditText. Or you can set that background in your app theme - you will find example in .zip file from that site
add to your themes.xml this line:
<item name="colorAccent">#color/black</item>
this sets the default color for colorControlActivated which is used to tint widgets
Here you are:
editText.getBackground().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
You can set background of edittext to a rectangle with minus padding on left, right and top to achieve this.
Here is the xml example for setting different line colors for focused and not focused edittext, just set it as background of edittext.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-2dp"
android:left="-2dp"
android:right="-2dp"
android:bottom="2dp">
<selector >
<item android:state_enabled="true"
android:state_focused="true">
<shape
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#6A9A3A"/>
</shape>
</item>
<item android:state_enabled="true">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
</item>
</selector>
</item>
</layer-list>
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="#drawable/text"
android:ems="10"
android:textColorHint="#fefefe"
android:hint="#string/text1"
android:textColor="#fefefe"
android:inputType="textEmailAddress"
android:layout_marginTop="10dp"
/>
Use the below code in your res/drawable/text.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="24.0dp">
<shape >
<solid android:color="#fefefe" />
</shape>
</item>
</layer-list>
you can set android:backgroundTint="#color/blue" to change the color of the Edittext bottom line
I had the same problem
solved it by changing the color of the backgroundTint as follows -
android:backgroundTint="#color/light_color"
You can use the android:background = "#color/black" for the api 21 or above 21 (This will apply for lollypop device or above versions) and for below versions you should use the style to the edittext.
If your using TextInputLayouts for EditText, we should change the following properties.
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/your color</item>
<item name="colorControlHighlight">#color/your color</item>
By default colour is colorAccent.
I would like to remove the padding around text in Button view.
The first screenshot is the result I would achieve, and the second one is the state of the art.
Of course, I have defined a custom drawable to get the button appearance. But even if I set the padding attribute to 0dp the result does not change.
Any suggestion, please?
EDIT
Here is the xml code of the button
<Button
android:id="#+id/btnCancel"
style="#style/dark_header_button"
android:layout_width="wrap_content"
android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:padding="0dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#android:string/cancel" />
Here is the style xml file:
<style name="dark_header_button">
<item name="android:background">#drawable/bkg_dark_header_button</item>
<item name="android:shadowDy">-1</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowRadius">1</item>
<item name="android:textSize">14sp</item>
<item name="android:textColor">#ffffff</item>
</style>
and here is the drawable xml file:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<corners android:radius="10dp" />
<gradient
android:angle="90"
android:endColor="#060606"
android:startColor="#707070"
android:type="linear" />
</shape>
</item>
<item>
<shape>
<corners android:radius="10dp" />
<gradient
android:angle="90"
android:endColor="#707070"
android:startColor="#060606"
android:type="linear" />
<stroke
android:width="0.5dp"
android:color="#2b2b2b" />
</shape>
</item>
</selector>
Its not actually padding but the theme is setting a minHeight and minWidth for button widgets. You can completely remove this effect without changing your theme by setting the following on your button in the xml:
android:minHeight="0dp"
android:minWidth="0dp"
It thus also implies that you can play around with different settings for different effects, 0dp is merely an example to completely remove this effect.
you can try using android:includeFontPadding. set it to false. also set the padding to 0.
Button text doesn't need padding, it is by default in center of the button.
I think you are using the android:theme="#android:style/Theme.Black.NoTitleBar" in the manifest file, please remove it and use native app Theme and try it.