对齐列表视图中的所有列

Question

I was wondering how I can manage to align all columns in rows. I am using a ListView , where I display a list of drugs for my game. The columns are different sizes each row. I would like to see that each column has the same width all down to the end of the list, but not have same width overall.

As you can see from the picture, the columns are not aligned. I draw the lines to make it even more obvious what I would like. You can also see that the buttons are to close to the other column. With the arrow on the picture I wanted to make it clear that those buttons should be placed more to the end of the row.

My implementation uses the following styles:

<!-- List style for the drug sell list -->
<style name="traderY.List">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_alignParentLeft">true</item>
    <item name="android:layout_alignParentTop">true</item>
</style>

<!-- Header style for quantity column -->
<style name="traderY.HeaderQuantityText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.15</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#EDEFF0</item>
</style>

<!-- Header style for cost column -->
<style name="traderY.HeaderCostText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.20</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#EDEFF0</item>
</style>

<!-- Header style for name column -->
<style name="traderY.HeaderNameText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.45</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#EDEFF0</item>
</style>

<!-- Row style for quantity column -->
<style name="traderY.QuantityListText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.15</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#000000</item>
</style>

<!-- Row style for cost column -->
<style name="traderY.CostListText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.20</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#000000</item>
</style>

<!-- Row style for name column -->
<style name="traderY.NameListText">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.45</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:padding">4dip</item>
    <item name="android:layout_margin">4dip</item>
    <item name="android:textColor">#000000</item>
</style>

<!-- Row style for button column -->
<style name="traderY.ListButton" parent="@android:style/Widget.Button">
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">0.20</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">15dip</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:gravity">center</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">0.6</item>
    <item name="android:background">@drawable/custom_btn_black_pearl</item>
    <item name="android:padding">4dip</item>
</style>

As you can see I set or I try to set the column width by using those two items:

<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.20</item>

I was reading that you can set the width by using weight. I basically used the same values I would use to set percentages. If I understand correctly, the weight value represents the ratio between other components. I found this as a solution on a Stack Overflow question and I found it in several tutorials. One of the tutorials I found is this one here .

To share more light, here are also the layouts of the of all the components, starting with the fragment which contains the list view.

Fragment layout

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

  <TextView
    android:id="@+id/money"
    style="@style/traderY.TextCenter" />

  <TextView
    android:id="@+id/location"
    style="@style/traderY.TextCenter" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/junkie_icon"/>

  <ListView
    android:id="@+id/drug_list"
    style="@style/traderY.List"
    android:layout_weight="1"/>

  <TableRow
    style="@style/traderY.ButtonRow">

    <Button
        android:id="@+id/nothing"
        style="@style/traderY.ButtonCenter"
        android:text="@string/exit"/>

  </TableRow>

</LinearLayout>

Here is the header layout. As you can see I omit the last column for buttons, because there is no need to display a header for it:

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

  <TextView
    android:text="@string/header_quantity"
    style="@style/traderY.HeaderQuantityText" />

  <TextView
    android:text="@string/header_cost"
    style="@style/traderY.HeaderCostText" />

  <TextView
    android:text="@string/header_name"
    style="@style/traderY.HeaderNameText" />

</LinearLayout>

And here is the layout for each row I use:

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

  <TextView
    android:id="@+id/drug_quantity"
    style="@style/traderY.QuantityListText" />

  <TextView
    android:id="@+id/drug_cost"
    style="@style/traderY.CostListText" />

  <TextView
    android:id="@+id/drug_name"
    style="@style/traderY.NameListText" />

  <Button
    android:id="@+id/drug_sell_btn"
    android:text="@string/sell_drugs_action"
    style="@style/traderY.ListButton"/>

</LinearLayout>

Those are the style/layouts I use and I do not change any of those properties in the code. So the problem can only be in my XML files.

Does anyone know what am I doing wrong here? Maybe my investigation is wrong and I can not do it. I would appreciate any help or comments to solve this problem. If this is not even possible, then please let me know.

Answer 1

I found out that my solution was correct. The weight property did the job. For some unknown reason gradle did not see the changes when it was building the app. Or maybe it is the emulator. This was not the first time something like this happened. I will have to investigate why this even occur.

Answer 2

Increase weight of style="@style/traderY.QuantityListText". Make 0.2 or 0.3

Answer 3

Wrap your text views in a LinearLayout and set it to fill the parentView. In this way all the buttons will be aligned to the right.

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

<LinearLayout 
   android:layout_weight="1"
   android:layout_width="0dp"
   android:layout_height="wrap_content" />

    <TextView
      android:id="@+id/drug_quantity"
      style="@style/traderY.QuantityListText" />

   <TextView
     android:id="@+id/drug_cost"
     style="@style/traderY.CostListText" />

   <TextView
     android:id="@+id/drug_name"
     style="@style/traderY.NameListText" />
</LinearLayout>

<Button
  android:id="@+id/drug_sell_btn"
  android:text="@string/sell_drugs_action"
  style="@style/traderY.ListButton"/>

</LinearLayout>