My MainActivity has 4 buttons, serving as navigation. UI is as below
And, I also created button.xml under the drawable folder.
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#457B9D"/>
<corners android:radius="20dp"/>
<stroke android:color="#fff" android:width="2dp"/>
</shape>
In the activity_main.xml, I wanted to apply the custom button to the view using android:background="#drawable/button"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#A8DADC"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button1"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_current_job"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_job_offer"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button3"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/adjust_comparison_settings"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button4"
android:layout_width="350dp"
android:layout_height="80dp"
android:background="#drawable/button"
android:text="#string/compare_job_offers"
android:textAllCaps="false"
android:textSize="20sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Also, I changed themes.xml a little bit to NoActionBar
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.JobCompare6300" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
But I am still having the default button. Did I miss anything or did I do something wrong?
As you use MaterialComponents theme, your Button is a MaterialButton which manages its own background drawable and therefore it is not recommanded to use android:background.
To achieve the style you want, you can use these custom attributes: app:backgroundTint, app:cornerRadius, app:strokeWidth and app:strokeColor
<Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
app:backgroundTint="#457B9D"
app:cornerRadius="20dp"
app:strokeColor="#fff"
android:text="qzeazeazeza"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Or if you need a specific drawable, you can always use android.widget.Button or use AppCompat as theme instead of MaterialComponents
<android.widget.Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_job_offer"
android:textAllCaps="false"
android:textSize="20sp" />
You don't need to use a custom background.
Just use the attributes provided by the MaterialButton:
<Button
app:backgroundTint="#457B9D"
app:cornerRadius="20dp"
app:strokeColor="#FFFFFF"
app:strokeWidth="2dp"
../>
Since you are using a Material Components theme your Button is replace at runtime with a MaterialButton.
Related
I want to customized Material Toggle Button like the following. I have tried but not succeed to achieve this output. following is xml code I tried but not desired output. I go through the Offical Documents but no help about this. Please help me if anyone knows about this
Thanks
xml
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/outdoor_toggle_buttonGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="true"
app:checkedButton="#+id/btn_walking"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginBottom="#dimen/_20sdp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<Button
android:id="#+id/btn_walking"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/walking"
android:textColor="#color/white"
android:textAllCaps="false"
android:backgroundTint="#color/green"
style="#style/Widget.MaterialComponents.Button"
app:shapeAppearance="#style/CustomShapeAppearance"
/>
<Button
android:id="#+id/btn_running"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/running"
android:textColor="#color/black"
android:textAllCaps="false"
android:backgroundTint="#color/white"
style="#style/Widget.MaterialComponents.Button"
app:shapeAppearance="#style/CustomShapeAppearance"
/>
<Button
android:id="#+id/btn_cycling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cycling"
android:textColor="#color/black"
android:textAllCaps="false"
android:backgroundTint="#color/white"
style="#style/Widget.MaterialComponents.Button"
app:shapeAppearance="#style/CustomShapeAppearance"
/>
</com.google.android.material.button.MaterialButtonToggleGroup>
Style
<style name="CustomShapeAppearance">
<item name="cornerSizeTopLeft">20dp</item>
<item name="cornerSizeTopRight">20dp</item>
<item name="cornerSizeBottomLeft">20dp</item>
<item name="cornerSizeBottomRight">20dp</item>
</style>
output
This can be achieved using a TabLayout inside a MaterialCardView. The MaterialCardView is needed to draw the corner radius of the outer section and the TabLayout to draw each Tab. The TabLayout has a property app:tabBackground which can be used to set a Drawable selector for the Tab Selected/Unselected state.
Xml layout:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:strokeWidth="0dp"
app:strokeColor="#android:color/transparent"
app:cardCornerRadius="20dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:backgroundTint="#android:color/white"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorColor="#android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="#android:color/transparent"
app:tabTextColor="#android:color/black"
app:tabSelectedTextColor="#android:color/white"
app:tabBackground="#drawable/tabs_selector"
app:tabTextAppearance="#style/CustomTabTextAppearance">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Walking" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Running" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cycling" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.card.MaterialCardView>
where #drawable/tabs_selector is the Tab Drawable Selector to set the Selected/Unselected state like below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:drawable="#drawable/tab_bg_selected" />
<item
android:drawable="#drawable/tab_bg_unselected" />
</selector>
For #drawable/tab_bg_selected Selected state:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#31d480" />
<corners android:radius="20dp" />
</shape>
For #drawable/tab_bg_unselected Unselected State:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
and #style/CustomTabTextAppearance is a custom Tab TextAppearance in case you want to change for each Tab the Text Size or Font Family like below:
<style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
<item name="fontFamily">#font/roboto_mono</item>
<item name="android:fontFamily">#font/roboto_mono</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">14sp</item>
</style>
Result:
I try to show an ImageView behing the statusbar.
It's working using window.setDecorFitsSystemWindows(false) with android R minimum :
This is my style (using NoActionBar and setting the statusbar color to transparent) :
<style name="Theme.TestProject" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<item name="android:statusBarColor" tools:targetApi="l">#80000000</item>
</style>
My layout :
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/nature" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="First button"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Second button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the result :
It's good in the top but in the bottom, my view is truncated so I see only one button. Why ?
I am learning android, and one of the challenges in the book said to add the previous button on my own. I did, and asked a friend for help putting the arrow on the left side, and he did, but he couldn’t figure out why drawableStart didn’t work. (drawableLeft did work)
Anyone know why drawableStart didn’t work? Or better yet: how to fix it?
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/arrow_left"
android:text="#string/previous_button"
android:drawablePadding="4dp"/>
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
</LinearLayout>
The code under themes.xml :
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.GeoQuiz" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
It seems that you're using Material design buttons, so use android:icon instead of android:drawableStart
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/arrow_left"
android:text="#string/previous_button"
android:drawablePadding="4dp" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:icon="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
</LinearLayout>
Update:
Didn't work. Now it doesn't show either arrow. And the program doesn't run in the emulator anymore
Appears to be a compatibility issue with android directive so, change it to app directive instead and added a style of Widget.MaterialComponents.Button.TextButton.Dialog as you use
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_left"
android:text="#string/previous_button"
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
android:drawablePadding="4dp" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
</LinearLayout>
After a whole lot of searching I finally figured out how to make it work
android:drawableStart not working seems to be an issue and here is the link to the issue and fix https://github.com/material-components/material-components-android/issues/1174
Here's the fix
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_left"
app:iconGravity="textStart"
app:iconTint="#android:color/white"
android:text="#string/previous_button"
android:drawablePadding="4dp"/>
Instead of using drawableBottom|Top|Left|... use MaterialButton's attributes app:icon, app:iconGravity and app:iconTint
Note drawableStart seems to be the only one with the issue the others work
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableEnd="#drawable/your_image"/>
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableTop="#drawable/your_image"/>
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableBottom="#drawable/your_image"/>
Then for Left
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
app:icon="#drawable/arrow_left"
app:iconGravity="textStart"
app:iconTint="#android:color/white"/>
I created a dialog and there is a button.
I want different style of button. So I made this file and applied to the background attribute of the button.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/my_pink_color">
<item
android:id="#android:id/background"
android:drawable="#drawable/btn_line_border_dialogue"></item>
</ripple>
I don't know why it has shadow around the button. It has two buttons. And the second button doesn't have any thing. When I remove the second button, the shadow seems gone.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<Button
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
When I just apply btn_line_border_dialogue.xml without the ripple. It is the same.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/my_yellow" />
<stroke
android:width="1dp"
android:color="#color/my_pink" />
</shape>
How can I remove this effect?
Use style="?android:attr/borderlessButtonStyle" inside your Button
refer : https://developer.android.com/guide/topics/ui/controls/button.html#Borderless
Or If you don't need Button particularly, use TextView instead
try to set elevation t0 0 dp or you can use TextView or Layout instead of button.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
This can be also fixed by setting android:stateListAnimator="#null" globally in Resources\values\styles.xml:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/NoShadowButton</item>
</style>
<style name="NoShadowButton" parent="android:style/Widget.Button">
<item name="android:stateListAnimator">#null</item>
</style>
</resources>
set the stateListAnimator on the button as = "#null" in the xml. It will remove the shadow from the button.
how to change the default color orange when tyoping text in edittext field or press button how that color will change? any help?? this is my xml below when i run this code default orange color is appear on border of edittext and when pressing button
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff">
<TextView
android:id="#+id/txtEnterPinForTransaction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="#+id/lblPinno"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<EditText
android:id="#+id/txtPinno"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword" />
<Button
android:id="#+id/btnsubmit"
style="?android:attr/buttonStyleSmall"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Submit" />
<Button
android:id="#+id/clearButton"
style="?android:attr/buttonStyleSmall"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Clear" />
<Button
android:id="#+id/btngoback"
style="?android:attr/buttonStyleSmall"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Go Back" />
You can create an stateListdrawable which defines, different colors or drawables for different states of Button, and can set this xml drawable as background of the button.
For example for the button you can use following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
save this xml into Res-> drawable folder with btn_selector.xml, now set this to background of the button:
<Button
android:id="#+id/btnsubmit"
android:background="#+drawable/btn_selector"
style="?android:attr/buttonStyleSmall"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Submit" />
If still something unclear, refer
http://developer.android.com/guide/topics/resources/drawable-resource.html