1

So I have 4 normal imagebuttons that I have set up and then a 5th imagebutton that is a drag and drop. I want the 4 non drag and drop imagebuttons to stay in a particular spot no matter what happens with the imagebutton that is drag and drop. When I move my drag and drop imagebutton, the other imagebuttons get moved and are being squished also.

Any idea how I can move this drag and drop imagebutton without affecting the other imagebuttons in any way?

Here is my xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gllayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="@drawable/mars" >

<TextView
    android:id="@+id/scores"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<ImageButton
    android:id="@+id/mainHut"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/mainhut" />

<ImageButton 
    android:id="@+id/polarCapButton1"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/polarcap" />

<ImageButton 
    android:id="@+id/polarCapButton2"
    android:layout_marginTop="-70dp"
    android:layout_marginLeft="575dp"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/polarcap" />

<ImageButton 
    android:id="@+id/spaceRockButton1"
    android:layout_marginTop="100dp"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/spacerock" />

<ImageButton 
    android:id="@+id/spaceRockButton2"
    android:layout_marginTop="-140dp"
    android:layout_marginLeft="520dp"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/spacerock" />

<ImageButton
    android:id="@+id/meteor"
    android:visibility="invisible"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/meteor" 
    android:layout_marginTop="-100dp"
    android:layout_marginLeft="400dp" />

</LinearLayout>

Here is the code for my drag and drop imagebutton:

    mainHut = (ImageButton) findViewById(R.id.mainHut);
    mainHut.setOnTouchListener(new OnTouchListener()
    {
        @Override
        public boolean onTouch(View v, MotionEvent event) 
        {
            if (event.getAction() == MotionEvent.ACTION_DOWN)
            {
                mainHutSelected = true;
            }//end if

            if (event.getAction() == MotionEvent.ACTION_UP)
            {
                if (mainHutSelected == true)
                {
                    mainHutSelected = false;
                }//end if
            }//end if
            else if (event.getAction() == MotionEvent.ACTION_MOVE)
            {
                if (mainHutSelected == true)
                {
                    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(v.getWidth(), v.getHeight());
                    params.setMargins((int)(event.getRawX() - event.getRawY() / 2), (int) (event.getRawY() - v.getHeight() * 1.5), (int) (event.getRawX() - v.getWidth() / 2), (int) (event.getRawY() - v.getHeight() * 1.5));
                    v.setLayoutParams(params);
                }//end if
            }//end else

            return false;
        }//end onTouch function

    });//end setOnClickListener

Thanks in advance for the help.

sboehnke
  • 287
  • 1
  • 3
  • 13
  • You're using a LinearLayout and you're just resizing margins for your "mainhut". Margins in a linearlayout will basically push the other contents. One way to do it might be to use a framelayout – raybaybay Jun 10 '14 at 19:47

3 Answers3

1

I suggest you use a FrameLayout. This will make your imageviews stackable.

<FrameLayout>
    <ImageButton/> 
    <ImageButton/>
    <ImageButton/>
    <ImageButton/>
    <ImageButton/>
</FrameLayout>

You will need to set them all to have a static position on the screen based on its parents origin. The 5th ImageButton, you can use it to set the onTouch listener like you did.

Edit: OR you can do something like this (If you wanna keep the linear layout):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/gllayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/mars"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/scores"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageButton
            android:id="@+id/polarCapButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/polarcap"
            android:orientation="vertical" />

        <ImageButton
            android:id="@+id/polarCapButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="575dp"
            android:layout_marginTop="-70dp"
            android:background="@drawable/polarcap"
            android:orientation="vertical" />

        <ImageButton
            android:id="@+id/spaceRockButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="100dp"
            android:background="@drawable/spacerock"
            android:orientation="vertical" />

        <ImageButton
            android:id="@+id/spaceRockButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="520dp"
            android:layout_marginTop="-140dp"
            android:background="@drawable/spacerock"
            android:orientation="vertical" />

        <ImageButton
            android:id="@+id/meteor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="400dp"
            android:layout_marginTop="-100dp"
            android:background="@drawable/meteor"
            android:orientation="vertical"
            android:visibility="invisible" />
    </LinearLayout>

    <ImageButton
        android:id="@+id/mainHut"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="put offset here"
        android:background="@drawable/mainhut" />

</FrameLayout>

Just change the marginTop on mainHut to the offset you want to set it at!

raybaybay
  • 647
  • 6
  • 16
  • You have to use android:layout_marginTop and what do you mean by squishing? – raybaybay Jun 10 '14 at 22:45
  • Well with the 4 non drag and drop image buttons, it seems to sort of flatten them. The drag and drop image button does nothing if I change the android:layout_marginTop – sboehnke Jun 10 '14 at 23:00
  • Its better after your last suggestion. But since I am using the framelayout, my drag and drop imagebutton no longer moves. Any suggestions? Thanks for the help by the way. – sboehnke Jun 10 '14 at 23:14
  • Are you sure you are using FrameLayout.LayoutParams instead of LinearLayout.LayoutParams? – raybaybay Jun 10 '14 at 23:16
  • Don't be shy to vote up if you think it helped! Others might also find it helpful! – raybaybay Jun 11 '14 at 14:08
  • 1
    I fixed my issue by putting the drag and drop imagebutton in its own linearlayout inside of the overall framelayout, but separate from the linearlayout enclosing the 4 non drag and drop imagebuttons. The issue is solved. Now i just need to fix up keeping the image centered around my finger during movement. Thanks! – sboehnke Jun 11 '14 at 19:45
0

Without looking at your XML file, it is probably due to the use of a relative layout - the 4 static buttons may be positioned relative to the button that is being moved, and will move in real-time when dragging and dropping. Try using absolute positioning (e.g., android:layout_marginTop="30dp") instead of relative, or using another type of layout. If you could post both your Activity where this happens and your XML file for that layout, that will better help provide some information for more appropriate answers.

krodmannix
  • 845
  • 10
  • 30
0

I'm not sure if this is what you want. But you could use a floating imageButton, using the Window Manager. But this way the button would be a standalone overlay and no longer be part of the 4-buttons View. See this post: What APIs in Android is Facebook using to create Chat Heads?

Community
  • 1
  • 1
D4ngle
  • 21
  • 7
  • I don't feel like this will work the way I am wanting. The example you showed me is using a service and I tried using an imagebutton in a service before with no luck. But thank you for the idea. – sboehnke Jun 10 '14 at 19:25