Yohan D Yohan D - 3 months ago 9
Android Question

Creating an android custom view : a line with buttons on it

I would like to create this component:
enter image description here

It is supposed to show different steps of a workflow.
Every spot should be clickable to go to another step and the circle shows which current step is selected.

I was thinking of a LinearLayout with Buttons and a View for the line but I don't know how to make the line to cross the buttons.

I'm looking for a simple way to do this without extending directly from View and drawing it completely.

Answer

A simple way that you can achieve this is using a RelativeLayout.

Example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="280dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginRight="5dp"
        android:layout_marginLeft="5dp"
        android:background="@android:color/darker_gray"
        android:layout_centerVertical="true"/>

    <Button
        android:id="@+id/b1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:text="b1" />

    <Button
        android:id="@+id/b2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/b1"
        android:text="b2" />

    <Button
        android:id="@+id/b3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/b2"
        android:text="b3" />

    <Button
        android:id="@+id/b4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/b3"
        android:text="b4" />

    <Button
        android:id="@+id/b5"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/b4"
        android:text="b5" />
</RelativeLayout>

Don't forget to change the ButtonView for what you desire