How to create custom Button?

Question

I want to create a custom Button in my app, like the image below:

This is a Button from an app where when I press it, another Activity starts.

How can I create a Button like this?
I'll appreciate any help.

Editted:

button_back.xml :

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

<gradient
    android:angle="90"
    android:startColor="#4080FE"
    android:centerColor="#4080FE"
    android:endColor="#4080FE"
    android:type="linear" />

<corners
    android:radius="500dp"/>



<size
    android:width="40dp"
    android:height="40dp"
    />

and in layout :

<Button
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:drawableLeft="@drawable/btn"
    android:background="@drawable/button_back" 

    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="94dp" />

and this is the output:

I don't want those red circles to be shown; I want my button be the same as first picture without any boredr.

Thank you for your helping.

Last Edition:

I used imageButton instead of button and it is correct solution for my case.

Aditya Vyas-Lakhan · Accepted Answer · 2016-10-26T08:19:04.013

2

Try this way to get the shape for your view

create go_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:startColor="#4080FE"
        android:centerColor="#4080FE"
        android:endColor="#4080FE"
        android:type="linear" />

    <corners
        android:radius="6dp"/>



    <size
        android:width="40dp"
        android:height="40dp"
        />


</shape>

and then add it to your layout

<ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:padding="10dp"
        android:src="@drawable/autoorder"
        android:background="@drawable/go_btn"
        android:layout_gravity="center"
android:layout_marginTop="10dp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calender"
        android:layout_gravity="center"
        />

OUTPUT

edited Oct 26 '16 at 08:19

answered Oct 26 '16 at 08:07

Aditya Vyas-Lakhan

13,409
16
61
96

thank u, where should i add this "go_btn.xml " ?in drawable folder? – Samaneh Rezaei Oct 26 '16 at 08:13
I think this is not like a button,how can i use this as a button? – Samaneh Rezaei Oct 26 '16 at 08:37
you can use it like as button,,you will get all the methods same as button – Aditya Vyas-Lakhan Oct 26 '16 at 08:38
what is the issue?? – Aditya Vyas-Lakhan Oct 26 '16 at 08:44
show your code...in your screenshots both layouts are different..what exactly you trying to achive..give brief description – Aditya Vyas-Lakhan Oct 26 '16 at 09:32
if you use button with drawableleft you can see that your arrow image is not properly aligned..better use imageview and textview as i gave in my answer,,and your border issue also will be solved.. – Aditya Vyas-Lakhan Oct 27 '16 at 03:31

score 1 · Answer 2 · answered Oct 26 '16 at 08:08

You can create Similar like this using TextView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/base"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="horizontal">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:drawableTop="@drawable/checked"
        android:gravity="center"
        android:text="Calander" />
</RelativeLayout>

score 1 · Answer 3 · edited Oct 26 '16 at 09:27

I think you better use a TextView and set drawableTop for it, like below

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/calendar"
    android:textSize="@dimen/textSizeSmall_SP"
    android:textColor="@color/textColor"
    android:gravity="center"
    android:text="Calender"
    android:paddingLeft="@dimen/smallMargin_SP"
    android:paddingRight="@dimen/smallMargin_SP"
    android:background="@drawable/green_border_no_corners"/>

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

There's a lot of different ways:

Create a new LayerList with round corners and your Drawable like this: https://stackoverflow.com/a/21002306/5778152

Then in your XML file, create the Button and use the LayerList you've created.

Or you can create a LinearLayout, use a shape with round corners for the background and inside it, add an ImageView to set your icon

edited May 23 '17 at 11:46

Community

1
1

answered Oct 26 '16 at 08:11

Nicolas Cortell

659
4
16

score 0 · Answer 5 · answered Oct 26 '16 at 09:50

0

Create an xml resource file and add this resource to button background attribute:-)

answered Oct 26 '16 at 09:50

cumulOnimbus

1
1

How to create custom Button?

5 Answers5