Let one word always come above another word in the TextView
I have an application that is a collection of Christian youth songs and now I want to add chords. So, let's say I have the following line in my .txt file:
D G D
Amazing grace! How sweet the sound
This always happens when a line doesn't fit on the screen:
D
G D
Amazing grace!
How sweet the sound
I want this to happen:
D
Amazing grace!
G D
How sweet the sound!
Sorry for not understanding, I really hope this made sense. I've seen other apps do this, but I don't know how.
Edit:
I have my songs structured like this:
[chords for phrase]
[phrase]
source to share
Matt gave a great explanation of how your data should be structured. I'll just add the implementation details.
Assuming the input is in the following format:
[ChordName]
[Phrase for the chord]
You can use horizontal RecyclerView
to display data. The layout for each item would look like
<LinearLayout
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_chord_name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/tv_phrase"/>
</LinearLayout>
I've added a few attributes to demonstrate the structure. You can use the layout_gravity="center_horizontal"
first text view to center the alignment of the chord name with the lyrics.
The way it works is since the width is LinearLayout
set to wrap_content
, which means it will be the same as the length of the longest child, which will be the second TextView in your case.
It layout_gravity="center_horizontal"
will now automatically center the first one TextView
based on the length LinearLayout
, which is exactly what you need. So there is no need to add spaces to align content
source to share
I am a little confused about your current text file and their format. I understand your required behavior. Your implementation will have to use chord and lyric separation to affect the wrapping. Therefore, it is necessary to distinguish between chords and lyrics. I will focus on logic and design rather than concrete implementation of my possible solutions. Please comment with further considerations.
Problematic format:
[----1st phrase chords----][----1st phrase lyrics----][----2nd phrase chords----][----2nd phrase lyrics----]
If so, you might be in trouble as you won't be able to find out where the text starts when your first chord line is full. For example, see below pseudocode:
String textFile = //your song
while textFile has characters left
fill a line of the TextView with chords
fill the next line of the TextView with the associated lyrics
endwhile
The second line inside while-loop
cannot be executed as you don't know where the texts start. You may have to manually adjust the files in the second design format, as they were probably placed manually to fit that format (if that format).
Fixed formats:
These formats confirm and eliminate the problem of logical separation of chords and lyrics. One format:
[----1st phrase chords----]
[----1st phrase lyrics----]
[----2nd phrase chords----]
[----2nd phrase lyrics----]
where would you read each line into separate lines, or another with two separate files:
chords.txt:
[----1st phrase chords----]
[----2nd phrase chords----]
lyrics.txt:
[----1st phrase lyrics----]
[----2nd phrase lyrics----]
I say text files, but it could be data received via a network request, etc.
Once you split your chords and lyrics, there TextViews
might be more of an Android solution for it, but I have two ideas to work with.
The first workaround is to calculate the number of characters that match one line of your TextViews and split the text accordingly. I.e:.
Discover a line of the TextView holds X monospaced characters
While the chords and lyrics aren't exhausted
Fill a new TextView line with X characters of chords
Fill a new TextView with X characters of lyrics
Endwhile
Another possible work might be using two TextViews
double (or more) line spacing and stacking them on top of each other. You can have one accompaniment TextView
, and the second is lyrics, and an extra line at the top of the text. Here's my attempt at illustration:
. First TextView below Second TextView
[----1st phrase chords ----] [----Whitespace added manually ----]
[----Line-spacing whitespace----] [----1st phrase lyrics ----]
[----2nd phrase chords ----] [----Line-spacing whitespace ----]
[----Line-spacing whitespace----] [----2nd phrase lyrics ----]
An important consideration:
You will need a monospaced font . This will mean that all characters are the same width. Otherwise, specific characters will affect the numeric value in each line.
source to share