Segmented control in Android

I have achieved it using build in Views.

MySegmentActivity

public class SegmentActivity extends AppCompatActivity implements View.OnClickListener {

    private Context mContext;
    private List<Button> buttonList = null;

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

        mContext = SegmentActivity.this;
        initSegmentButtons();
    }

    private void initSegmentButtons() {

        buttonList = new ArrayList<>();

        Button dayBtn = (Button) findViewById(R.id.btn_day);
        Button weekBtn = (Button) findViewById(R.id.btn_week);
        Button monthBtn = (Button) findViewById(R.id.btn_month);

        dayBtn.setOnClickListener(this);
        weekBtn.setOnClickListener(this);
        monthBtn.setOnClickListener(this);

        buttonList.add(dayBtn);
        buttonList.add(weekBtn);
        buttonList.add(monthBtn);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_day:
                buttonList.get(0).setBackgroundResource(R.drawable.btn_bg_orange_selected);
                buttonList.get(1).setBackgroundResource(R.drawable.btn_bg_orange);
                buttonList.get(2).setBackgroundResource(R.drawable.btn_bg_orange);
                break;
            case R.id.btn_week:
                buttonList.get(0).setBackgroundResource(R.drawable.btn_bg_orange);
                buttonList.get(1).setBackgroundResource(R.drawable.btn_bg_orange_selected);
                buttonList.get(2).setBackgroundResource(R.drawable.btn_bg_orange);
                break;
            case R.id.btn_month:
                buttonList.get(0).setBackgroundResource(R.drawable.btn_bg_orange);
                buttonList.get(1).setBackgroundResource(R.drawable.btn_bg_orange);
                buttonList.get(2).setBackgroundResource(R.drawable.btn_bg_orange_selected);
                break;
            default:
                break;
        }
    }
}

layout.

<?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="wrap_content"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btn_day"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/btn_bg_orange"
        android:gravity="center"
        android:text="Day"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_week"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="-1dp"
        android:layout_marginRight="-1dp"
        android:layout_weight="1"
        android:background="@drawable/btn_bg_orange"
        android:gravity="center"
        android:text="Week"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_month"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/btn_bg_orange_selected"
        android:gravity="center"
        android:text="Month"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</LinearLayout>

btn_bg_orange.xml

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

    <stroke
        android:width="1dp"
        android:color="@color/orange" />

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

btn_bg_orange_selected

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

    <stroke
        android:width="1dp"
        android:color="@color/orange" />

    <solid android:color="@color/orange" />
</shape>

What you are looking for is MaterialButtonToggleGroup, and you can put in some Material Button. It is pretty similar to iOS UISegmentContorol.

It looks like this: enter image description here

source with example: https://material.io/develop/android/components/buttons#toggle-button

Tags:

Android