Android Button with Icon and Text | Android apps Development






To display icon with text  we have to use only    
android:drawableTop="@drawable/icon-name"



We can set icon on  Top ,Bottom, Left, Right. 
To set on top  have to write:  android:drawableTop="@drawable/icon-name"
To set Bottom  have to write:  android:drawableBottom="@drawable/icon-name"

To set icon  Left  have to write:  android:drawableLeft="@drawable/icon-name"
To set icon Right  have to write:  android:drawableRight="@drawable/icon-name"





Here the full code is for a button with icon and text: 

Xml file:                                 

1
2
3
4
5
6
7
8
9
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button"
            android:drawableTop="@drawable/fav"
            android:background="#00acee"
            android:drawablePadding="10dp"
            android:padding="10dp"/>





Step 1: Keep an icon in Drawable folder. You will find the meaterial icon in https://design.google.com/icons/


keep an icon in drawable folder




Step 2:  full xml file:



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.hp.symonapps.MainActivity"
    android:orientation="vertical"
    android:gravity="bottom">


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="New Button"
            android:id="@+id/button"
            android:drawableTop="@drawable/fav"
            android:background="#00acee"
            android:drawablePadding="10dp"
            android:padding="10dp"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="New Button"
            android:id="@+id/button2"

            android:drawableTop="@drawable/fav"
            android:background="#f57d00"
            android:drawablePadding="10dp"
            android:padding="10dp"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="New Button"
            android:id="@+id/button3"

            android:drawableTop="@drawable/fav"
            android:background="#00acee"
            android:drawablePadding="10dp"
            android:padding="10dp"/>
    </LinearLayout>
</LinearLayout>


Output:






























Comments

Post a Comment