ListView or LinearLayout - creating Buttons dynamically

Question

When a user enters a word, it creates Buttons - one Button per letter of the word:

Illustration:

If the user enters "so" it creates 2 Buttons - 's', 'o'

If the user enters "make" it creates 4 Buttons - 'm', 'a', 'k', 'e'

I was having a hard time deciding how I should design this. Ultimately I decided to do the following: Each word is added to a vertical LinearLayout. And for each word, each letter is added to a horizontal LinearLayout. So it's a LinearLayout within a LinearLayout approach.

Here's the code I created which works:

     //creates words dynamically
     public void makeNewWord(LinearLayout ll, View v, EditText e){

        //the horizontal linear layout
        LinearLayout linearLayout2 = new LinearLayout(v.getContext());
        linearLayout2.setOrientation(LinearLayout.HORIZONTAL);

        //the parameters for the horizontal linear layout                  
        LinearLayout.LayoutParams rlp = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);    

        //e is the user input 
        int size = e.getText().toString().length();

        for (int i=0; i<size; i++){
             final Button dynamicButtons = new Button(v.getContext());
             dynamicButtons.setLayoutParams(rlp);

             //add the buttons to the horizontal linear layout 
             linearLayout2.addView(dynamicButtons, rlp);  
        }

        // ll is the vertical linear layout which I created in xml
        // so for each entered word, I am adding horizontal linear layouts to my vertical layout
        ll.addView(linearLayout2, 0);
    }

But now I realized it's probably more efficient using a ListView, especially since I want to make the list of words to be expandable and collapsible. But Is it possible to create the above illustration using a ListView? How would I go about doing so?

I tried creating an ArrayAdapter as follows: ArrayAdapter<LinearLayout> adapter = new ArrayAdapter<LinearLayout>(this, R.id.listview). So basically it would be a ListView of horizontal LinearLayouts. Or should I make an ArrayAdapter of Buttons instead? What is the correct approach?

I think the simple answer is no. You can't so that with a list view, because once you write a custom adapter you need to have a list item view for it to take as a parameter. That list item view is static - usually done with an XML file. I think it would be much easier to just implement a way of making the screen scroll manually with what you have - which is really not that difficult at all! — Sam Redway, Dec 16 '14 at 00:49
Scrollable is easy. But I want my list of words to be collapsible and expandable too. And I heard it's possible to create an expandable ListView. -- I edited the above post to not include the comment about scrolling. I left in the part about expanding and collapsing since that is the most important part — user2456977, Dec 16 '14 at 00:50

score 0 · Answer 1 · edited May 23 '17 at 12:30

You can use a TableLayout for this.

test.xml

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <TableLayout
        android:id="@+id/table_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </TableLayout>

</ScrollView>

Activity Code

private TableLayout tableLayout;
private HashMap<String, TableRow> tableRows;

@Override
public void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.test);
    super.onCreate(savedInstanceState);

    tableLayout = (TableLayout) findViewById(R.id.table_layout);
    tableRows = new HashMap<String, TableRow>();
}

public void addWord(String word) {
    if (!tableRows.containsKey(word)) {
        TableRow tableRow = new TableRow(this);

        for (int i = 0; i < word.length(); i++) {
            String letter = String.valueOf(word.charAt(i));

            Button btnLetter = new Button(this);
            btnLetter.setText(letter);
            tableRow.addView(btnLetter);
        }

        tableRows.put(word, tableRow);
        tableLayout.addView(tableRow);
    }
}

public void removeWord(String word) {
    TableRow tableRow = tableRows.remove(word);

    if (tableRow != null) {
        tableLayout.removeView(tableRow);
    }
}

public void showWord(String word) {
    TableRow tableRow = tableRows.get(word);

    if (tableRow != null) {
        tableRow.setVisibility(View.VISIBLE);
    }
}

public void hideWord(String word) {
    TableRow tableRow = tableRows.get(word);

    if (tableRow != null) {
        tableRow.setVisibility(View.GONE);
    }
}

Assuming you want a specific button setup, you can inflate an xml button layout dynamically. See here for details.

score 0 · Answer 2 · answered Dec 16 '14 at 05:04

0

I can give some idea you can transform this idea in code

     1. onTextChanged() method try to get length of text.
     2. If you able to get text length then by subString() method get last entered text
     3. Then recreate new button instance

answered Dec 16 '14 at 05:04

DJhon

1,548
3
22
39

score 0 · Answer 3 · answered Dec 16 '14 at 06:32

I would just use a horizontal list view per word. I you want to be fancy you create a custom layout manager and the new RecyclerView.

Each character of your word would be then a item in your list view. The layout then could be simply a button.

class ListAdapter extends BaseAdapter {

    private final Context fContext;
    private String mWord;

    public ListAdapter(Context context) {
        fContext = context;

    }

    public void updateWord(String word) {
        mWord = word;
        notifyDataSetChanged();
    }

    @Override
    public int getCount() {
        return mWord == null ? 0 : mWord.length();
    }

    @Override
    public String getItem(int position) {
        return String.valueOf(mWord.charAt(position));
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Button button;
        if (convertView == null) {
            button = new Button(parent.getContext());

            LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
            button.setLayoutParams(params);
        } else {
            button = (Button) convertView;
        }
        button.setText(getItem(position));
        return button;
    }
}

On every text change you can then just update the list.

adapter.updateWord();

Be aware the code is just out of my head and i haven't tested this, but should be enough to give you and idea.

ListView or LinearLayout - creating Buttons dynamically

3 Answers3