How to align imagebutton with equel width in Linearlayout

Question

I have linearlayout with 4 imagebutton one after another. In linearlayout with horizontal orientation and provided equal width. Here buttons are aligning properly but the images present in those buttons are not getting aligned properly.

Here is the below code, i have tried and this is how it looks. How do i make the images align properly with correct shape?

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:background="#fff"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">
    <ImageButton
        android:id="@+id/add_fav_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:scaleType="fitXY"
        android:layout_gravity="center"
        android:src="@drawable/ic_whatsapp"
        />

    <ImageButton
        android:id="@+id/id_share_fb_btn"
        android:src="@drawable/ic_whatsapp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"/>
    <ImageButton
        android:id="@+id/id_share_all_btn"
        android:src="@drawable/ic_share"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"/>
    <ImageButton
        android:id="@+id/id_whatsapp_btn"
        android:src="@drawable/ic_whatsapp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"/>
</LinearLayout>

Updated image, after changing android:layout_height="50dp" to android:layout_height="wrap_content"

What do you mean by "not getting aligned properly"? Are you referring to the stretching? — Mike M., Sep 26 '16 at 15:21

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Your images looks like squared. you are making them stretch way to fill the entire width but you are making them all with height of 50dp.

Change the height from 50dp to

android:layout_height="wrap_content"

and they will keep a correct height based on the width. If you want them all to be with height of 50dp, you have two choices:

Set the width to 50dp and center them in the parent
Create the "square button"

I don't know if I got the point, if not comment below

edited May 23 '17 at 12:06

Community

1
1

answered Sep 26 '16 at 15:25

Pier Giorgio Misley

5,305
4
27
66

HI, thnks for the reply, i did like that, i have uploaded the new image. still image looks like stretched, i.e horizontally it is stretched more-than vertical. – Naruto Sep 26 '16 at 15:53
@Naruto I'm still seeing the old question :( have you created the square button class? – Pier Giorgio Misley Sep 26 '16 at 15:55
@Naruto nothing, now i see the correct one. you want them perfectly squared? – Pier Giorgio Misley Sep 26 '16 at 15:56
Yes, if i use padding left, then it works well... but i want them to make it correct square.. is there anyway?, please help – Naruto Sep 26 '16 at 16:00
@Naruto ok, so use my "2." solution :) – Pier Giorgio Misley Sep 26 '16 at 16:00
i'll try now, give me few mins, ill get back.. thank you so much,, – Naruto Sep 26 '16 at 16:05
One more thing, if i add .png icons the button stretches, but same svg will work as expected. But svg i'm facing lot of issues due to backward compatibility.. – Naruto Sep 26 '16 at 17:45
I feel like, its better to add margin for individual button to look more spacious and cool – Naruto Sep 26 '16 at 18:11
@Naruto the problem with margin will come on different size screens i think.. you sure the icons you are using are squared? – Pier Giorgio Misley Sep 26 '16 at 19:10

score 0 · Answer 2 · answered Sep 26 '16 at 15:26

Put all each image button in a relative layout and layout_weight of relativelayout to 1 and layout_width= match_parent

I think this may work ...... or try using imageview instead of imagebutton

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#fff"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<RelativeLayout
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<ImageButton
    android:id="@+id/add_fav_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    android:minHeight="0dp"
    android:scaleType="fitXY"
    android:layout_gravity="center"
    android:src="@drawable/ic_whatsapp"
    />
  </RelativeLayout>
  <RelativeLayout
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<ImageButton
    android:id="@+id/id_share_fb_btn"
    android:src="@drawable/ic_whatsapp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    android:minHeight="0dp"
    android:layout_gravity="center"
    android:scaleType="fitXY"/>
</RelativeLayout>
<RelativeLayout
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<ImageButton
    android:id="@+id/id_share_all_btn"
    android:src="@drawable/ic_share"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    android:minHeight="0dp"
    android:layout_gravity="center"
    android:scaleType="fitXY"/>
</RelativeLayout>
<RelativeLayout
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<ImageButton
    android:id="@+id/id_whatsapp_btn"
    android:src="@drawable/ic_whatsapp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    android:minHeight="0dp"
    android:layout_gravity="center"
    android:scaleType="fitXY"/>

why do we need to include so many relativelayout?. i think its not correct way — Naruto, Sep 26 '16 at 15:56

How to align imagebutton with equel width in Linearlayout

2 Answers2