Button with two colors on each side

Question

is it possible to make a custom button with this kind of color scheme where one color on the right side and the other one on the left side?

On my previous search, I've only able to found how to make the button gradient, which is not the kind of color that I needed

is it possible to make the button two colors side by side based on the sample I gave?

in the left side you can use `android:drawableLeft="@drawable/ic_gift"` — BOUTERBIAT Oualid, Jun 20 '16 at 11:06
you simply can use a layerList and do this stuff as an xml layout. Simple example, see answer here: http://stackoverflow.com/questions/8780119/android-button-with-two-background-colors — Opiatefuchs, Jun 20 '16 at 11:43

score 0 · Accepted Answer · answered Jun 20 '16 at 12:30

You could do it in more sophisticated way using LinearLayout as a button. The simple example:

XML file with the LinearLayout button:

<LinearLayout android:id="@+id/sophisticated_button"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="150dp">

    <LinearLayout
        android:background="#333333"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1">

        <ImageView
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:src="@drawable/present"/>

    </LinearLayout>

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:gravity="center"
        android:text="SEND A GIFT \n TO A FRIEND"/>

</LinearLayout>

where present represents the Image located in your drawable directory.

The Activity where the button is located looks like this:

public class MainActivity extends Activity implements View.OnClickListener {

    private LinearLayout buttonLinearLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.skuska);

        buttonLinearLayout = (LinearLayout)findViewById(R.id.sophisticated_button);
        buttonLinearLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.sophisticated_button:
                Toast.makeText(getApplicationContext(), "Sophisticated Button Pressed", Toast.LENGTH_LONG).show();
                break;
        }
    }
}

And the output:

it worked for me, i can continue my work now that the problem is solved, thank you it working great — Winardi Susanto, Jun 21 '16 at 01:46

score 0 · Answer 2 · answered Jun 20 '16 at 13:48

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:background="@drawable/dialog_rounded"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="SUCCESS"
        android:textColor="@color/primaryTextColor"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/dialog_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:textColor="@color/secondaryTextColor"
        android:textSize="17sp"
        android:textStyle="normal" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:weightSum="2">

        <Button
            android:id="@+id/dialog_action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/yes"
            android:textAllCaps="false"
            android:background="@drawable/button_proceed"
            android:textColor="@color/whiteColor"
            android:textSize="20sp"
            android:layout_marginRight="10dp"
            android:textStyle="bold"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/dialog_action_no"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/no"
            android:textAllCaps="false"
            android:background="@drawable/color_red_reject"
            android:textColor="@color/whiteColor"
            android:textSize="20sp"
            android:textStyle="bold"
            android:layout_weight="1"/>


    </LinearLayout>

</LinearLayout>

Button with two colors on each side

2 Answers2