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.
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>
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.
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.
I've found a very simple solution that:
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>
