Android text view with chip type selectable boxes

Question

In my application I am making a search field some what similar to a filter. So I want to achieve my search page some what similar to this Image. I tried to search for it but could not find what are such scrooling text views with selectable boxes called and after selection the below box with remove sign which type of layout is that? Please help me with what kind of layout is this and any library for such thing and what are they called.

Thanks

Answer 1

I understand that you want to create the checkboxes with your own style. You can achieve this with a few XML definitions. Check the code I am using in one app:

Firstly, define the checkbox:

<CheckBox
    android:id="@+id/btn_team_home"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_weight="0.4"
    android:background="@drawable/selector_match_team"
    android:button="@null"
    android:ellipsize="end"
    android:gravity="center"
    android:maxLines="2"
    android:minLines="2"
    android:textColor="@color/selector_btn_matches_text"/>

The most important attribute here is "android:background"

The background attribute contains a selector that specifies how the view reacts to different events. You can see the code for the res/drawable/selector_match_team below. Also don't forget to set android:button="@null". Other attributes in my checkbox definition are not important for your case.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_checked="true">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/btn_match_radius"/>
        <!--<stroke-->
        <!--android:width="1dip"-->
        <!--android:color="@color/match_picker_match_border_checked"/>-->
        <gradient
            android:endColor="@color/match_picker_match_bg_checked"
            android:startColor="@color/match_picker_match_bg_checked"/>
    </shape>
</item>

<item
    android:state_checked="false">
    <shape android:shape="rectangle">
        <corners
            android:radius="@dimen/btn_match_radius"/>
        <!--<stroke-->
        <!--android:width="1dip"-->
        <!--android:color="@color/match_picker_match_border_unchecked"/>-->
        <gradient
            android:endColor="@color/match_picker_match_bg_unchecked"
            android:startColor="@color/match_picker_match_bg_unchecked"/>
    </shape>
</item>

Here you can see that the first item is a background for the state "checked". It contains the rectangle shape with rounded corners and background color (gradient attribute). In your case, the commented "stroke" should apply since you want the border around your buttons. The colors and dimensions are not important, so I am not specifying them here.

Since your base view is already a checkbox and you implemented your own selector, you don't have to code anything by hand to handle the background/check states.

Answer 2

UPDATE

check this https://github.com/whilu/AndroidTagView

A TagView library for Android. Customize your own & Drag effect.

build.gradle file.

dependencies {
    compile 'co.lujun:androidtagview:1.0.3'
}