Button with background image and use Style of material design - Android - android

Material design button with style not working
I have a button with background color as DarkBlue, I need Material design style for that button like this below:
How it is possible
<Button
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:background="#0040FF"
android:textColor="#FFFF"
android:layout_marginRight="10dp"
android:text="Login" />
I need to use :
style="?android:attr/buttonStyleSmall"
android:background="?android:attr/selectableItemBackground"
normally when i use
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:paddingRight="15dp"
android:layout_gravity="center"
android:text="Login"
android:paddingLeft="15dp"
android:id="#+id/login" />
It works with Design .
Is it possible to perform material design button style with background image / color.
sorry for simple question i m working in UI.

Use a drawable ripple.xml in your drawable-v21 directory for your background such as:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
for less than sdk 21 you'll have to create a custom selector ripple.xml in drawable folder. then it will load in pre lollypop devices
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/primaryPressed" android:state_pressed="true"/>
<item android:drawable="#color/primaryFocused" android:state_focused="true"/>
<item android:drawable="#color/primary"/>
</selector>
Use custom color according to your needs
then
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:paddingRight="15dp"
android:layout_gravity="center"
android:text="Login"
android:paddingLeft="15dp"
android:background="#drawable/ripple"
android:id="#+id/login" />

Related

Android how to set background color on a Button

I am trying to change the background color of a Button. I'm in Kotlin on SDK 21 on emulator.
A View and a Button are declared in the layout XML file
<View
android:id="#+id/myview"
android:layout_width="64dp"
android:layout_height="32dp"
/>
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
The API to set the color doesn't seem to work:
showButton.setBackgroundColor(0xff60a0e0.toInt()) <-- doesnt work
What works is:
myview.setBackgroundColor(0xff60a0e0.toInt()) <-- works, exact background color
showButton.setTextColor(0xff000050.toInt()) <-- works, exact text color
After trying further it seems that I can only set the alpha channel of the button, not the color:
setBackgroundColor( 0xff000000.toInt()) <-- works, opaque
setBackgroundColor( 0x00000000.toInt()) <-- works, transparent
Also same thing with:
showButton.setBackgroundColor(Color.GREEN) <-- doesnt work, button is opaque but not green
showButton.setBackgroundColor(Color.TRANSPARENT) <-- works, button is transparent
Any idea? Did I miss something in the other answers or the documentation?
Here is complete layout, it used to inflate a fragment, if that matters:
<?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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="#+id/myview"
android:layout_width="64dp"
android:layout_height="32dp"
/>
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/dictionaryEntryRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layoutManager="LinearLayoutManager"
/>
</LinearLayout>
mButton.setBackgroundColor(ContextCompat.getColor(mContext, R.color.xxx));
Since you are using a Theme.MaterialComponents.Light.DarkActionBar theme, check the doc and just use the MaterialButton with app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/color_selector"
android:textColor="#FFF"
android:text="BUTTON"
/>
where color_selector can be a color or a selector. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/..." android:state_enabled="true"/>
<item android:alpha="0.12" android:color="#color/..."/>
</selector>
You can change the colour two ways; through XML or through coding. I would recommend XML since it's easier to follow for beginners.
xml
add this attribute to set background color android:background="#000"
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fgkdjgdjsf"
android:background="#000"
/>
Coding:
showButton.setBackgroundColor(resources.getColor(R.color.colorPrimary))
showButton.setBackgroundColor(Color.BLACK)
In your layout, you are using
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
if you want to set textSize in Button, you should use
android:textSize="12dp"
and for background set in button your layout should be like :-
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="test"
android:background="#ff60a0e0"/>
OR You can also set color in colors.xml as :-
<color name="button_background">#ff60a0e0</color>
and then your button tag in your layout will be as
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="test"
android:background="#color/button_background"/>
Dynamic you can set color as
showButton.setBackgroundColor(ContextCompat.getColor(context!!, R.color.button_background))
now in kotlin(androidx) you can use this,
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buttonExploreAll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAllCaps="false"
android:background="#drawable/select_yellow"
android:text="button"
android:textColor="#color/white"
/>
and select_yellow is your style xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#color/colorYellow"
android:width="#dimen/_1sdp"/>
<corners
android:radius="#dimen/_200sdp" />
<solid android:color="#color/colorYellow" />
</shape>
I used the "backgroundTint" to change the color, which did not allow the color to change after clicking. The problem was solved when I changed the color by "background" the button.

How can I remove shadow of Button on Dialog? Why is the shadow shown?

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.

Ripple effect not working in relative layout with image

Ripple effect is not working with the below code! Using the below relative layout as item in recycler view. Building with Xamarin platform.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="fill_parent"
android:layout_height="120dp"
android:paddingBottom="1dp"
android:focusable="true"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/bugImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/grey_small"
android:clickable="false"/>
<TextView
android:id="#+id/textBugName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/bugImage"
android:layout_alignTop="#id/bugImage"
android:layout_alignBottom="#id/bugImage"
android:gravity="left"
android:text="Klebsiella pneumoniae"
android:textColor="#ffffffff"
android:textSize="30dp"
android:layout_marginRight="145dp"
android:padding="10dp"
android:shadowColor="#000000"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="25"
android:clickable="false"/>
<TextView
android:id="#+id/textBugCount"
android:layout_width="135dp"
android:layout_height="wrap_content"
android:layout_alignRight="#id/bugImage"
android:layout_alignTop="#id/bugImage"
android:layout_alignBottom="#id/bugImage"
android:gravity="right"
android:text="234"
android:textColor="#ffffffff"
android:textSize="30dp"
android:padding="10dp"
android:shadowColor="#000000"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="25"
android:clickable="false"/>
</RelativeLayout>
I have already tried this android:foreground="?android:attr/selectableItemBackground" and it didn't work!
How to fix this? I tested it on api 22.
Not sure what you're trying to accomplish with this (i.e. setting foreground):
android:foreground="?android:attr/selectableItemBackground"
Try this:
android:background="?android:attr/selectableItemBackground"
though I use a custom drawable to have control over coloring, as shown here:
Set the background on your RelativeLayout android:background="#drawable/mybackground"
in res/drawable, mybackground.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/disabledBackground" />
<item android:state_activated="true" android:drawable="#color/colorAccent" />
<item android:drawable="#color/listBackground" />
</selector>
in res/drawable-v21, mybackground.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#color/disabledBackground" xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<selector>
<item android:state_pressed="true" android:drawable="#color/disabledBackground" />
<item android:state_activated="true" android:drawable="#color/colorAccent" />
<item android:drawable="#color/listBackground" />
</selector>
</item>
</ripple>
Here you've specified the ripple effect, supported on platforms v21+. You can adjust the colors and states to your needs, disabledBackground, colorAccent, listBackground are just examples of named color attributes
With a RelativeLayout as a root view you should set the native ripple with background="" instead of foreground=""
Or you may try to implement a cardview which will properly respond to foreground=""
android:foreground="?android:attr/selectableItemBackground"
works only for frame layout.
use
android:background="?android:attr/selectableItemBackground"
or it is better to use:
android:background="?attr/selectableItemBackground"
if you are using compat library
Just add android:onClick="add on click listener here" and android:background="?android:attr/selectableItemBackground" to your layout where you need a ripple effect. It worked for me.

Image set as background of toggle button is stretched android

I have a Toggle Button as:
<ToggleButton
android:id="#+id/tv_pmpSwitch"
android:layout_width="0dp"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:background="#drawable/toggle_view"
android:layout_gravity="center_vertical"
android:gravity="center"
android:textOn=""
android:textOff=""
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_centerVertical="true"
android:paddingTop="16dp"
android:layout_marginLeft="16dp"
/>
And my toggle_view drawable is :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/ic_list_action"
android:state_checked="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/ic_grid_action"
android:state_checked="false"/>
</selector>
I don't understand why the image in background is stretched ?? I've tried various size images.
You can simply set in the xml layout file:
android:minWidth="0dp"
android:minHeight="0dp"
The image will not stretch anymore
<ToggleButton
android:id="#+id/tv_pmpSwitch"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="0.1"
android:background="#drawable/toggle_view"
android:textOff=""
android:textOn="" />
Try this on your code and adjust only layout height parameter!
EDIT
The way to get a non stretched image is using a bitmap and not a drawable.
use following as your xml as your background.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<bitmap android:src="#drawable/ic_list_action"
android:gravity="center_vertical|left" />
</item>
<item>
<bitmap android:src="#drawable/ic_grid_action"
android:gravity="center_vertical|left" />
</item>
</layer-list>
After trying out a few things I found what was wrong:
The weightSum was the culprit and the assigned weight was stretching the image.
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.1"
android:layout_height="wrap_content">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_pmpSwitch"
android:background="#drawable/ic_toggle_list"
/>
</LinearLayout>
Putting the whole code inside a LL parent did the trick

Android RelativeLayout Drawable Selector doesn't work

I have troubles making my RelativeLayout change background drawable on click. I made it clickable and focusable but this make nothing change. The background remains static to enables drawable. Thanks in advance.
<RelativeLayout
android:id="#+id/bttn_type_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="#drawable/day_bttn_bg_red"
android:clickable="true"
android:focusable="true"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<ImageView
android:id="#+id/bttn_type_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:contentDescription="#string/app_name"
android:src="#drawable/relationship" />
<TextView
android:id="#+id/bttn_type_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/bttn_type_iv"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp"
android:text="#string/type_bttn_txt"
android:textSize="#dimen/data_fill_bttn_txt_size"
android:textStyle="bold" />
</RelativeLayout>
Here is the selector xml in drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bttn_red_p_bg" android:state_enabled="false" android:state_pressed="true"></item>
<item android:drawable="#drawable/bttn_red_a_bg" android:state_enabled="true"></item>
</selector>

Categories

Resources