Search code examples
androidxmllayoutimageviewscale

Best practices for getting layout weights to align imagebuttons perfectly during android activity?

I'm having a hard time aligning up my image buttons properly during a android activity. As you can see all the images are all shifted and not aligned properly. And that was after a long time of adjustments.

My main XML layout:

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="wrap_content" 
     android:adjustViewBounds="true"
    android:layout_weight="1"
        android:gravity="left" 
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"   
    android:layout_width="fill_parent" android:baselineAligned="true">
 <LinearLayout 
    android:orientation="horizontal"
    android:layout_height="158px" 
      android:adjustViewBounds="false"
    android:layout_weight="1"
        android:gravity="left" 
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"  
    android:layout_width="fill_parent" android:baselineAligned="true">  

    <ImageButton         
    android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"

        android:gravity="left" 
   android:adjustViewBounds="false"
  android:scaleType="fitStart"

        android:layout_gravity="left"
        android:background="@drawable/topfula_r1_c1" 
        android:layout_width="wrap_content"
       android:layout_height="wrap_content" 
       android:id="@+id/fluprepare"
       android:layout_weight="1"
       >

       </ImageButton>
    <ImageButton android:scaleType="fitCenter"        
    android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
   android:adjustViewBounds="false"
    android:layout_weight="1"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
        android:gravity="left" 
        android:layout_gravity="left" android:background="@drawable/topfula_r1_c2" 
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:id="@+id/refreshflu" ></ImageButton>
    <ImageButton android:scaleType="fitEnd"        
    android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
         android:adjustViewBounds="false"
          android:layout_weight="1"
        android:layout_marginBottom="0dp"
        android:gravity="left" 
        android:layout_gravity="left" 
        android:background="@drawable/topfula_r1_c3" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/quitprogram" ></ImageButton>

</LinearLayout>   
 <LinearLayout 
    android:orientation="horizontal"
    android:layout_height="159px" 
      android:adjustViewBounds="true"
    android:layout_weight="1"
        android:gravity="left" 
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"  
    android:layout_width="fill_parent" android:baselineAligned="true">  

    <ImageButton         
    android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"

        android:gravity="left" 
   android:adjustViewBounds="false"
  android:scaleType="fitStart"

        android:layout_gravity="left"
        android:background="@drawable/mid_r1_c1" 
        android:layout_width="wrap_content"
       android:layout_height="wrap_content" 
       android:id="@+id/prepareflu"
       android:layout_weight="1"
       >

       </ImageButton>
    <ImageButton android:scaleType="fitCenter"        
    android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
   android:adjustViewBounds="false"
    android:layout_weight="1"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
        android:gravity="left" 
        android:layout_gravity="left" android:background="@drawable/mid_r1_c2" 
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:id="@+id/maincdc" ></ImageButton>
    <ImageButton android:scaleType="fitEnd"        
    android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
         android:adjustViewBounds="false"
          android:layout_weight="1"
        android:layout_marginBottom="0dp"
        android:gravity="left" 
        android:layout_gravity="left" 
        android:background="@drawable/mid_r1_c3" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/configsettings" ></ImageButton>

</LinearLayout>   


<LinearLayout 
    android:layout_height="460px" 


   android:adjustViewBounds="false"
    android:layout_weight="1"
        android:gravity="left" 
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
    android:layout_width="fill_parent" android:orientation="horizontal" android:baselineAligned="true">

<ImageButton android:id="@+id/informationcards" 
android:background="@drawable/bottommain" 
android:layout_gravity="center" android:layout_width="wrap_content" 
android:layout_height="wrap_content" android:layout_weight="1"></ImageButton>
</LinearLayout>
</LinearLayout>

Device Screen shot of layout not aligning

As you can see there is a issue big time with the imagebuttons that I have initialy laid out as a test. Using 1 large bottom image that pushes up 3 images in the top and middle rows that need to be aligned is difficult.

If any more detail is needed, please let me know.

[edit]

android:baselineAligned="true" android:layout_weight="1" android:baselineAligned="true"

are just a nightmare to just have right. it is like black magic to get it all perfect with multiple images and layouts that all have to be edge to edge...

I would love to instead of having the 3 layouts all in one larger Layout container seems awful.. a nice sweet grid with edge to edge?

Original not Spliced up

Spliced and ImageButton'd up awww

Whoo hoo! I solved it with lots of trial and error! with 100x less code. like wow.

Solution

  • a snippet from my main.xml file that I used in the above question...

    you will see that it was not done with image buttons. and the beauty of it all is that there is zero chance of image miss alignments. as you will notice the 

       android:background="@drawable/mainlayoutbg2"

    is one file.. not a whole bunch of pieced up images that you pray will all block together with all there weights and alignments... 

    <TableLayout
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/mainlayoutbg2"
xmlns:android="http://schemas.android.com/apk/res/android"
android:clickable="true">
<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="100px">
    <Button
        android:clickable="true"
        android:height="100px"
        android:layout_width="wrap_content"
        android:id="@+id/Button02"
        android:layout_height="wrap_content"
        android:background="@null"
        android:text="     "
        android:width="100px"></Button>

    <Button
        android:clickable="true"
        android:height="100px"
        android:layout_width="wrap_content"
        android:id="@+id/refreshflud"
        android:onClick="refreshflu()"
        android:layout_height="wrap_content"
        android:background="@null"
        android:text="     "
        android:width="100px"></Button>

    <Button
        android:clickable="true"
        android:height="100px"
        android:layout_width="wrap_content"
        android:id="@+id/refreshflub"
        android:layout_height="wrap_content"
        android:background="@null"
        android:text="     "
        android:width="100px"></Button>
    <Button
        android:clickable="true"
        android:height="100px"
        android:layout_width="wrap_content"
        android:id="@+id/refreshfluc"
        android:layout_height="wrap_content"
        android:background="@null"
        android:text="     "
        android:width="100px"></Button>
    <Button
        android:height="100px"
        android:text="     "
        android:background="@null"
        android:width="100px"
        android:id="@+id/quitprogram"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></Button>

</TableRow>

    I hope this shaves off some hours from someone elses dev sessions.