CODEWITHSUNDEEP
androideclipseandroid-layoutbuttonandroid-view
EagleOne
EagleOne

Reputation: 571

Design a button in Android

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?

Upvotes: 1

Views: 1337

Answers (4)

Bojan Kseneman
Bojan Kseneman

Reputation: 15668

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 :/

Upvotes: 1

kamilmasta
kamilmasta

Reputation: 129

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

Upvotes: 0

matty357
matty357

Reputation: 637

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" />

Upvotes: 0

Knossos
Knossos

Reputation: 16068

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.

Upvotes: 0

Related Questions