how to give my round corner button a feel of being pressed?

Question

I made round corner buttons. but when they are pressed they do not give the feel of being pressed.I want to add this effect to my buttons that when they are clicked they should give a feel like they are pressed/clicked. I created a button_rounded_corners_gradient.xml file in my drawable folder. this file contains the code which makes my button round corner and in a rectangular shape with round corners. then i am using this file in the android:background attribute of my buttons code in xml.

activity_mainn.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.anonymous.fyplogin.MainActivity">


    <Button
        android:id="@+id/fbbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="  Login with Facebook  "
        android:background="@drawable/button_rounded_corners_gradient"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/phbutton"
        app:layout_constraintVertical_bias="0.919" />

    <Button
        android:id="@+id/phbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="  Login with Phone  "
        android:background="@drawable/button_rounded_corners_gradient"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="71dp" />
</android.support.constraint.ConstraintLayout>

button_rounded_corners_gradient.xml

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

    <item>
        <shape android:shape="rectangle">
            <!--make a gradient background-->
            <gradient
                android:type="linear"
                android:startColor="#003333"
                android:endColor="#003333"
                android:centerColor="#003333"
                android:angle="90"
                android:gradientRadius="90"
                />
            <!--apply a border around button-->
            <stroke android:color="#ff0000" android:width="2dp" />
            <!-- make the button corners rounded-->
            <corners android:radius="25dp"/>
        </shape>
    </item>

</selector>

look at this article https://stackoverflow.com/questions/3882064/how-to-change-color-of-button-in-android-when-clicked hope it'll help you — Ara Hakobyan, Oct 12 '17 at 11:31

Nabin Bhandari · Answer 1 · 2017-10-12T11:14:28.300

1

Use foreground attribute:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_rounded_corners_gradient"
    android:foreground="?android:selectableItemBackground" />

edited Oct 12 '17 at 11:14

answered Oct 12 '17 at 11:08

Nabin Bhandari

15,949
6
45
59

dotGitignore · Accepted Answer · 2017-10-12T23:23:55.197

You can add a android:state to your button_rounded_corners_gradient.xml

from:

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

    <item>
        <shape android:shape="rectangle">
            <!--make a gradient background-->
            <gradient
                android:type="linear"
                android:startColor="#003333"
                android:endColor="#003333"
                android:centerColor="#003333"
                android:angle="90"
                android:gradientRadius="90"
                />
            <!--apply a border around button-->
            <stroke android:color="#ff0000" android:width="2dp" />
            <!-- make the button corners rounded-->
            <corners android:radius="25dp"/>
        </shape>
    </item>

</selector>

to:

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

    <!-- The normal state of the button -->
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <stroke android:color="#ff0000" android:width="1dp" />
            <!-- make the button corners rounded-->
            <corners android:radius="25dp"/>
        </shape>
    </item>

    <!-- The state when the button is being pressed or clicked. -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_dark"/>
            <!--apply a border around button-->
            <stroke android:color="#ff0000" android:width="1dp" />
            <!-- make the button corners rounded-->
            <corners android:radius="25dp"/>
        </shape>
    </item>
</selector>

to give a vibration effect to your button when clicked. add this <uses-permission android:name="android.permission.VIBRATE"/> permission to your AndroidManifest.xml and do this to your activity.

@Override
protected void onCreate(Bundle savedInstanceState) {
    //...
    final Vibrator vibrator = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);

    Button button = findViewById(R.id.button1);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            // Set the milliseconds of vibration you want.
            vibrator.vibrate(500);
        }
    });
}

Thankyou so much . it is working fine. but the problem is that it gives a very small effect of a button being pressed. if the user looks with full attention then the user can feel that button is pressed otherwise not. is there any way to make this effect more clear. — Umair, Oct 12 '17 at 12:05
I edited my answer, you can play the `` tag if you want to create an awesome effect to your buttons. — dotGitignore, Oct 12 '17 at 12:14
thank you so much this thing helped me allot . can you just help me I one more thing. that if I want to put this effect in my button that my mobile should vibrate little bit when the button is clicked — Umair, Oct 12 '17 at 13:20
@UmairAziz I edited again my answer as your request. can you mark my answer as accepted. Thanks. — dotGitignore, Oct 24 '17 at 13:28

score 0 · Answer 3 · answered Oct 12 '17 at 11:03

0

for the xml you created in drawable to make button rectangle add this line to that xml

<item android:state_pressed="true">

answered Oct 12 '17 at 11:03

Sunil P

3,698
3
13
20

score 0 · Answer 4 · answered Oct 12 '17 at 11:59

You should try ripple for the wave effect on button pressed so as to get a button pressed feel ;)

just make a new drawable file and set this file as background to the button...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorPrimary">
</ripple>

Hope it helps

how to give my round corner button a feel of being pressed?

4 Answers4