Design a button in Android

Question

I am designing an Android activity, but it is the first one.

I have some experience in XML/JAVA.

I would like to create logout and read buttons like the ones in the photo.

But i have no experience in doing something like this.

Could someone more expert show me how do that?

I don't understand very well what do you want to do... Could you explain better your problem? and if you have a photo about this, it'd be better — Alejandro Lora, Apr 27 '15 at 15:14
The photo is in the question. I would like to create Android buttons like the ones in the photo. — EagleOne, Apr 27 '15 at 15:15
I think you should use material design or android design to do it, I think to get that you have to use web technology within web view for example, but I don't think this way is a good practice, good luck! — Alejandro Lora, Apr 27 '15 at 15:57

Bojan Kseneman · Accepted Answer · 2015-04-29T20:07:06.377

This is how I would create the logout button

logout_button.xml

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

    <solid android:color="#FFFFFD"/>
    <corners android:radius="15dp"/>
    <stroke
        android:width="1dp"
        android:color="#5C88A1"/>

</shape>

And the button in layout

<Button
    android:id="@+id/btnLogout"
    android:layout_width="150dp"
    android:layout_height="30dp"
    android:background="@drawable/logout_button"
    android:gravity="center"
    android:text="logout"
    android:textColor="#7E9196"
    android:textSize="15sp"/>

The other one isn't that simple :/

score 0 · Answer 2 · answered Apr 27 '15 at 15:19

You will need to break down each section into components.

In the case you have provided, you could happily have something like:

LinearLayout
    TextView
    ImageButton
    TextView
    ImageButton

The first ImageButton could be a simple background colour of orange, or you could get more complicated with a crafted XML drawable.

The second ImageButton would need to be a ninepatch drawable.

score 0 · Answer 3 · answered Apr 27 '15 at 15:19

create an XML with your button design in the drawable folder such as ; okButtonDesign.xml

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

 <gradient
    android:angle="180"
    android:endColor="#D8D8D8"
    android:startColor="#F7D358" />

 <corners android:radius="10px" />

 <stroke
    android:width="2px"
    android:color="#000000" />

</shape>

Then in you activity layout, set the button background to the design;

<Button
 android:id="@+id/btnloginok"
 android:background="@drawable/okButtonDesign"
 android:gravity="center"
 android:text="@string/logonbuttontext"
 android:textColor="#A4A4A4"android:textSize="@dimen/loginTextSize" />

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

0

For the logout button check this answer : rounded button

Button read : there are two ways. One is to create 9-patch, but u must create it in gfx program. Second approach is to write this button from code, and u can learn it from here:

how to create custom view

edited May 23 '17 at 11:43

Community

1
1

answered Apr 27 '15 at 15:20

kamilmasta

129
7

Design a button in Android

4 Answers4