I have this button and I want to center the icon inside it but it should also be above the text.
The thing is, there is an option to set gravity of icon, Which is app:iconGravity but it only has two options and none of them is center.
If there's no text, setting the option to textStart moves the icon to the center but I want icon to be center and also above the text.
Here's the current code:
<com.google.android.material.button.MaterialButton
android:id="#+id/payButton"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_weight="1"
android:fontFamily="#font/montserrat_regular"
android:text="#string/pay"
android:textColor="?attr/colorPrimary"
app:backgroundTint="#android:color/white"
app:icon="#drawable/ic_pay_black_24dp"
app:iconGravity="textStart"
app:iconSize="32dp"
app:iconTint="#color/colorPrimary" />
It seems that they don't think it's a good idea/design but their designer agreed to add the functionality in a future version.
Here is a request/discussion around this topic on their repo:
https://github.com/material-components/material-components-android/issues/671
Right now, the only possibilities that I've found are to:
Use android:drawableTop instead of app:icon: which is poorly customizable
Create you own custom view or layout and include it where you need it
I've just submitted a PR to add this feature, as it seems that they agree it should support top gravity.
Update (2021-02-17)
It should now be available on Material 1.3.0 by using one of the following options: app:iconGravity="top" or app:iconGravity="textTop"
The MaterialButton view don't allow to do what you want. You will do it manualy with you own views.
Related
I have a Material Button (from Google's Material Components) which can cast black shadow normally. But when I change the shadow color, it won't appear at all. Here's the button's XML portion :
<com.google.android.material.button.MaterialButton
android:id="#+id/next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_activity_horizontal"
android:enabled="false"
android:elevation="8dp"
android:layout_margin="16dp"
android:text="#string/setup_next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/nickname_entry_wrapper"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:enabled="true"
android:textSize="18sp"
android:textColor="#000000"
android:backgroundTint="#FFFFFF"
android:fontFamily="#font/poppins_semibold"
android:paddingVertical="12dp"
android:outlineAmbientShadowColor="#FFFFFFFF"
android:outlineSpotShadowColor="#FFFFFFFF"
android:outlineProvider="background"
android:translationZ="8dp"
/>
As you can see, outlineAmbientShadowColor and outlineSpotShadowColor are supposed to change the shadow color that results from elevation and Z translation, right ? I tried adding both elevation and Z translation at once but nothing works, the button still has 0 shadow.
The button is a child view of a Constraint Layout that has a black background. As you can see, I even tried using different values for outlineProvider such as bounds or paddedBounds, yet..nothing.
If anyone has experience with these outline attributes, I'd love to have this solved. The problem isn't specific to Android 11 only, I am just saying that I am using Android 11 for testing, since those outline attributes are only available on Android versions later than Oreo.
As Mike M. has mentioned in the comment, those attributes don't really change the color, they just add a little 'tint'.
If you wanna use material buttons with more features, you should take a look at this library :
Github Repo: Carbon by ZieIony
It should fulfill the required objective (casting white shadows) successfully and without issues on all Android APIs.
Is there a way to align the icon to the start, top, and left of the material button in android XML? Do it programmatically is also acceptable.
I would expect app:iconPadding="0dp" to do that, but it doesn't. The goal is something like this:
My XML:
<com.google.android.material.button.MaterialButton
android:id="#+id/return_button"
app:cornerRadius="40dp"
app:icon="#drawable/icon_back"
app:iconPadding="0dp"
app:iconGravity="start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="RETURN" />
No. There are guidelines that comes with Material Widgets. If you want to do something like this you should find another ways like drawing on canvas, compound views, libraries.
Currently I have a button that looks like this:
What I want to do is to be able to replace the text with this vector drawable but keep the blue rectangle background:
I looked into doing this but I cannot seem to get it right.
I tried the following combination:
<Button
android:id="#+id/deletebutton"
android:layout_width="0dp"
android:layout_height="50dp"
android:src="#drawable/deletebtn24dp"
android:backgroundTint="#color/primaryButtonColor"
android:layout_weight="1"/>
However that just led to a blank blue button with no drawable. What can I do so the drawable replaces the text?
Also I would like to support API levels start at 16+.
You have to use app:srcCompat="#drawable/deletebtn24dp" instead of android:src="#drawable/deletebtn24dp". Using an ImageButton might also be better than using a straight Button.
On an iOS App I saw such a Button:
The same I would like to do in Android, how could I achieve this?
What I tried is the following code:
<Button
android:id="#+id/widget41"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Email1 testmail#gmail.com"
android:textStyle="bold" />
Looks something like that:
Well just a normal (ugly looking) Button. I have no idea, how I could style it like in iOS. Any suggestions or links would be appreciated!
The best solution would be to create your own custom view that behaves like the iOS counterpart (though, as other users have mentioned, Android does have it's own design guidelines, and the view that you are seeing is an iOS implementation that is designed for that platform).
If you look at the iOS image above (a copy of yours with some parts highlighted), I have split it up into sections.
You could use an Android ViewGroup like a LinearLayout to create the overall image, and give the LinearLayout a border or background (which can be a bitmap image of a rounded rectangle for example (See Android Nine Patch for an example of how to make this fit multiple screens).
Firstly, for the mail icon you would need a LeftAligned ImageView
with appropriate dimensions.
Next up we have a Bold TextView containing the text "Email1".
This is followed by another TextView which is blue and uses the
elipsize property (as defined in an Android XML layout) to create
"..." at the end once the text has reached the max width it can
consume. (Use android:ellipsize="end" in the XML)
Finally we have an indicator image, which again can be an ImageView
sized appropriately.
You could also achieve this with a RelativeLayout, which would allow you to RightAlign the indicator image, LeftAlign the mail icon, and allow the text to fill the space in between that it can get hold of.
Example of Nine Patch use for the background here
That is UITableView in iOS(just like ListView in android). It depends on the list item design you do it. There is no such Button Control in Android.
You should design your own button to looks like iOS one.
Android has it own design guidelines:
http://developer.android.com/design/patterns/pure-android.html
Well, as others have clearly mentioned there is no default Button in Android like this, and for your info neither is in iOS. Its all about the design. Anything is possible, in the end it all comes to how far are you willing to go to achieve it.
Below is a simple code, that will be close to your design.
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:background="#drawable/text_background"
android:drawableLeft="#drawable/envelope"
android:drawablePadding="10dp"
android:drawableRight="#drawable/right_arrow"
android:ellipsize="end"
android:gravity="center_vertical"
android:text="#string/email" />
There can be other ways also, like that whole view could be a ViewGroup, either a LinearLayout or a RelativeLayout and there could be multiple TextViews and ImageViews inside that.
Here is a tutorial for creating stylized android buttons. You can round the corners and change the background colors to look like the buttons in ios.
Here is a similar question.
Hope this helps.
I created a button with a 9patch image as a background. In the 9patch image I used the bottom and right lines to specify the content area/padding, to position the text on the button. This works well on a TextView, but on a Button the content lines seem to have no effect on the text position. Setting "paddingTop"/"paddingBottom" also seem to have no effect - only "padding" has any effect.
This is my layout XML:
<Button
android:layout_width="450dp"
android:layout_height="198dp"
android:text="Some text here"
android:gravity="center"
android:background="#drawable/my_button"/>
Is there any way to set the padding? Maybe I could use a different View instead of a Button? For example, I could try to just use a TextView and make it clickable, but I'm not sure what other side-effects this will have.
Explicitly setting android:padding="#null" solved my issue.
The issue seemed to be that a Button (or one of the styles in the theme I'm using) is setting the padding, which overrides all other padding in the button - padding in the background drawable, as well as paddingTop, paddingLeft etc.
My button layout is now defined like this:
<Button
android:layout_width="450dp"
android:layout_height="198dp"
android:text="Some text here"
android:gravity="center"
android:padding="#null"
android:background="#drawable/my_button"/>
My IDE (IntelliJ IDEA 11.1) picked up the #null as an error, even though it compiled. Setting it to -1px also worked.
If you use a 9-patch image as background, both the padding and the stretched areas are defined in the background.
It's quite graphic if you use the draw9patch tool: the padding is defined (indirectly) with the content area (lines on right and bottom):
http://developer.android.com/guide/developing/tools/draw9patch.html