Android 标题下划线 选中效果

这是一个 基于 RadioGroup 和 shape 画图 实现 的 标题 下滑线 选中效果。

项目下载 地址

点击打开链接

效果图

首先 在 资源文件 colors 中  定义几个颜色 默认的下划线，选中的下划线 ，以及选中的阴影

 

<!--白色  标题 背景-->
<color name="colorBackground">#ffffff</color>
<!--蓝色  选中下划线 -->
<color name="colorLineChoosed">#33B5E5</color>
<!--半透明蓝色  选中下划线 阴影-->
<color name="colorLineChoosedShadow">#8833B5E5</color>
<!--灰色  未选中下划线 -->
<color name="colorLineDefault">#FFAAAAAA</color>

在drawable 中 新建 layer-list 可以实现 shape 一层层的覆盖

选中背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 连框颜色值 -->
    <item>
        <shape>
            <solid android:color="@color/colorLineDefault"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/colorLineChoosedShadow"/>
       </shape>
    </item>

    <!--上面 为 设置 阴影 效果-->

    <!-- 选中 显示 的 颜色-->
    <item
        android:bottom="3dp">
       <shape>
            <solid android:color="@color/colorLineChoosed"/>
       </shape>
    </item>

    <item
        android:bottom="7dp">
        <shape>
            <solid android:color="@color/colorBackground"/>
        </shape>
    </item>
</layer-list>

未选中背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 连框颜色值 -->
    <item>
        <shape>
            <solid android:color="@color/colorLineDefault"/>
        </shape>
    </item>


    <!-- 主体背景颜色值 -->
    <item
        android:bottom="3dp">
        <shape>
            <solid android:color="@color/colorBackground"/>
        </shape>
    </item>
</layer-list>

布局中 调用

<?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:orientation="vertical">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="@drawable/background_radiobutton_underline_gray"
        android:checkedButton="@+id/checkButton"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/checkButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/selector_background_underline"
            android:button="@null"
            android:gravity="center"
            android:padding="20dp"
            android:text="sdf"/>

        <View
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="#ff464646"/>


        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/selector_background_underline"
            android:button="@null"
            android:gravity="center"
            android:padding="20dp"
            android:text="sdf"/>
    </RadioGroup>

</LinearLayout>

效果图

   

项目下载 地址

点击打开链接