Customizing my button

Question

I have buttons with text in it. What i want, is the same button without the text, having a little icon in the middle of the button. The icon has to be, i'm assuming, an image that you save in the drawable file, but when i put that in the button it gets set as a background..

Also, all the images with icons are images with a black icon surrounded with white space to make it in to a square. I want to keep my button, just having an icon in the center of it. Does anyone know how to do this?

activity main code:

<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"
    android:orientation="vertical"
    tools:context="com.example.rodekruis.MainActivity">


    <LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.rodekruis.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:src="@drawable/rkz_logo"
        android:layout_gravity="center" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button10"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_alignTop="@+id/button8"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:text="  Afspraak   maken" />


        <Button
            android:id="@+id/button8"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:text="  Bezoek  tijden" />

        <Button
            android:id="@+id/button9"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:background="@drawable/contact"
            android:text="Contact" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal">


        <Button
            android:id="@+id/button3"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:text=" Geef je mening!" />


        <Button
            android:id="@+id/button4"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:text=" Route begeleiding" />

        <Button
            android:id="@+id/button1"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_alignLeft="@+id/button5"
            android:layout_below="@+id/button8"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:text="Specialisten" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button5"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginRight="5dp"
            android:layout_weight="1.03"
            android:text="Brandwonden centrum" />


        <Button
            android:id="@+id/button6"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:text="Agenda" />


        <Button
            android:id="@+id/button7"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:text="Nieuws" />
    </LinearLayout>

</LinearLayout>
</LinearLayout>

This is the code for the top row buttons:

 <LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.rodekruis.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:src="@drawable/rkz_logo"
        android:layout_gravity="center" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button10"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_alignTop="@+id/button8"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:text="  Afspraak   maken" />


        <Button
            android:id="@+id/button8"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:text="  Bezoek  tijden" />

        <ImageButton
            android:id="@+id/button9"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:src="@drawable/rkz_logo"
            android:gravity="center"
            android:text="Contact" />

    </LinearLayout>

Kindly refer this http://stackoverflow.com/questions/18507351/how-to-create-custom-button-in-android-using-xml-styles — Jhaman Das, Apr 18 '16 at 12:34

mehrdad khosravi · Answer 1 · 2016-04-18T12:54:58.047

change

<Button
            android:id="@+id/button9"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:background="@drawable/contact"
            android:text="Contact" />

to

<ImageButton
            android:id="@+id/button9"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:src="@drawable/contact"
            android:text="Contact" />

if you dont want square button edit

<ImageButton
                android:id="@+id/button9"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:background="@android:color/transparent"
                android:layout_weight="1"
                android:src="@drawable/contact"
                android:text="Contact" />

This removes the normal button, and uses the image as a button. I want to keep the normal button, and IN that normal button, in small, another image. So you still have the square as a button, not the image. — , Apr 18 '16 at 12:44

score 0 · Answer 2 · answered Apr 18 '16 at 12:37

0

Try ImageButton. As the name implies, it's a button with image. To set the image do:

android:src.

Hope this helps.

answered Apr 18 '16 at 12:37

X09

3,827
10
47
92

This removes the normal button, and uses the image as a button. I want to keep the normal button, and IN that normal button, in small, another image. So you still have the square as a button, not the image. – Apr 18 '16 at 12:44

Onkar Nene · Accepted Answer · 2016-04-18T13:08:46.290

0

Use ImageButton widget instead of Button widget. then use android:src tag to set image and android:gravity="center" to set image gravity to center.

Hope it will help :)

UPDATE Then try this -

 <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"  //Your image icon
        android:background="@android:drawable/btn_default_small"/>

edited Apr 18 '16 at 13:08

answered Apr 18 '16 at 12:46

Onkar Nene

1,359
1
17
23

Thanks for the reply, however. This removes the normal button, and uses the image as a button. I want to keep the normal button, and IN that normal button, in small, another image. So you still have the square as a button, not the image. – Apr 18 '16 at 12:53
OK. Then try this - – Onkar Nene Apr 18 '16 at 13:06
It's getting there. The image is over the button, the button is still there, which is what i want. Thing is, the image is too big so it goes over it and makes the button way bigger than it's suppose to be. Even the icon images from google are too big. Can i change the size of that in the code? – Apr 18 '16 at 13:24
No..u can't.. But u can set small image.. Create PNG Icon using tools like Photoshop,etc. with diff. sizes and then place that icons into respective mipmap folders. That's it! Hope it will help :) – Onkar Nene Apr 18 '16 at 13:37

Customizing my button

3 Answers3