How to Style Button

Question

I am looking for a way to style my button like an example from an older question (How to create standard Borderless buttons (like in the design guidline mentioned)?) but some things were left out from the answer.

How can I add more than one value to an XML element, particularly android:background ="";?

I figured out how to make my buttons borderless, but I want them to have a really thin border, and a different background color. I have seen lots of tips online, but I can't find a way to put all my items together properly in code. Below is a copy pasted image with the top part representing the layout I want to achieve with the button name and a thumbnail image on the right hand side on the button with the button being a different color then the background of the app, and below that is a copy pasted image of the border style I'm trying to achieve, thin, touching borders between buttons. I have looked everywhere and tried many ideas but none seem to work properly, or some require me to have

android:background="?android:attr/selectableItemBackground"

but this interacts with

android:background="#22272D"

I need to keep the text in the button because my app is going to translate the buttons text to the language of the users phone, so I can't make the whole button just an image. Below is my XML and the output, any recommendations to how I should change it would be of massive help!

<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:weightSum="6"
tools:context="com.aid.travelers.myapplication.Transportation">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/transportation_page"
        android:textSize="40sp"
        android:textColor="#000000"/>

    <Button
        android:layout_width="match_parent"
        android:text="@string/airport"
        android:id="@+id/AirportButton"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:background="?android:attr/selectableItemBackground"/>

  <Button
        android:layout_width="match_parent"
        android:text="@string/bicycle"
        android:id="@+id/BicycleButton"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:background="?android:attr/selectableItemBackground"/>

score 0 · Accepted Answer · edited May 23 '17 at 10:30

I'm not sure that I get your question, but I guess you want to custom the background of your button, and have a touch effect when you press it.

Have a look at this answer : https://stackoverflow.com/a/7176006/5446285

You should create your own resource file background.xml (for example) that you create in your drawable folder. The code should be like :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@drawable/background_selected"/> <!-- pressed -->
    <item android:drawable="@drawable/background_unselected" /> <!-- default -->
</selector>

You should now create 2 other files in your drawable folder : background_selected.xml, and background_unselected.xml. To do so, I advise you something like this if you want a thin border :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#7c7c7c" />
    </shape>
</item>
<item android:bottom="2dp" android:top="2dp" android:right="2dp" android:left="2dp">
    <shape android:shape="rectangle" >
        <solid android:color="#a0a0a0" />
    </shape>
</item>

Then you set the background of your button in your xml :

android:background="@drawable/background"

This was exactly perfect, thank you so much for your time, it worked great! — Michael Voulgaris, Jun 27 '16 at 18:18

How to Style Button

1 Answers1