layout_weight not pixel perfect?

Question

I'm an absolutely new coder, and I'm trying to design a short-side-of-the-screen navigation bar for an application that forces landscape view and allows the Android nav bar to be seen. This basically comes down to creating a vertical button bar on the left side of the screen, and to maintain adaptability, I've decided to structure it with layout_weight within a LinearLayout block. Here's the relevant code:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageButton
        style="?android:attr/borderlessButtonStyle"
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitCenter" 
        android:adjustViewBounds="true"
        android:padding="0dp"
        android:background="@android:color/black"
        android:src="@drawable/navbut1null" />
    <ImageButton
        style="?android:attr/borderlessButtonStyle"
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:padding="0dp"
        android:background="@android:color/black"
        android:src= "@drawable/navbut2null" />
    <ImageButton
        style="?android:attr/borderlessButtonStyle"
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:padding="0dp"
        android:background="@android:color/black"
        android:src= "@drawable/navbut3null" />
    <ImageButton
        style="?android:attr/borderlessButtonStyle"
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:padding="0dp"
        android:background="@android:color/black"
        android:src= "@drawable/navbut4null" />

</LinearLayout>

My problem is that these image buttons don't align perfectly in size, but instead either the bottom two buttons extrude by an extra pixel versus the top two (with this exact code) or vice-versa (when I replace the layout_height="0dp" with layout_height="match_parent"). Here's a picture:

(https://i.stack.imgur.com/2xReC.png) (Sorry that I can't embed - I have 0 reputation)

It's subtle, but you may notice the extrusion of the bottom two buttons. In fact, without setting the background to black on all the buttons, the top two buttons develop thin white margins above and below them, and I think this has to do with whatever is going on here.

So what's going on? What would you advise I do? My goal is a twitter-style navbar.

To me it looks like there could be a problem with the image assets. make sure they all have same width and the top two images don't have any transparent areas on the right. — Varun, Dec 18 '13 at 01:29
Excellent thought, but I've checked, and all the images have an identical size of 128 x 180, and no visible white space on any image viewer. Plus the .ai source for each of them is a copy of the same file. — Kasper Kubica, Dec 18 '13 at 01:36

score 2 · Answer 1 · answered Dec 18 '13 at 02:47

2

Try changing the value of the ImageButton's layout_width from "wrap_content" to "0dp"

<ImageButton
    style="?android:attr/borderlessButtonStyle"
    android:id="@+id/button2"
    android:layout_width="0dp" <!-- should you change here -->
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    android:padding="0dp"
    android:background="@android:color/black"
    android:src= "@drawable/navbut2null" />

answered Dec 18 '13 at 02:47

Rick Royd Aban

904
6
33

This unfortunately just made the buttons disappear altogether (I believe weight overrides width and height when they're set to 0, but only along the axis of the layout's orientation - in this case, a 0 in height is overriden by the weight, but a 0 in width is not). – Kasper Kubica Dec 18 '13 at 18:14
Worked for me. Just had to change a few surrounding elements as well. – jhnclvr Feb 12 '17 at 17:25

Jackie · Answer 2 · 2013-12-19T01:55:49.590

0

Make sure that you don't have any view that have the same color as right-container. And that view can overlap your 2 top-buttons.

In addition, I think set your ViewGroup background to black would solve your problem. If it doesn't. Maybe, there is a black view next to 2 bottom- buttons.

edited Dec 19 '13 at 01:55

answered Dec 18 '13 at 05:01

Jackie

307
2
14

Wow, I can't even upvote your comment without reputation :D Anyway, I don't quite understand what you're saying, but if you're suggesting that I change the LinearLayout background to black, you're exactly right. I did that, and it hid the problem. For now. The problem is, the images for these buttons will change when the program runs, so then the black background peeking out WILL be visible. So while your suggestion hasn't fully solved my problem, it does at least make it less glaring. – Kasper Kubica Dec 18 '13 at 18:18
If I understand ur problem well, you expect the button-background change to cyan color onClick event of the button. To do so, you could use selector to define onClick state. – Jackie Dec 19 '13 at 02:03
Not quite - I'm hoping for the background to never be visible, regardless of onClick state. This seems to be a static layout issue. – Kasper Kubica Dec 20 '13 at 04:16

layout_weight not pixel perfect?

2 Answers2