How to implement a stackoverflow like tag in android textview?

Question

Im developing a food order app where in users select the desired toppings from a listview.

I want the selected items to be displayed in a stackoverflow like popular tags fashion.

In the pic, I have selected java,C# and android in stackoverflow app and they are displayed as independent boxed items.

I want to achieve the same string box without the X .

I have a textview on which I tried adding them as independent items,but not sure how to achieve it.

Any help will be really useful.

please add your code to understand what you have done so far. — Sajith, May 16 '19 at 09:26
you can create one text view in , this textview dynamically add in linear layout. text view width is wrapcontent, then you will get required output — Hitesh Tarbundiya, May 16 '19 at 09:27
Please turn to the [help] to learn how/what to ask here. Just dropping requirements "this is what I want" isn't appreciated. When you try something yourself, and you get stuck with a specific problem, we will gladly help. But please understand that this place is not intended to give guidance with the possibly many steps required to get you from your vision to a working program. — GhostCat, May 16 '19 at 09:27
Also see https://meta.stackoverflow.com/questions/284236/why-is-can-someone-help-me-not-an-actual-question please! — GhostCat, May 16 '19 at 09:28
Sorry guys, I wasn't able upload image before , so fortunately edit option worked now... — adi, May 16 '19 at 09:30
You can go with android new material `Chips` view. check out [this](https://medium.com/material-design-in-action/chips-material-components-for-android-46001664a40f) — Mehul Solanki, May 16 '19 at 09:32
@Hitesh, I tried adding dynamic textviews , but if user adds more toppings (say 10) then ,it might not look that good right? — adi, May 16 '19 at 09:32
@MehulSolanki so is this feature called a chip?, I didn't knew how to ask this! — adi, May 16 '19 at 09:35
Yes this is called `Chip` here is [official doc](https://material.io/develop/android/components/chip/). also, you can refer [blog](https://www.truiton.com/2018/10/android-chips-example-material-design/) — Mehul Solanki, May 16 '19 at 09:37
@GhostCat I can understand from your end.Moreover I tried myself using dynamic textviews and I can't achieve it , so asked.Im just a beginner and a budding developer unlike you.Downvoting is easy but gaining reputation is challeging for me.I came here with a query and a small guidance.Thank you ! — adi, May 16 '19 at 09:40

score 1 · Accepted Answer · answered May 16 '19 at 09:46

Best way to build using Chip, check below some code snippet.

Add below code in your .xml

<com.google.android.material.chip.ChipGroup
    android:id="@+id/filter_chip_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/filter_chip_txt">

    <com.google.android.material.chip.Chip
        android:id="@+id/filter_chip"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:text="Dogs"/>

    <com.google.android.material.chip.Chip
        android:id="@+id/filter_chip2"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:text="Cats"/>
</com.google.android.material.chip.ChipGroup>

inside your .java

 ChipGroup filterChipGroup = findViewById(R.id.filter_chip_group);
    Chip filterChip = findViewById(R.id.filter_chip);
    Chip filterChip2 = findViewById(R.id.filter_chip2);
    CompoundButton.OnCheckedChangeListener filterChipListener = new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            Log.i(TAG, buttonView.getId() + "");
        }
    };
    filterChip.setOnCheckedChangeListener(filterChipListener);
    filterChip2.setOnCheckedChangeListener(filterChipListener);

I hope this will help to achive what you expect.

Thanks man!!, Just a small doubt , how to make sure that the margin we add in the layouts remains the same in all the devices?, say marginTop = 200dp, in different devices , the UI looks different!, any idea on this pls? — adi, May 16 '19 at 11:02
This is an uncertain situation where all device has different resolution, but check out [this](https://stackoverflow.com/questions/51710777/how-to-position-the-view-with-margin-that-will-look-same-for-all-devices), May that will help you — Mehul Solanki, May 16 '19 at 11:06
Thanks dude!!, one question on chips, is there a way I can bring all chips to the right with less gap between them? — adi, May 16 '19 at 15:47
Could you have a look at this link:https://stackoverflow.com/questions/56174608/how-to-align-android-chips-to-the-end-in-chipgroup — adi, May 17 '19 at 01:33

How to implement a stackoverflow like tag in android textview?

1 Answers1