Android Full Width ICS style Minimalist Bottom ButtonsViews

Question

I want to make some buttons that look like this the following:

I've looked pretty hard for preset ICS ones in the android.widget package, but I can't find any. I figure there's got to be an easy way, since they seem to be thematic of the entire OS version. If anyone knows of a way to make buttons look like these I'd be a happy camper.

Answer 1

In case you are looking for the XML layout of the button from Android ICS like the one in the following screenshot, here is the XML layout that I found from Android OS source code.

<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<!-- OK confirm and cancel buttons.  -->
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:divider="?android:attr/dividerHorizontal"
        android:showDividers="beginning"
        android:paddingTop="16dip">

    <LinearLayout
            style="?android:attr/buttonBarStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:measureWithLargestChild="true">

        <LinearLayout android:id="@+id/leftSpacer"
                android:layout_weight="0.25"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:visibility="gone" />

        <Button android:id="@+id/cancel_button"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:layout_weight="1"
                android:text="@string/cancel"
                android:maxLines="2"
                style="?android:attr/buttonBarButtonStyle" />

        <Button android:id="@+id/ok_button"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:layout_weight="1"
                android:text="@string/install"
                android:maxLines="2"
                android:filterTouchesWhenObscured="true"
                style="?android:attr/buttonBarButtonStyle" />

        <LinearLayout android:id="@+id/rightSpacer"
                android:layout_width="0dip"
                android:layout_weight="0.25"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:visibility="gone" />

    </LinearLayout>
</LinearLayout>

Answer 2

If you would like to do it across all device (and versions of android) you basically want a button with no background or a solid background with borders on the top and bottom.

The only way to add borders properly in Android is to use the tool that comes with the Android SDK or ADT called draw9patch. It's a simple little tool that will get the job done. If you need help with actually using it, your best bet is to search for a YouTube video as it may be difficult to use the first time.

Draw 9-patch

Answer 3

Have been playing around a little regarding this question. Did a solution based on linearLayouts with 1dp views as dividers and transparent background to get the minimalism look on the buttons.

We want the buttons to change apperance depending on the state of the button. (More on this here hello form stuff tutorial). We change the background color so that the user get an indication when pressing the button.

borderless_background.xml (goes in the drawable folder)

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

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#33b5e5" />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape>
            <solid android:color="#0099cc" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

</selector>

The main.xml will then use borderless_background file, see the android:background tag for the buttons in the following code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="8dp"
    android:orientation="vertical"
>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:layout_weight="1.0"
        android:textSize="14sp"
        android:text="@string/borderless" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:textSize="12sp"
        android:autoLink="web"
        android:text="@string/source1" />

    <View
        android:id="@+id/horizontal_divider1"
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_weight="1.0"
            android:background="@drawable/borderless_background"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:text="Cancel"
            android:onClick="cancel" />

        <View
            android:id="@+id/vertical_divider"
            android:layout_width="1dip"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:layout_height="fill_parent"
            android:background="@android:color/darker_gray" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_weight="1.0"
            android:background="@drawable/borderless_background"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:text="Next"
            android:onClick="next" />
    </LinearLayout>

    <View
        android:id="@+id/horizontal_divider2"
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

</LinearLayout>

There are warnings regarding performance because of the nested linear layuots but thing run fine on the tablet I tested on so me too lazy for fixing this. A fix would probably be based on relative layout or grid layout.

Answer 4

I've found a very simple solution that:

• adds transparent icons
• has a horizontal top border
• has a vertical divider between each button
• has no bottom border

Source: https://gist.github.com/2373644

Content:

<!--
  A button bar is a set of buttons at the bottom of an activity.
  An example is an AlertDialog with OK/Cancel buttons.

  Note that something similar can be accomplished using a
  split action bar and text-only action buttons, but this is an
  alternate presentation that's often preferred.
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="?android:attr/dividerHorizontal"
    android:showDividers="middle">

    <TextView android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Hello World" />

    <LinearLayout style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="One" />

        <Button style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Two" />
    </LinearLayout>
</LinearLayout>