smartmouse smartmouse - 2 months ago 7
Android Question

Creating layout for ListView with a side index list

I created this layout for my

ListView
:

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

<ListView
android:id="@+id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="10.0sp"
android:background="#4a4c4d">
</ListView>

<LinearLayout android:orientation="vertical"
android:layout_width="28dip"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="@android:color/transparent" >

<TextView android:id="@+id/A"
android:text="A"
android:tag="A"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView android:id="@+id/B"
android:text="B"
android:tag="B"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/C"
android:text="C"
android:tag="C"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/D"
android:text="D"
android:tag="D"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/E"
android:text="E"
android:tag="E"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/F"
android:text="F"
android:tag="F"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/G"
android:text="G"
android:tag="G"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/H"
android:text="H"
android:tag="H"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/I"
android:text="I"
android:tag="I"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/J"
android:text="J"
android:tag="J"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/K"
android:text="K"
android:tag="K"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/L"
android:text="L"
android:tag="L"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/M"
android:text="M"
android:tag="M"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/N"
android:text="N"
android:tag="N"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/O"
android:text="O"
android:tag="O"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/P"
android:text="P"
android:tag="P"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/Q"
android:text="Q"
android:tag="Q"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/R"
android:text="R"
android:tag="R"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/S"
android:text="S"
android:tag="S"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/T"
android:text="T"
android:tag="T"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/U"
android:text="U"
android:tag="U"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/V"
android:text="V"
android:tag="V"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/W"
android:text="W"
android:tag="W"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/X"
android:text="X"
android:tag="X"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/Y"
android:text="Y"
android:tag="Y"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView android:id="@+id/Z"
android:text="Z"
android:tag="Z"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>


But the vertical
LinearLayout
appears overlapped on
ListView
instead of being at right of
ListView
. How to fix this above code to have
ListView
on left (that covers about the 90% of the screen) and vertical
LinearLayout
on the right (covering the remaining 10% of the screen)?

Thank you in advance for your help

Answer

Use LinearLayout instead of RelativeLayout.

Keep orientation of root LinearLayout horizontal and then create 2 linearLaytout inside it one with weight="0.9" another with weight="0.1"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.9">

        <ListView 
            android:id="@+id/android:list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:dividerHeight="10.0sp"
            android:background="#4a4c4d">
        </ListView>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.1">
        <TextView .../>
        <TextView .../>
        <TextView .../>
        .
        . 
        .
    </LinearLayout>
</LinearLayout>