How to sort the views added dynamically

Question

I have this master view where I have a TableLayout to which I add new views programmatically. The master view is given below (masterLayout.xml)

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayoutActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:padding="5dp"
android:stretchColumns="*">

<TableRow
    android:id="@+id/tableRow3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:weightSum="2">

    <ScrollView
        android:id="@+id/queryScrollView"
        android:layout_width="match_parent"
        android:layout_span="2"
        android:padding="5dp">


        <TableLayout
            android:id="@+id/queryTableLayoutActivity"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:stretchColumns="*"></TableLayout>
    </ScrollView>
</TableRow>

In the above view I add new views to queryTableLayoutActivity Layout. The layout to be added is given below (childLayout.xml)

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/border"
        android:orientation="vertical"
        tools:context="com.teamtreehouse.oslist.ClassActivity">

        <TextView
            android:id="@+id/activeClassActivities"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="top|center_horizontal"
            android:text="Active Class Activities"
            android:textSize="18dp"
            android:textStyle="bold"
            android:visibility="gone" />

        <TextView
            android:id="@+id/classNameActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size"
            android:layout_below="@+id/editClassActivity"
            android:layout_alignRight="@+id/deleteActivity"
            android:layout_alignEnd="@+id/deleteActivity" />

        <TextView
            android:id="@+id/courseNumberActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/classNameActivity"
            android:layout_below="@id/classNameActivity"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size" />

        <TextView
            android:id="@+id/typeActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/classNameActivity"
            android:layout_below="@id/courseNumberActivity"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size" />

        <TextView
            android:id="@+id/nameActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/classNameActivity"
            android:layout_below="@id/typeActivity"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size" />

        <TextView
            android:id="@+id/dueDateActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/classNameActivity"
            android:layout_below="@id/nameActivity"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size" />

        <TextView
            android:id="@+id/descriptionActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/classNameActivity"
            android:layout_below="@id/dueDateActivity"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size" />

        <TextView
            android:id="@+id/maxGradeActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/classNameActivity"
            android:layout_below="@id/descriptionActivity"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size" />

        <TextView
            android:id="@+id/enterGradeActivity"
            android:layout_width="@dimen/abc_action_bar_stacked_tab_max_width"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/classNameActivity"
            android:layout_below="@id/maxGradeActivity"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="#ccc"
            android:textColor="#000"
            android:textSize="@dimen/text_size" />

        <Button
            android:id="@+id/editClassActivity"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:textStyle="bold"
            android:layout_height="25dp"
            android:background="@drawable/icon_document_edit"
            android:onClick="editListener"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignBottom="@+id/deleteActivity" />

        <Button
            android:id="@+id/deleteActivity"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:textStyle="bold"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_document_delete"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:onClick="deleteActivities"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Class Name :"
            android:id="@+id/classNameDisplay"
            android:textStyle="bold"
            android:layout_alignTop="@+id/classNameActivity"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_above="@+id/courseNumberActivity" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Course ID :"
            android:id="@+id/courseIDDisplay"
            android:textStyle="bold"
            android:layout_alignTop="@+id/courseNumberActivity"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignBottom="@+id/courseNumberActivity" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Course Type :"
            android:id="@+id/courseTypeDisplay"
            android:textStyle="bold"
            android:layout_alignTop="@+id/typeActivity"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_above="@+id/nameActivity" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Activity Name :"
            android:textStyle="bold"
            android:id="@+id/activityNameDisplay"
            android:layout_alignTop="@+id/nameActivity"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_above="@+id/dueDateActivity" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Due Date :"
            android:textStyle="bold"
            android:id="@+id/dueDateDisplay"
            android:layout_alignTop="@+id/dueDateActivity"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_above="@+id/descriptionActivity" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Description :"
            android:textStyle="bold"
            android:id="@+id/descDisplay"
            android:layout_alignTop="@+id/descriptionActivity"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_above="@+id/maxGradeActivity" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Maximum Grade :"
            android:id="@+id/maxGradeDisplay"
            android:textStyle="bold"
            android:layout_alignTop="@+id/maxGradeActivity"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignBottom="@+id/maxGradeActivity" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Grade :"
            android:id="@+id/gradeDisplay"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignBottom="@+id/enterGradeActivity" />


    </RelativeLayout>

I add the childLayout.xml to masterLayout.xml using the following code

TableLayout queryTableLayout = (TableLayout) findViewById(R.id.queryTableLayoutActivity);
            LayoutInflater inflater = (LayoutInflater) getSystemService(
                    Context.LAYOUT_INFLATER_SERVICE);
            String courseIDValue = c.getString(courseIdIndex);
            View newTagView = inflater.inflate(R.layout.activity_class_activities, null);
            queryTableLayout.addView(newTagView, activeClassActivityIndex++);

I want to sort childLayout based on dueDateActivity field. How can I achieve this?

score 2 · Answer 1 · edited May 23 '17 at 12:09

First of all you dont want to sort layouts - you want to sort views that you inflated with certain layout. So there is no "childLayout" there is newTagView. Your question is a form of more general question: how to reorder n relative child views on a parent layout in certain order. This is not about changing their sizes and positions(that's easy, you just individually because you must know all new params for each) this is about reordering them. This problem breaks into 4:

Note: You can't just copy-paste code, you need to make changes based on what you specifically need (like what Parameter you need and how to compare it)

1. Establish the current order and the order in which they need to be :

use

getChildCount()

to know number of TableLayout children, use

getChildAt(i)

to traverse and access them. Now make the Map that will determine the transition to the new order.

Map<View, Parameter> map = new HashMap<Integer, Parameter>();
for(int i = 0; i < queryTableLayout.getChildCount(); i++){
map.put(queryTableLayout.getChildAt(i), 
        queryTableLayout.getChildAt(i).findViewById(R.id.dueDateActivity)
        .getParameter());
//since newTagView should inherit all RelativeLayout methods after infation
//getParameter() - the method from TextView(dueDateActivity) you need

Now to make the order right you need to sort the map by parameter, which in Java 8 looks like

LinkedList<View> ordering = map.entrySet()
.stream()
.sorted(Map.Entry.comparingByValue(new Comparator<Parameter>(){
/*implement your comparator*/
})/*now when stream is sorted collect it to list*/
.collect(Collectors.toList(Map.Entry::getKey);

Now you have your ordering

2. Method to Swap

easiest way to swap views is to swap their layout params like in this answer

RelativeLayout.LayoutParams params1 = (RelativeLayout.LayoutParams) b1.getLayoutParams();
RelativeLayout.LayoutParams params2 = (RelativeLayout.LayoutParams) b2.getLayoutParams();

b1.setLayoutParams(params2);
b2.setLayoutParams(params1);

Make a method void swap(View A, View B){...} which will work for your RelativeLayout View with that code.

3. Do the thing.

for(int i = 0; i < queryTableLayout.getChildCount(); i++)
swap(queryTableLayout.getChildAt(i), ordering.get(i));

If you want them add dynamically in already sorted place that is much easier You just need to get the right pos, and params like in (1) and use

public void addView (View child, int index, ViewGroup.LayoutParams params)

Well although I tried a different solution this answer gave me a good start to think in that perspective. Thanks a lot. — human, Apr 02 '16 at 02:15

score 2 · Accepted Answer · edited May 23 '17 at 12:09

According to bedbad's 4 steps I followed first 2 and found solution

I used this answer to help my situation. This is my sort method (on button click)

public void sortByWeek(View v){
    queryTableLayout = (TableLayout) findViewById(R.id.queryTableLayoutActivity);
    int childCount = queryTableLayout.getChildCount();
    Map<View,String> map = new HashMap<View,String>();
    for(int i = 0; i<childCount;i++){
        map.put(queryTableLayout.getChildAt(i),((TextView)queryTableLayout.getChildAt(i).findViewById(R.id.dueDateActivity)).getText().toString());
    }
    Map<View,String> sortedMap = sortByComparator(map,sort);
    ArrayList<View> viewSet = new ArrayList<>(sortedMap.keySet());
    queryTableLayout.removeAllViews();
    for(int i = 0;i<childCount;i++){
        queryTableLayout.addView(viewSet.get(i));
    }
    if(sort){
        sort = false;
    }
}

public Map<View,String> sortByComparator(Map<View,String> map,final boolean order){
    List<Map.Entry<View,String>> list = new LinkedList<Map.Entry<View,String>>(map.entrySet());
    Collections.sort(list, new Comparator<Map.Entry<View, String>>() {
        @Override
        public int compare(Map.Entry<View, String> lhs, Map.Entry<View, String> rhs) {
            if(order){
                return lhs.getValue().compareTo(rhs.getValue());
            }else{
                return rhs.getValue().compareTo(lhs.getValue());
            }
        }
    });
    Map<View,String> sortedMap = new LinkedHashMap<View,String>();
    for(Map.Entry<View,String> entry: list){
        sortedMap.put(entry.getKey(),entry.getValue());
    }
    return sortedMap;
}

How to sort the views added dynamically

2 Answers2

1. Establish the current order and the order in which they need to be :

2. Method to Swap

3. Do the thing.