How to set button have image and shadow?

11,456

Solution 1

1. use ImageButton

try this you can use ImageButton :- Displays a button with an image (instead of text) that can be pressed or clicked by the user. By default, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states.

 <ImageButton
  android:id="@+id/btnMain"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:adjustViewBounds="true"
  android:contentDescription="@string/btnMain_description"
  android:elevation="10dp"
  android:background="@android:drawable/dialog_holo_light_fram‌​e"
  android:scaleType="centerInside"
  android:src="@drawable/IMage"
 />

2. user CardVirew or you can try this add your button inside card view like this

compile this dependencies

compile 'com.android.support:cardview-v7:25.3.1'

layout like this

    <android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="10dp">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/disha"
        android:text="@string/app_name" />
</android.support.v7.widget.CardView>

ask me in case of any query

Solution 2

create button_selector.xml in res/drawable :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:right="5dp" android:top="5dp">
                <shape>
                    <corners android:radius="3dp" />
                    <solid android:color="#D6D6D6" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="2dp">
                <shape>
                    <gradient android:angle="270" 
                        android:endColor="#E2E2E2" android:startColor="#BABABA" />
                    <stroke android:width="1dp" android:color="#BABABA" />
                    <corners android:radius="4dp" />
                    <padding android:bottom="10dp" android:left="10dp" 
                        android:right="10dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    </selector>

And in your xml layout:

 <ImageButton
            android:src="@mipmap/ic_launcher"
            android:background="@drawable/shadow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="10dp"/>

Solution 3

Use CardView to achieve this :

Add support lib to dependencies as follows:

dependencies {
compile 'com.android.support:cardview-v7:25.2.0'//Add respective version
  }

use this in layout

 <android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/card_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/user_image"
                app:cardBackgroundColor="@android:color/white"
                android:foreground="?android:attr/selectableItemBackground"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:layout_marginRight="@dimen/activity_horizontal_margin"
                android:layout_marginTop="@dimen/padding_small"
                android:layout_marginBottom="@dimen/padding_small"
                app:cardCornerRadius="4dp"
                app:cardElevation="10dp" > 

Please let me now if it helps.

Share:
11,456
SunSpike
Author by

SunSpike

Android, over 2-year android development experience. Attending Korea Software High School, Grade 3, 18 years old :) Having basic knowledge in various fields like Windows Application or Web. Email: [email protected] linked-in: https://www.linkedin.com/in/donghyeong-jeong-7a3952138/ portfolio: https://drive.google.com/open?id=1Q-HZMaiOnDVvb7_yeTRSaGFKuvos3L6G

Updated on June 12, 2022

Comments

  • SunSpike
    SunSpike almost 2 years

    To make shadow, make shadow xml file and use like android:background="@drawable/shadow". But put image is android:background="@drawable/image too.

    how to set button shadow and image in one button?

    I'm sorry I'm not fluent in English.