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.
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.
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.
I would like to follow material design guidelines in my application. For tappable text should I use unbounded or bounded surface ink ripples (displayed when the user presses on the text)?
I used this Custom ripple layout for myself, I think it is easy to use:
RippleLayout
and you can use it like this in your xml file:
<your.package.name.RippleLayout
android:layout_width="40dp"
android:layout_height="40dp"
app:mrl_rippleSelectedColorState="#android:color/transparent">
<!-- other views like buttons and.... -->
</your.package.name.RippleLayout>
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.