Horizontal LinearLayout displaying components in reverse order

Question

I have a LinearLayout (list_alphabet.xml), which contains a ListView and a LinearLayout. The orientation is not explicitly set and therefore is horizontal. I would expect the ListView to appear on the left and then the 2nd 'LinearLayout' (which is vertical) to the right of it, but in fact they are in reverse order. The layout is added to a Fragment within MainActivity.
Please let me know if there is another piece of code to show that would be helpful.

How can I get them to appear in the order that they appear in the xml layout file?

MainActivity

public class MainActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_alphabet);

        fragmentTransaction.add(R.id.list_alphabet_layout, new MyListFragment(), getResources().getString(R.string.list_fragment_tag));
        fragmentTransaction.commit();
        fragmentManager.executePendingTransactions();        
        ...   
    }

list_alphabet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_alphabet_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:fastScrollEnabled="true" />

    <LinearLayout
        android:id="@+id/sideIndex"
        android:layout_width="60dip"
        android:layout_height="fill_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

This is the Java code for the side index:

    public void updateList() {

    // setup the side index (the column of letters)
    LinearLayout sideIndexLayout = (LinearLayout) getActivity().findViewById(R.id.sideIndex);

    sideIndexLayout.removeAllViews();
    indexListSize = alphabetList.size();
    if (indexListSize < 1) {
        return;
    }

    int indexMaxSize = (int) Math.floor(sideIndexLayout.getHeight() / 20);
    int tmpIndexListSize = indexListSize;
    while (tmpIndexListSize > indexMaxSize) {
        tmpIndexListSize = tmpIndexListSize / 2;
    }
    double delta;
    if (tmpIndexListSize > 0) {
        delta = indexListSize / tmpIndexListSize;
    }
    else {
        delta = 1;
    }

    TextView tempTextView;
    for (double i = 1; i <= indexListSize; i = i + delta) {
        Object[] tmpIndexItem = alphabetList.get((int) i - 1);
        String tmpLetter = tmpIndexItem[0].toString();

        tempTextView = new TextView(getActivity());
        tempTextView.setTextColor(getResources().getColor(android.R.color.white));
        tempTextView.setText(tmpLetter);
        tempTextView.setGravity(Gravity.CENTER);
        tempTextView.setTextSize(15);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1);
        tempTextView.setLayoutParams(params);
        sideIndexLayout.addView(tempTextView);
    }

    sideIndexHeight = sideIndexLayout.getHeight();

    sideIndexLayout.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            sideIndexX = event.getX(); // coordinates of the touch
            sideIndexY = event.getY();

            // and can display a proper item in name list
            displayListItem();

            return false;
        }
    });
}

public void displayListItem() {
    LinearLayout sideIndexLayout = (LinearLayout) getActivity().findViewById(R.id.sideIndex);
    sideIndexLayout.setBackgroundColor(getResources().getColor(R.color.emnrd_green));
    sideIndexHeight = sideIndexLayout.getHeight();
    // compute number of pixels for every side index item
    double pixelPerIndexItem = (double) sideIndexHeight / indexListSize;

    // compute the item index for given event position belongs to
    int itemPosition = (int) (sideIndexY / pixelPerIndexItem);

    // get the item (we can do it since we know item index)
    if (itemPosition < alphabetList.size()) {
        Object[] indexItem = alphabetList.get(itemPosition);
        int subitemPosition = sectionMap.get(indexItem[0]);

        //ListView listView = (ListView) findViewById(android.R.id.list);
        getListView().setSelection(subitemPosition);
    }
}

Ashley Alvarado · Answer 1 · 2015-07-17T19:59:33.987

1

Sorry can't comment, that is interesting though. A work around may be to use relative layout. Just set them up as normal and can even setup so that listview is set to be to the left. If that doesn't work that is interesting.

     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/list_alphabet_layout"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >



    <LinearLayout
        android:id="@+id/sideIndex"
        android:layout_width="60dip"
        android:layout_alignParentRight="true"
        android:layout_height="fill_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical" >
    </LinearLayout>

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_marginRight="60dp"
        android:layout_alignParentLeft="true"
        android:layout_height="match_parent"
        android:fastScrollEnabled="true" />

</RelativeLayout>

edited Jul 17 '15 at 19:59

answered Jul 17 '15 at 19:33

Ashley Alvarado

1,078
10
17

On your suggestion, I tried simply replacing `LinearLayout` with `RelativeLayout` and in this case, they appear on top of each other. Then added `layout_toRightOf` to the 2nd `LinearLayout` but this had no effect. – Al Lelopath Jul 17 '15 at 19:46
I see let me come up with a better example i'll line them up for you. – Ashley Alvarado Jul 17 '15 at 19:47
I have to switch the order of the `ListView` and the `LinearLayout`, otherwise I get *Error:(11, 35) No resource found that matches the given name (at 'layout_alignLeft' with value '@id/sideIndex')*. In this layout, the 2nd `LinearLayout` (sideIndex) is not displayed at all. – Al Lelopath Jul 17 '15 at 19:55
Alright, just did a little change. Tell me what it does. If that doesn't then I'm, not sure somewhere it is being modified. – Ashley Alvarado Jul 17 '15 at 20:00
Same, sideIndex is not displayed. I'll have to look, yet again, at code. – Al Lelopath Jul 17 '15 at 20:05

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

Pretty much what @Ashley said, but it seems to work for me::

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_alphabet_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:id="@+id/sideIndex"
        android:layout_width="150dp"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="@color/material_blue_grey_800"
        android:gravity="center_horizontal"
        android:orientation="vertical"></LinearLayout>

    <ListView
        android:id="@android:id/list"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/sideIndex"
        android:fastScrollEnabled="true" />

</RelativeLayout>

Note: Once you've added content to your inner linear layout, change the width to wrap_content.

This puts the side index on the right side. However, it puts the side index *on top of* or possibly *underneath* the `LinearLayout`. This has 2 adverse effects - 1. You can see the lines of each item in the `LinearLayout` through the side index. 2. Clicking on a item in the side index causes the click handler for the item in the `LinearLayout` to be called. — Al Lelopath, Jul 27 '15 at 20:28

Horizontal LinearLayout displaying components in reverse order

2 Answers2

Linked