Android borderless buttons - android

I hate to be the third person to ask this, but the previous two askings haven't seemed to answer it fully. The android design guidelines detail borderless buttons, but not how to make them. In one of the previous answers, there was a sugestion to use:
style="#android:style/Widget.Holo.Button.Borderless"
This works well for a Holo theme, but I use a lot of Holo.Light as well and
style="#android:style/Widget.Holo.Light.Button.Borderless"
Does not seem to exist. Is there a way to apply a style for such borderless buttons in Holo.Light, or better yet, simply apply a borderless tag without specifying which theme it belongs in, so the app can pick the proper style at runtime?
Holo.ButtonBar seems to fit the bill for what I am looking for, except it provides no user feedback that it's been pressed.
Also, is there a place in the documentation that lists such styles that can be applied and a description of them? No matter how much I google, and search through the docs, I can't find anything. There is just a non-descriptive list if I right click and edit style.
Any help would be appreciated.
Edit: Got a perfect answer from javram, and I wanted to add some XML for anyone interested in adding the partial borders google has adopted.
Fora horizontal divider, this works great
<View
android:id="#+id/horizontal_divider_login"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#color/holo_blue" />
and this for a vertical one:
<View
android:id="#+id/vertical_divider"
android:layout_width="1dip"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#color/holo_blue" />

Simply add the following style attribute in your Button tag:
style="?android:attr/borderlessButtonStyle"
source: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

Check out my answer here. In a nutshell the correct solution is to use the following:
android:background="?android:attr/selectableItemBackground"

At the risk of beating a dead horse, here's another (possibly better) option. AppCompat v7 defines a borderless button style. If you're already making use of the AppCompat library, just go with that:
<Button android:text="#string/borderlessButtonText" style="#style/Widget.AppCompat.Button.Borderless" />

This code will remove all background for a button:
android:background="#android:color/transparent"

Just incase anybody is looking for light-weight solution to get the borderless button for the API's that do not support the Holo theme (like I did for a long time), Im posting my solution below:
<View
android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#505154"
android:layout_marginLeft="10dp" android:layout_marginRight="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_Reply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#android:color/transparent"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:text="#string/btnReplyText"/>
<View
android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="#505154"
android:layout_marginBottom="7dp" android:layout_marginTop="7dp"/>
<Button
android:id="#+id/btn_Delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:background="#android:color/transparent"
android:text="#string/btnDeleteText" />
<View
android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="#505154"
android:text="#string/btnReplyText"
android:layout_marginBottom="7dp" android:layout_marginTop="7dp" />
<Button
android:id="#+id/btn_Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:text="#string/btnExitText"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:background="#android:color/transparent"/>
</LinearLayout>
All you have to do is change the colours and text to suit your own background. All the best!

Related

How to get an icon to show up next to text in Android Material Buttons?

I'm trying to use the Material Button as developed by google. Due to a third party dependency I cannot use the androidx repository, so I'm currently using the android support library (v28.0.0-alpha1, alpha3 did not allow me to use the material button)
I'm trying to achieve this a wide button with centered text + icon next to text:
But all I can get is this, centered text with icon on the edge of the button:
This is the same as the original android button, which suffered from the same problem. The idea was that the Material Button would solve this issue, but it doesn't seem to work for me on 28.0.0-alpha1
There are solutions involving making a textview with compounddrawables and drawing a frame around it, but I'd like to stick to the material button if possible.
Anyone got a clue on how to fix this?
I'm having this issue too.
Did a bit of digging around, and found this.
There's an attribute called app:iconGravity which has two options namely start and textStart which doesn't seem to work for me, but maybe try it - that is from the GitHub repo for the Material Button.
<com.google.android.material.button.MaterialButton
android:id="#+id/material_icon_button"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/icon_button_label_enabled"
app:icon="#drawable/icon_24px"
app:iconGravity="textStart"/>
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButton.java
(search for definition of iconGravity, it's in the beginning of the class)
Anyone got a clue on how to fix this?
Button widget is extended from TextView. So you can use ImageSpan in your case.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.AppCompat.Button.Colored"
/>
Button button = findViewById(R.id.button);
SpannableString ss = new SpannableString(" CART".toUpperCase(Locale.US));
Drawable d = VectorDrawableCompat.create(getResources(), R.drawable.ic_shopping_cart_white_24dp, getTheme());
d.setBounds(0, 0, (int) button.getTextSize(), (int) button.getTextSize()); //to make it square
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
button.setTransformationMethod(null);
button.setText(ss);
Result :
you can do customization also:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:src="#android:drawable/ic_media_play" />
<TextView
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:lines="1"
android:maxLines="1"
android:layout_toRightOf="#id/icon"
android:layout_toEndOf="#id/icon"
android:text="search"
android:textColor="#color/white"
android:textSize="16sp" />
</RelativeLayout>
Maybe not the best solution but you can add padding on the left and right side of the button. If you add the same value to both sides it will center see example images:
Images
Button
Button padding
Code
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:drawableStart="#drawable/account"
android:paddingLeft="120dp"
android:paddingRight="120dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="266dp" />
Hope it helps
<RelativeLayout
android:id="#+id/callButton"
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="18dp"
android:layout_marginRight="18dp"
android:background="#color/colorPrimaryDark">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_call"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginTop="3dp"
android:text="#string/callCentralDesk"
android:textColor="#android:color/white" />
</RelativeLayout>
Had this issue myself too.
Using Google's Material Components library, I'm currently on using androidX dependencies but from the documentation it appears you may be able to pull of the same with the support library version as well.
At first I played around with the app namespace attribute of app:iconPadding adding a negative dp amount and it appears to pull the text to the drawable and then adding a positive value of the absolute value of the icon padding (app:iconPadding=-72dp with android:paddingStart=72 this all seemed a little hacky to me so I stuck with simply adjusting paddingStart and paddingEnd until the desired result appeared.
End Result
<!--Padding Start and End Method-->
<!--This is inside a constraint layout with width being match_constraints-->
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonFoo"
style="#style/Widget.MaterialComponents.Button.IconButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:icon="#drawable/ic_my_button_icon"
android:text="#string/my_button_text"
android:paddingStart="72dp"
android:paddingEnd="72dp"/>
I'm not exactly sure that the Button.IconButton style does very much but set padding start to a system hard coded val of 12dp. But this overrides that value anyways so oh well. Your mileage may vary, but hope this helps!

Material Design Button without Shadow

I recently started android development and I am struggling a bit.
I read different articles and tutorials on creating drawables etc.
Current Situation
I have created the following buttons:
Using the following code:
<android.support.v7.widget.AppCompatButton
android:id="#+id/login_btn_facebook"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:drawableStart="#drawable/ic_btn_login_facebook"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Continue with Facebook"
android:textColor="#fff"
app:backgroundTint="#3b5998"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/login_btn_google"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:drawableStart="#drawable/ic_btn_login_google"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Continue with Google"
app:backgroundTint="#ffffff" />
Now I actually just need a minor change:
I do not want to have the elevation. I want the buttons to be "flat", and only show the shadow effect when clicked.
Is there a simple way to do this?
Thank you already!
UPDATE:
I need to target API Level 19 as a minimum SDK version.
You have two alternatives to do that:
By adding an XML attribute to your XML Button:
Try this: android:stateListAnimator="#null"
By adding another XML attribute, if the previous alternative has not worked:
Add this style="?android:attr/borderlessButtonStyle" to your XML Button according this.
Let me know if it doesn't work!
Add the following attributes in your layout XML to remove shadows:
android:elevation="0dp"
android:translationZ="0dp"
This will make your layout look like:
<android.support.v7.widget.AppCompatButton
android:id="#+id/login_btn_facebook"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:drawableStart="#drawable/ic_btn_login_facebook"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:elevation="0dp"
android:translationZ="0dp"
android:text="Continue with Facebook"
android:textColor="#fff"
app:backgroundTint="#3b5998"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/login_btn_google"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:drawableStart="#drawable/ic_btn_login_google"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:elevation="0dp"
android:translationZ="0dp"
android:text="Continue with Google"
app:backgroundTint="#ffffff" />
Read here for more information.

Buttons with ButtonBarButtonStyle do not highlight on touch

There are plenty of explanation about how to get buttons to display like standard dialogue buttons - which I follow. I have this in my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:divider="?android:attr/dividerVertical"
style="?android:attr/buttonBarStyle"
android:showDividers="middle"
android:measureWithLargestChild="true">
<Button
android:id="#+id/button_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/dialog_button"
android:text="#string/button_cancel" />
<Button
android:id="#+id/button_ok"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/dialog_button"
android:text="#string/button_ok" />
</LinearLayout>
This works perfectly well and produces the visual design I need. However when I touch the buttons, they don't highlight. This is rather annoying, as everything else is exactly as it should be. It seems that the buttonBarButtonStyle doesn't include the state drawables for different states of the button. Is there an easy way to get the highlight back?
Of course, I can just define my own state drawable defining different colours, but I want to use theme colours instead.
You need to apply the background:
android:background="?android:attr/selectableItemBackground"
to achieve the default "button bar" style and behavior.

Android: Making EditText similar to Chrome's URL box

I'm making chatting application for my school's assignment.
In my opinion, the default EditText in Android does not looks good. I want to make it looks like the URL box in Android's Chrome:
I have seen this design used in other applications such as Catch Notes (which looks beautiful).
So, is there any built-in option to change the EditText or we must draw it from scratch? Can anyone give link? I tried googling it, but I don't know the correct term
Thanks
you can achieving this by doing edittext background transparent.
so put your image in background of your layout and take a edittext inside this. and make edittext transpernt..
or
try this
<EditText
android:id="#+id/tracknumbertxt"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#+id/info"
android:background="#drawable/enter_tracking_no"
android:ems="10"
android:hint="Enter Tracking No."
android:paddingLeft="30dp"
android:inputType="text"
android:imeOptions="actionGo"
android:singleLine="true" >
</EditText>
here i have assign padding left..
so as per your design you have to set paddingRight property instead of paddingLeft..
Blindly use below layout style..
You will have your layout ready. Just replace the button backgrounds and your are done.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#android:color/darker_gray"
android:padding="5dip"
android:gravity="center">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#android:color/white"
android:gravity="center"
android:padding="5dip">
<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Type URL"
android:layout_weight="1"
android:background="#android:color/transparent"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Refresh"/>
</LinearLayout>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn1"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn2"/>
</LinearLayout>
There is nothing native to the SDK that can make it look like that. (maybe if you restrict use to only a certain version of the OS, then you can use that version's default styling, but isn't really a viable solution)
You will need to create an image to use as a background for the EditText to make it look how you want. The best options for text boxes and things like that are to either use a 9-patch image, or to create a layer-list XML file and describe your design that way. Either way, the file would go in the res/drawable folder in the project and you would set it as the background like so:
<EditText android:id="#+id/et_whatever"
android:layout_width="match_parent"
android:layout_height="wrap_content"
background="#drawable/YOUR_FILE_NAME" />

How to Create Borderless Buttons in Android [duplicate]

This question already has answers here:
How to create standard Borderless buttons (like in the design guideline mentioned)?
(19 answers)
Closed 9 years ago.
The Android Design Guidelines say to use borderless buttons (see picture below), but don't really explain how. Someone asked this same question a few weeks ago here: How to create standard Borderless buttons (like in the design guidline mentioned)? and there was an answer marked as "the" answer, but I am still lost and I don't see a way to add comments to a question that has been "closed"
The answer-er said
"Look into the theme attributes buttonBarStyle,
buttonBarButtonStyle, and borderlessButtonStyle"
but I still can't figure out how to actually use those things. I Googled around a bit and couldn't find anything so I figured I'd just ask the question again, and hopefully someone can provide a little more detail on how this works.
I thought I had this solved when I looked here a few weeks ago and noticed the answer about using a transparent background but it isn't quite good enough because it prevents the button from being highlighted when pressed.
Also, setting the style to Widget.Holo.Button.Borderless isn't appropriate because it makes the button boundaries to big.
To figure this out once and for all, I check the android source code for the standard Calendar app and found that it uses the following:
android:background="?android:attr/selectableItemBackground"
Doing it this way ensures the button is borderless and the correct size.
Look at this: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless
The attribute on your Button or ImageButton tag:
style="?android:attr/borderlessButtonStyle"
If you use ActionbarSherlock...
<Button
android:id="#+id/my_button"
style="#style/Widget.Sherlock.ActionButton" />
Some days ago a stumbeled over this again.
Here my solution:
This is done in 2 steps: Setting the button background attribute to android:attr/selectableItemBackground creates you a button with feedback but no background.
android:background="?android:attr/selectableItemBackground"
The line to divide the borderless button from the rest of you layout is done by a view with the background android:attr/dividerVertical
android:background="?android:attr/dividerVertical"
For a better understanding here is a layout for a OK / Cancel borderless button combination at the bottom of your screen (like in the right picture above).
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true">
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_marginLeft="4dip"
android:layout_marginRight="4dip"
android:background="?android:attr/dividerVertical"
android:layout_alignParentTop="true"/>
<View
android:id="#+id/ViewColorPickerHelper"
android:layout_width="1dip"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dip"
android:layout_marginTop="4dip"
android:background="?android:attr/dividerVertical"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/BtnColorPickerCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/ViewColorPickerHelper"
android:background="?android:attr/selectableItemBackground"
android:text="#android:string/cancel"
android:layout_alignParentBottom="true"/>
<Button
android:id="#+id/BtnColorPickerOk"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="?android:attr/selectableItemBackground"
android:text="#android:string/ok"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/ViewColorPickerHelper"/>
</RelativeLayout>
This code works for me:
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="?android:attr/dividerVertical" />
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:measureWithLargestChild="true"
android:orientation="horizontal"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingTop="0dip" >
<Button
android:id="#+id/cancel"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClickCancel"
android:text="#string/cancel" />
<Button
android:id="#+id/info"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClickInfo"
android:visibility="gone"
android:text="#string/info" />
<Button
android:id="#+id/ok"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClickSave"
android:text="#string/save" />
</LinearLayout>
I show 3 buttons at the bottom
android:background="#android:color/transparent"
<Button android:id="#+id/my_button" style="#android:style/Widget.Holo.Button.Borderless" />
You should also set margins and padding of the picture to 0.
Also look at the second, not marked answer at How to create standard Borderless buttons (like in the design guidline mentioned)?

Categories

Resources