Android - ImageButton clicking

Question

I am attempting to make my image button look good. I've tried a couple different methods but they didn't look right. It's a round image and I want to make it look like it is able to be pressed. Here's what I've got so far. The android:textAppearance="?android:attr/textAppearanceLarge" makes it look like the button is pressed by showing a square box. How does one go about making this work?

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        android:layout_centerHorizontal="true">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/connectButton"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/myImage"
            android:layout_gravity="center"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Press To Connect To Device"
            android:id="@+id/connectMessage"
            android:layout_gravity="center_horizontal|top"
            android:layout_marginTop="10dp" />
    </FrameLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:visibility="gone"
        android:indeterminateDrawable="@drawable/progress" >
    </ProgressBar>

</RelativeLayout>

I can make it work with a regular text button but creating my own selector etc as seen here http://stackoverflow.com/questions/9884202/custom-circle-button Comparing this method to https://developer.android.com/reference/android/widget/ImageButton.html makes me think I need multiple images for default and clicked though — Ubarjohade, Jul 11 '16 at 15:21
This isn't the correct answer but it's a nice way to add a text/image button. http://www.viralandroid.com/2016/01/circular-button-with-icon-and-text-in-android.html — Ubarjohade, Jul 11 '16 at 17:06

Somendra Meena · Accepted Answer · 2016-07-11T19:18:13.143

You can use a .xml file as the drawable of your button. Just select the background of the button as the XML like :

android:background="@drawable/selector1"

And then define your selector1.xml in drawable folder as :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" 
      android:drawable="@color/cyan"/> <!-- pressed state -->
<item android:state_focused="true" 
      android:drawable="@color/magenta"/> <!-- focused state -->
<item android:drawable="@android:color/transparent"/> <!-- default state -->
</selector>

You can also choose different images as your Button background. Also you can use it for both : Button & ImageButton.

Hope it helps ! :)

score 1 · Answer 2 · answered Jul 11 '16 at 15:21

1

Instead of doing this in the XML, why not do it in the java code with an OnClickListener?

You can have two images, the "regular button", and a "pressed button" image.

Then on click you can change the image to the "pressed button" image for a specified amount of time (1 - 3 seconds) and then change it back to the "regular button" if applicable

answered Jul 11 '16 at 15:21

M Y

1,831
4
24
52

Yeah I commented on my post with something similar. I only have 1 image and my Photoshop skills are terrible so I was hoping there was another method. – Ubarjohade Jul 11 '16 at 15:23
@Ubarjohade you can use paint or paint.net for this, just take the color of the button and darken it slightly for the pressed button. If you don't feel comfortable editing images I could do it if you give me the original button – M Y Jul 11 '16 at 15:26

score 0 · Answer 3 · answered Jul 11 '16 at 17:44

This is by no means an optimal way but a nice little method I found looked the way I wanted. I made two xml's for button pressed and default (the code repetition!)

round_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="200dp" />
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="5dip"
        android:color="#000000" />

    <gradient
        android:startColor="#000000"
        android:centerColor="#FFFFFF"
        android:endColor="#000000"
        android:angle="90">
    </gradient>
</shape>

round_button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="200dp" />
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="8dip"
        android:color="#000000" />

    <gradient
        android:startColor="#FFFFFF"
        android:centerColor="#000000"
        android:endColor="#FFFFFF"
        android:angle="90">
    </gradient>
</shape>

Now when you create the button add this. While not optimal this method allows for different type of user click actions and styling.

connectButton.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent event) {
                    if(event.getAction() == MotionEvent.ACTION_DOWN){
                        connectButton.setBackgroundResource(R.drawable.round_button_press);
                        return true;
                    }else if(event.getAction() == MotionEvent.ACTION_UP){
                        connectButton.setBackgroundResource(R.drawable.round_button);
                        connect();
                        return true;
                    }else{
                        Log.e(TAG, event.getAction() + "");
                        return true;
                    }

                }
            });

Android - ImageButton clicking

3 Answers3