如何使用3个视图而不是9个视图实现此布局？

Question

I have this layout currently implemented HERE and uses 9 Views just for the Buttons at the top + bottom and the TextView in the center. For making this with 3 Views, here is what I understand, we need a LinearLayout horizontal that has the 3 TextViews and they need to use Drawable Tops and Bottoms, the problem is as per the GIF, notice how the top background + icon changes at the same time, I wrote a selector that combines a layer list but it doesn't work.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@android:color/transparent"/>
                </shape>
            </item>
            <item>
                <bitmap
                    android:gravity="center"
                    android:src="@drawable/ic_menu_down_colored"/>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@color/purple"/>
                </shape>
            </item>
            <item>
                <bitmap
                    android:gravity="center"
                    android:src="@drawable/ic_menu_down_transparent"/>
            </item>
        </layer-list>
    </item>
</selector>

Any ideas and suggestions on how to achieve this with a compound drawable created in XML or code is highly appreciated

Answer 1

There are similar but slightly different implementations on this post . One of these may help you achieve what you've stated in the question.