如何使多个按钮居中于3张不同的图像，并且onClick无法正常工作

Question

I'm trying to make an android app that when the user clicks one of the buttons the picture will change either to the next picture in the array or the picture before. I also was wondering how you can center buttons to these images. Currently I have specified my heights for the buttons and the top margin to get the buttons centered to the images. I'm assuming that when you change the size of the device the buttons will no longer be in the right positions. As this may be hard to understand i'm providing a picture to show further description. http://imgur.com/XovnKAW This is what I currently have now http://imgur.com/gPeQ2Rl (ignore the picture of the button, i just used the first random image I saw)

My current Java code with non working onClick

package com.leagueoflegends.leagueofswitches;

import android.R.color;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class Main extends Activity implements View.OnClickListener {

int headImages[] = { R.drawable.button, R.drawable.random_head };

ImageView topView = (ImageView) findViewById(R.id.ivTop);
ImageView middleView = (ImageView) findViewById(R.id.ivSecond);
ImageView bottomView = (ImageView) findViewById(R.id.ivThird);

Button bTopLeft;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.league_main);

    bTopLeft = (Button) findViewById(R.id.bTopLeft);
    bTopLeft.setOnClickListener(this);

    Button bTopRight = (Button) findViewById(R.id.bTopRight);
    bTopRight.setOnClickListener(this);

    Button bMiddleLeft = (Button) findViewById(R.id.bMiddleLeft);
    bMiddleLeft.setOnClickListener(this);

    Button bMiddleRight = (Button) findViewById(R.id.bMiddleRight);
    bMiddleRight.setOnClickListener(this);

    Button bBottomLeft = (Button) findViewById(R.id.bBottomLeft);
    bBottomLeft.setOnClickListener(this);

    Button bBottomRight = (Button) findViewById(R.id.bBottomRight);
    bBottomRight.setOnClickListener(this);
}

public void onClick(View v) {

    switch (v.getId()) {
    case R.id.bTopLeft:
        // do something
        topView.setImageResource(R.drawable.random_head);
        break;
    case R.id.bTopRight:
        // do something else
        topView.setImageResource(R.drawable.random_head);
        break;
    case R.id.bMiddleLeft:
        // do something
        topView.setImageResource(R.drawable.random_head);
        break;
    case R.id.bMiddleRight:
        // do something else
        topView.setImageResource(R.drawable.random_head);
        break;
    case R.id.bBottomLeft:
        // do something
        topView.setImageResource(R.drawable.random_head);
        break;
    case R.id.bBottomRight:
        // do something else
        topView.setImageResource(R.drawable.random_head);
        break;

    }
}

}

This is the current xml file I have

       <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/ivTop"
    android:layout_width="fill_parent"
    android:layout_height="181sp"
    android:background="@drawable/button"
     />

<Button
    android:id="@+id/bTopLeft"
    android:layout_width="50sp"
    android:layout_height="50sp"
    android:layout_alignLeft="@id/ivTop"
    android:layout_marginTop="75sp" />

<Button
    android:id="@+id/bTopRight"
    android:layout_width="50sp"
    android:layout_height="50sp"
    android:layout_alignRight="@id/ivTop"
    android:layout_marginTop="75sp" />

<ImageView
    android:id="@+id/ivSecond"
    android:layout_width="fill_parent"
    android:layout_height="181sp"
    android:layout_below="@id/ivTop"
    android:background="@drawable/button" />

<Button
    android:id="@+id/bMiddleLeft"
    android:layout_width="50sp"
    android:layout_height="50sp"
    android:layout_alignLeft="@id/ivSecond"
    android:layout_marginTop="250sp" />

<Button
    android:id="@+id/bMiddleRight"
    android:layout_width="50sp"
    android:layout_height="wrap_content"
    android:layout_alignRight="@id/ivSecond"
    android:layout_marginTop="250sp" />

<ImageView
    android:id="@+id/ivThird"
    android:layout_width="fill_parent"
    android:layout_height="182sp"
    android:layout_below="@id/ivSecond"
    android:background="@drawable/button" />

<Button
    android:id="@+id/bBottomLeft"
    android:layout_width="50sp"
    android:layout_height="50sp"
    android:layout_alignLeft="@id/ivThird"
    android:layout_marginTop="450sp" />

<Button
    android:id="@+id/bBottomRight"
    android:layout_width="50sp"
    android:layout_height="50sp"
    android:layout_alignRight="@id/ivThird"
    android:layout_marginTop="450sp" />

  </RelativeLayout>

Answer 1

Change your declaration to below code:

public class Main extends Activity implements View.OnClickListener {

int headImages[] = { R.drawable.button, R.drawable.random_head };

ImageView topView;
ImageView middleView ;
ImageView bottomView ;
Button bTopLeft;


@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.league_main);
topView = (ImageView) findViewById(R.id.ivTop);
middleView = (ImageView) findViewById(R.id.ivSecond);
bottomView = (ImageView) findViewById(R.id.ivThird);

// Button declaration
.
.
// rest of the code

Component can not be initialized out of the view so u have to initialize it within onCreate() .

Answer 2

You have to call findViewById() only after setContentView() .
Change the code as:

public class Main extends Activity implements View.OnClickListener {

int headImages[] = { R.drawable.button, R.drawable.random_head };

ImageView topView;
ImageView middleView;
ImageView bottomView;

Button bTopLeft;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.league_main);
    topView = (ImageView) findViewById(R.id.ivTop);
    middleView = (ImageView) findViewById(R.id.ivSecond);
    bottomView = (ImageView) findViewById(R.id.ivThird);
    /*Rest of the code*/
}
/* onClick listener */
}

Answer 3

Your onClick doesn't work because, you must initialise your ImageView after setContentView() and in your onCreate method. See this example:

ImageView myViewVariable;  

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.layout_main);
    myViewVariable = (ImageView) findViewById(R.id.myIdImage);

    // do some stuff
}

And to centered your images and buttons, I think you can use a LinearLayout as global container (which define 3 sections properly on all devices) and 3 children RelativeLayout to set alignment, see below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3" > 
    <!-- Here we say: make a global container with 3 sections (weightSum) 
         oriented in Vertical way (orientation) whatever the height
         of the screen -->

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >
        <!-- Here we define: make a child container which take place
        of 1 section (weight) in "Vertical" way (the height to 0dp) -->

        <ImageView
            android:id="@+id/ivTop"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/button" />  
            <!-- Here we set: an height fill_parent, which be nice for all
            devices -->

        <Button
            android:id="@+id/bTopLeft"
            android:layout_width="50sp"
            android:layout_height="50sp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" />
            <!-- Here we say: center in Vertical whatever the height
            and align to the Left of the RelativeLayout -->

        <Button
            android:id="@+id/bTopRight"
            android:layout_width="50sp"
            android:layout_height="50sp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />
            <!-- Same but now align to Right -->

    </RelativeLayout>  

    <!-- Same for all the rest of your layout. -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/ivSecond"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/button" />

        <Button
            android:id="@+id/bMiddleLeft"
            android:layout_width="50sp"
            android:layout_height="50sp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" />

        <Button
            android:id="@+id/bMiddleRight"
            android:layout_width="50sp"
            android:layout_height="50sp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" /> 

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/ivThird"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/button" />

        <Button
            android:id="@+id/bBottomLeft"
            android:layout_width="50sp"
            android:layout_height="50sp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" />

        <Button
            android:id="@+id/bBottomRight"
            android:layout_width="50sp"
            android:layout_height="50sp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />

    </RelativeLayout>

</LinearLayout>  

Hope this is what you waiting for.

Answer 4

Your onClick will be fixed by shifting the initialization of ImageView inside onCreate and your desired layout can be achieved by below code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/ivTop"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:background="@drawable/ic_launcher" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="left" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|right"
            android:text="right" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/ivTop"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:background="@drawable/ic_launcher" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="left" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|right"
            android:text="right" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/ivTop"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:background="@drawable/ic_launcher" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="left" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|right"
            android:text="right" />
    </FrameLayout>

</LinearLayout>