How to design buttons?

Question

Does anyone know if there is a possible way to design the android buttons like this:

Answer 1

I have done same thing in one of my app. Here I am giving the xml code for this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="60dp"
   android:background="#000"
   android:gravity="center_vertical">

   <LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/reviewLayout"
android:gravity="center_horizontal"
>
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/reviews"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Review"
    android:textColor="#FFF"/>
 </LinearLayout>

 <LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/nearbyLayout"
android:layout_toRightOf="@id/reviewLayout"
android:gravity="center_horizontal">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:src="@drawable/nearby"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Nearby"
    android:textColor="#FFF"/>
 </LinearLayout>

 <LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/searchLayout"
android:layout_toRightOf="@id/nearbyLayout"
android:gravity="center_horizontal">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:src="@drawable/search"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Search"
    android:textColor="#FFF"/>
  </LinearLayout>

  <LinearLayout
android:layout_width="75dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/bookmarkLayout"
android:layout_toRightOf="@id/searchLayout"
android:gravity="center_horizontal">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:src="@drawable/bookmarks"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bookmarks"
    android:textColor="#FFF"/>
  </LinearLayout>

  <LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/settingsLayout"
android:layout_toRightOf="@id/bookmarkLayout"
android:gravity="center_horizontal">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:src="@drawable/settings"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Settings"
    android:textColor="#FFF"/>
  </LinearLayout>

</RelativeLayout>

Use this layout where you want using include tag, and call it in your Activity. Here I am giving the code to include this in Activity.

private LinearLayout reviewLay,nearbyLay, searchLay, bookmarkLay, settingLay;
reviewLay = (LinearLayout)findViewById(R.id.reviewLayout);
nearbyLay = (LinearLayout)findViewById(R.id.nearbyLayout);
searchLay = (LinearLayout)findViewById(R.id.searchLayout);
bookmarkLay = (LinearLayout)findViewById(R.id.bookmarkLayout);
settingLay = (LinearLayout)findViewById(R.id.settingsLayout);
reviewLay.setOnClickListener(this);
nearbyLay.setOnClickListener(this);
searchLay.setOnClickListener(this);
bookmarkLay.setOnClickListener(this);
settingLay.setOnClickListener(this);
btEdit.setOnClickListener(this);

Here I have used a layout instead of button and I am setting onclicklistener for each layout. Now override onclick method and do what you want with each layout

Answer 2

I'd say these are regular buttons with transparent background and icons set through drawableTop attribute. So an xml for such a button would look like:

<Button android:drawableTop="@drawable/icon" android:background="@android:color/transparent"/>

Answer 3

For that i think need to create the custom view for tab and call in tabhost http://joshclemm.com/blog/?p=136

Thank you

Answer 4

Try this

  <Button android:drawableTop="@drawable/icon" android:background="@android:color/transparent"/>

ALso you can design this type of bottom bar using Tab in android

Click here

Also you can design this type of button using radio button

Click here

Answer 5

okay

--take one layout and aligng it ALIGNPARENTBOTTOM = TRUE now set background of that Layout to THIS BLACK

-- now take five button in that Layout Horizontal now take images like these Transparent and set it to the buttons

-- also get Images for HOVER action and set it on click of that particular button

(use layout_weight for setting equall sizes of button)

Have Fun!!