CODEWITHSUNDEEP
androidandroid-layoutandroid-button
novato
novato

Reputation: 61

Different behaviour from button images

Following my previous question, Fitting three buttons and a background image in android, I have now what I wanted, but there is now a minor issue that I don't understand. There are three buttons,each button with an image, the three images have the same size, but they are shown differently. Image 2 starts at the left border, but images 1 and 3 have a margin at the left side.

enter image description here

From the XML file, I don't see the reason for that:

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

    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_weight="0.5"
        android:scaleType="fitXY"
        android:src="@drawable/sector1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:drawableLeft="@drawable/agenda_izq"
        android:maxLines="1"
        android:text="Agenda" />

    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/fondo"
        android:drawableLeft="@drawable/actividades_izq"
        android:maxLines="1"
        android:text="Actividades" />

    <Button
        android:id="@+id/button3"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:drawableLeft="@drawable/suscribete_izq"
        android:gravity="left|center_vertical|center_horizontal"
        android:maxLines="2"
        android:text="Recibir Información de Juventud" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_weight="0.5"
        android:scaleType="fitXY"
        android:src="@drawable/sector3" />

</LinearLayout>

I would like that all three images start from the left border, without any margin.

Thank you.

Upvotes: 0

Views: 77

Answers (2)

PattaFeuFeu
PattaFeuFeu

Reputation: 1835

Instead of having Buttons with drawableLeft you might want to give using LinearLayouts as Buttons a try for increased flexibility of choosing how your images and text are displayed, like so:

 <LinearLayout
       android:id="@+id/button2"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:minHeight="48dp">

    <ImageView
        android:id="@+id/imageViewForButton2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/actividades_izg" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/fondo"
        android:maxLines="1"
        android:text="Actividades" />
 </LinearLayout>

You would then have one of the above LinearLayouts containing an ImageView and a TextView per "Button". To reference it, e.g. in onCreateView, you would then use:

 LinearLayout button1 = (LinearLayout) view.findViewById(R.id.button2);

Instead of a LinearLayout you might consider to use a RelativeLayout in order to align text to the right of the ImageViews as described in Aligning a TextView and ImageView inside a LinearLayout, Accepted Answer

Upvotes: 1

Miki Franko
Miki Franko

Reputation: 687

Your second image is linked to the left with no margin because that line: 

android:background="@color/fondo"

Upvotes: 1

Related Questions