Daniel
Daniel

Reputation: 108

Android custom multiple textviews

I want to make something like image below, multiple TextView where the view goes to next line if it doesn't fit in the last line. enter image description here

Does anybody have a suggestion how to achieve something like this?

Upvotes: 1

Views: 71

Answers (4)

maulik panchal
maulik panchal

Reputation: 116

//Flex Layout for Custom layouts

implementation 'com.google.android:flexbox:2.0.0'

Use this library for this layout design.

You can create chips using XML code as well as programmatically.

var chip: Chip = Chip(this)
        chip.setText(name)
        chip.setTextColor(ContextCompat.getColor(this, R.color.colorPrimaryDark))

        val typeface =
            ResourcesCompat.getFont(
                this,
                R.font.lato_semibold
            )
        chip.setTypeface(typeface)
        chip.chipBackgroundColor = ColorStateList.valueOf(
            ContextCompat.getColor(
                this,
                R.color.color_skyblue
            )
        )

        chip.setPadding(Global.dpToPx(this, 15f), 0, Global.dpToPx(this, 15f), 0)

        chip.chipCornerRadius = 40f

        var param: LinearLayout.LayoutParams? =
            LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
            )
        chip.layoutParams = param

        flexLayoutSkills.addView(chip)

Upvotes: 0

Vikalp Vashisth
Vikalp Vashisth

Reputation: 246

You can use FlowLayout. Check this :- https://github.com/nex3z/FlowLayout

It also supports RTL layout

Upvotes: 2

Grela
Grela

Reputation: 106

The image you are showing is a ChipGroup with chips, not textviews. If you want to implement what you are seeing there, just create a chipgroup and add as many chips as you need, they will be set automatically on the screen.

Upvotes: 0

snachmsm
snachmsm

Reputation: 19223

afaik there is no solution in Android SDK for such behavior, but you may write this by own (measuring text, if not fitting place View in next row). its not an easy task, so I would recommend FlexBox lib

Upvotes: 1

Related Questions