I tried to create a scrollable list of 3 TextViews for a row.
Like you have mentioned, we can use a RecyclerView as the scrollable list.
activity_main.xml
<ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ConstraintLayout>
For a list item to have 3 TextViews in a row, I used a GridLayout as follows.
list_item.xml
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
android:rowCount="1" >
<TextView
android:id="@+id/trackNumber"
android:layout_columnWeight="1"
android:layout_width="0dp"
android:background="@android:color/holo_red_light" />
<TextView
android:id="@+id/trackTitle"
android:layout_columnWeight="6"
android:layout_width="0dp"
android:ellipsize="end"
android:background="@android:color/holo_green_light" />
<TextView
android:id="@+id/trackDuration"
android:layout_columnWeight="1"
android:layout_width="0dp"
android:background="@android:color/holo_blue_light" />
</GridLayout>
For each TextView a layout_columnWeight value is set to specify the relative proportion of horizontal space that should be allocated for it.
Each TextView's layout_width value is set to 0dp for it to take full width of the allocated space.
But instead of GridLayout, we can use a ConstraintLayout and achieve the same result.
As mentioned above in the question, GridLayout is marked as legacy.
It better to use ConstraintLayout.
list_item.xml
<ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/trackNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
android:background="@android:color/holo_red_light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/trackTitle"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/trackTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="6"
android:ellipsize="end"
android:background="@android:color/holo_green_light"
app:layout_constraintStart_toEndOf="@id/trackNumber"
app:layout_constraintEnd_toStartOf="@id/trackDuration"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/trackDuration"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
android:background="@android:color/holo_blue_light"
app:layout_constraintStart_toEndOf="@id/trackTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</ConstraintLayout>
For each TextView a layout_constraintHorizontal_weight value is set to specify the relative proportion of horizontal space that should be allocated for it.
Each TextView's layout_width value is set to 0dp for it to take full width of the allocated space.
This is just a Kotlin class to store track information.
class TrackInfo(
var trackNumber: Int,
var trackTitle: String?,
var durationMinutes: Short,
var durationSeconds: Short
)
This is the Adapter class and ViewHolder class for the RecyclerView.
class TrackInfoAdapter(private val items: List<TrackInfo>, private val mContext: Context) :
RecyclerView.Adapter<ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
return ViewHolder(
LayoutInflater.from(mContext).inflate(R.layout.list_item, parent, false)
)
}
override fun getItemCount() = items.size
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val trackInfo = items[position]
holder.trackNumber.text = trackInfo.trackNumber.toString()
holder.trackTitle.text = trackInfo.trackTitle
// Use String.format() to add leading zero for single digit durationSeconds value
val formattedDurationSeconds = "%02d".format(trackInfo.durationSeconds)
holder.trackDuration.text = "${trackInfo.durationMinutes}:$formattedDurationSeconds"
}
}
class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val trackNumber = view.trackNumber
val trackTitle = view.trackTitle
val trackDuration = view.trackDuration
}
This is the MainActivity.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Prepare list of track information
val trackInfoList = mutableListOf<TrackInfo>().apply {
// track 1
add(
TrackInfo(1, "Lady GaGa - Poker Face",
4, 4)
)
// track 2
add(
TrackInfo(2, "T.I. featuring Rihanna - Live Your Life",
4, 1)
)
// track 3
add(
TrackInfo(3, "Kanye West - Stronger",
5, 11)
)
// track 4
add(
TrackInfo(4, "Leon Haywood - I Wanna Do Something Freaky To You",
6, 0)
)
// track 5
add(
TrackInfo(5, "Hilary Duff - Reach Out",
4, 16)
)
}
recyclerView.layoutManager = LinearLayoutManager(baseContext)
// Set track information list to Adapter of RecyclerView
recyclerView.adapter = TrackInfoAdapter(trackInfoList, baseContext)
}
}
Result :
I hope this answers the first part of your question.
You have mentioned about 'stretching over above the duration textview, when there's a particular track without a title'.
For that, children of a GridLayout can be configured to span multiple cells using android:layout_columnSpan attribute.
But to handle trackTitle null cases and set properties like layout_columnSpan of TextViews accordingly, I think it would be better to write a custom view class for list item.
