CODEWITHSUNDEEP
androidbuttonmaterial-design
User Learning
User Learning

Reputation: 3493

Button with background image and use Style of material design - 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.

Upvotes: 3

Views: 2035

Answers (1)

Jackson Chengalai
Jackson Chengalai

Reputation: 3937

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" />

Upvotes: 1

Related Questions