How can I align an imagebutton under anothe one?

Question

I have three imageButtons inside an horizontal linearlayout and I want to add one more imageButton right under the up left imageButton(when the up left imageButton starts and finishes, I want the same thing for the imageButton under that). Everything is in a vertital linearlayout. I cannot align the down imageButton vertically with the up one. How can I do that? Any ideas?

My code is this:

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="left">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:background="@drawable/image"
        android:layout_marginRight="30dp"/>

</LinearLayout>

what is your outcome from this code, can you post a screenshot or img? — drWisdom, Feb 06 '16 at 19:13
it puts my last imageButton under the other three, but before the first in the beggining. So there is a (space, then the three imageuttons)-->all these in one line, and then there is the other imageButton, which is under the space — Mary, Feb 06 '16 at 19:20
This is confusing. You should try to post a screenshot. Otherwise try RelativeLayout and use android:layout_below — ashwani, Feb 06 '16 at 19:23
@Mary "it puts my last imageButton under the other three, but before the first in the beggining". I have no idea what you mean by this.. — drWisdom, Feb 06 '16 at 19:24
and by the way you don't need to use relative layout just to put one view below another it can be done with linear layout as well. A screen shot will make us help more easily. — drWisdom, Feb 06 '16 at 19:26
After reading and re-reading your question i think what you want to do is create two horizontal rows, one with three imageButtons and another with one imagebutton. If yes, the space you are getting is probably because your top linear layout (row 1) has gravity:center, while the bottom one has gravity: left. Try changing that and see if it helps. — drWisdom, Feb 06 '16 at 19:34
This is exactly what I want to do @drWisdom. But I need my three up imageButtons to be in the middle and the forth one in the second row to be under the first of the first line. — Mary, Feb 06 '16 at 19:42
Then I think you can do this easily with a Relative Layout. I will one solution below as answer, check it out and modify it to your needs. (The downside: it uses fixed widths for the buttons). — drWisdom, Feb 07 '16 at 09:55

score 1 · Answer 1 · answered Feb 06 '16 at 19:16

1

you can try using RelativeLayout in the imageButton you want to be under another one, and set it below the imagebutton you want to be on top of it

android:layout_below="@+id/imagebutton1"

answered Feb 06 '16 at 19:16

Ralph

435
1
5
13

RelativeLayout in the last button: but it doesn't let me put below in the RelativeLayout at all... – Mary Feb 06 '16 at 19:25
use this code android:layout_below="@+id/(id of button on top of it)" – Ralph Feb 06 '16 at 19:33
@Mary RelativeLayouts use the ids you assign to your Views or ViewGroups to position the elements *in relation* to one another. – Phantômaxx Feb 06 '16 at 19:36
i think you can easily drag the imagebutton on the position you want in the design view of xml – Ralph Feb 06 '16 at 20:01

Ajinkya · Answer 2 · 2016-02-08T05:09:59.340

0

Made chages in your xml try to use that

   <?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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="20dp"
            android:gravity="center_horizontal">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageButton11"
                    android:background="@drawable/image"
                    android:layout_marginRight="30dp"/>
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageButton14"
                    android:layout_below="@+id/imageButton11"
                    android:align_left="@+id/imageButton11"
                    android:align_right="@+id/imageButton11"
                    android:layout_marginTop="10dp"
                    android:background="@drawable/image"
                    android:layout_marginRight="30dp"/>
            </RelativeLayout>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageButton12"
                android:background="@drawable/image"
                android:layout_marginRight="30dp"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageButton13"
                android:background="@drawable/image"
                android:layout_marginRight="30dp"/>

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

edited Feb 08 '16 at 05:09

answered Feb 06 '16 at 19:13

Ajinkya

1,057
7
18

instead of the vertical one? – Mary Feb 06 '16 at 19:14
With a RelativeLayout instead of the vertical LinearLayout, it puts the last imageButton in the before the other three imageButtons, all in the same line, I don't want that... :( – Mary Feb 06 '16 at 19:23
how can I post an image here? – Mary Feb 06 '16 at 19:34
@Mary RelativeLayouts use the ids you assign to your Views or ViewGroups to position the elements *in relation* to one another. – Phantômaxx Feb 06 '16 at 19:35
@Mary edited my answer try this code and let me know – Ajinkya Feb 06 '16 at 19:49
@Ajinkya this code makes my button stick under the first imageButton of the first line. And also it makes the first imageButton of the first line start a little more up comparing the second and third imageButton of the first line... Also you have put four buttons in the first line ... anyway, I deleted that, but still... the first imageButtons of each line are together... like one image :( – Mary Feb 06 '16 at 19:56
@Mary 1)add margin top to second button in relativelayout 2) remove layout_gravity center from relative layout – Ajinkya Feb 06 '16 at 20:01
@Ajinkya still.. the same problem. they are not aligned properly. They have margin between them now, but the first of the first line is more up than it should be, the same for the forth one... – Mary Feb 06 '16 at 20:14
@Mary there is margin left of 30 dp in both button remove that as well – Ajinkya Feb 06 '16 at 20:17
@Ajinkya I need the margins... I don't want to make my imageButtons to stick together. – Mary Feb 06 '16 at 20:20
@Ajinkya thank you very very much, your answer works perfect as well, but I think I will accept the answer above, because it has less layers of layouts. But thank you again! – Mary Feb 10 '16 at 00:19

Saumik Bhattacharya · Answer 3 · 2016-02-06T21:00:11.310

The gravity of your 1st LinearLayout (inner one) tag is "center", whereas for your 2nd LinearLayout it is "left".
The three ImageButton tags having gravity as "center", whereas for the last one, there is no gravity at all.

I think this is the one you are looking for.

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:layout_marginRight="30dp"/>

</LinearLayout>

Hope this helps!

EDITED SECTION:

LinearLayout linearLayout = (LinearLayout)findViewById(R.id.id_layout);

    TableLayout tableLayout = new TableLayout(this);
    tableLayout.setStretchAllColumns(true);
    tableLayout.setGravity(Gravity.CENTER_HORIZONTAL);
    TableLayout.LayoutParams layoutParams = new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.WRAP_CONTENT);
    tableLayout.setVerticalScrollBarEnabled(true);
    tableLayout.setLayoutParams(layoutParams);

    TableRow tableRow = new TableRow(this);

    ImageButton imageButton = new ImageButton(this);
    ImageButton imageButton1 = new ImageButton(this);
    ImageButton imageButton2 = new ImageButton(this);

    tableRow.addView(imageButton);
    tableRow.addView(imageButton1);
    tableRow.addView(imageButton2);

    tableLayout.addView(tableRow);

    TableRow tableRow1 = new TableRow(this);
    tableRow1.setPadding(0, 0, 0, 40);
    TableRow.LayoutParams params = new TableRow.LayoutParams();
    params.span = 1;

    ImageButton imageButton3 = new ImageButton(this);

    tableRow1.addView(imageButton3);

    tableLayout.addView(tableRow1);

    linearLayout.addView(tableLayout);

Hope this helps!

This is exactly what I want, but I want all this to be in the middle of the screen, when I put your code in a vertical linearlayout with gravity center, it doesn't do anything .. Like: — Mary, Feb 06 '16 at 20:06
I have created a TableLayout and TableRow inside the outer LinearLayout through code and kept the ImageButtons over there. Please check my edited section. If it solves your problem or if I am able to help you, please accept or up-vote my answer. — Saumik Bhattacharya, Feb 06 '16 at 20:57
this code should go inside the onCreate? I put it inside the onCreate and it says that the layout's id is relative. I put the id of my first parent in the xml file and it is a relativeLayout. Do I have to put other id? — Mary, Feb 06 '16 at 21:53
Yes this code should go in onCreate. You have to add the id on the outer LinearLayout. I have defined a LinearLayout and not a RelativeLayout. — Saumik Bhattacharya, Feb 07 '16 at 09:06

drWisdom · Accepted Answer · 2016-02-07T10:06:11.813

0

You can do this more easily with a RelativeLayout than via a TableLayout or a LinearLayout. If you are willing to use fixed widths for your imageButtons (Which should not be a problem for imageButtons), here is one layout which will solve your problem.
(I have used Buttons in the layout below for the sake of simplicity, but it will work the same for imageButtons as well.)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="Button1" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:layout_toRightOf="@id/btn1"
        android:text="Button2" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:layout_toRightOf="@id/btn2"
        android:text="Button3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4"
        android:id="@+id/btn4"
        android:layout_below="@id/btn1"
        android:layout_alignLeft="@id/btn1"
        android:layout_alignRight="@id/btn1"/>
</RelativeLayout>

Here is how it will look:

edited Feb 07 '16 at 10:06

answered Feb 07 '16 at 10:00

drWisdom

502
1
4
12

This answer is what I need. I think I will accept your answer, because it doesn't have many layers of layouts and makes my code simpler. I tried it with image buttons and it worked too. But I would like to thank everybody for their help anyway!! :) – Mary Feb 10 '16 at 00:15
One other question I have now, is that for the imageButtons, ONLY if I declare the width as wrap_content (for each imageButton) my images look ok. And I put some margins between them as well because I need them to be separetely. My problem is, when I try the code with other device, my imageButtons are closer, or not close depending on the density of the device's screen. The solution to that is to make a different layout for every density with changed margins each time and other drawables ? – Mary Feb 10 '16 at 00:16
And if yes, how many layouts are they? I am really confused with the responsiveness thing, even if I have read the topic 100 times. :( – Mary Feb 10 '16 at 00:16
@Mary Glad that my answer helped you. As for the density differences between devices you can use "dp" as unit for margin like margin_left = "8dp" instead px. – drWisdom Feb 10 '16 at 16:01
@Mary and for using various layouts for different devices I would suggest you use the following types if necessary: **layout.xml** for normal (avg phones ) layouts, **layout-land.xml** for normal landscape layout, **layout-large.xml** & **layout-large-land.xml** for medium sized tablets ( e.g 7" inch nexus tablet), **layout-xlarge.xml** & **layout-xlarge-land.xml** for larger tablets (e.g 10" nexus nine tablet). There are a couple of other types also but I think these should be more than enough. – drWisdom Feb 10 '16 at 16:09
thank you so much. So you mean that in order to have responsive layout I need these layouts you said above for normal, large and xlarge screens and their lanscapes as well? So maybe if I change the margins for example to more or less dp in order to look well in each layout mayb I will be ok? Because I always use dp and not px, but in different screens the distance is different... – Mary Feb 10 '16 at 22:19
@Mary yes, for a truly responsive (BTW responsive is a web development term and is not much used in android development) layout you need to provide different layouts for different screen sizes. And creating different layouts is quite easy with Android Studio (a little googling will help if you are stuck). I would suggest that you fully create your default layout first and when it is finished then create variations of that layout and tweak them accordingly. – drWisdom Feb 11 '16 at 09:37

How can I align an imagebutton under anothe one?

4 Answers4