I want to create a button with a rhombus shape like on the Material website :
I searched the web and didn't find an answer so I'm asking it here.
I already found out how to create a rhombus shape:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="60dp"
android:width="60dp"
android:right="20dp"
android:left="20dp"
android:gravity="center">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:shape="rectangle">
<solid
android:color="@color/black" />
</shape>
</rotate>
</item>
and this is my Image Button :
<ImageButton
android:layout_width="85dp"
android:layout_height="85dp"
android:background="@drawable/button_test"
android:src="@drawable/ic_pause_white"
/>
"@drawable/ic_pause_white" is a pause icon vector I imported.
Now I have a pause button with a rhombus shape but my problem is that the hitbox doesn't match the image (like expected)
I already tried to create an OnTouchListener
ImageButton btnPlay = findViewById(R.id.btnPlay_Song);
btnPlay.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
int eventPadTouch = event.getAction();
float iX=event.getX();
float iY=event.getY();
switch (eventPadTouch) {
case MotionEvent.ACTION_DOWN:
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.button_test);
if (iX>=0 & iY>=0 & iX<bitmap.getWidth() & iY<bitmap.getHeight()) { //Makes sure that X and Y are not less than 0, and no more than the height and width of the image.
if (bitmap.getPixel((int) iX, (int) iY)!=0) {
// actual image area is clicked(alpha not equal to 0), do something
Toast.makeText(ActivityPlayerSong.this, "Play", Toast.LENGTH_SHORT).show();
}
}
return true;
}
return false;
}
});
but I was wondering if there is an easier method to do it and if there isn't using the code above "BitmapFactory.decodeResource(getResources(), R.drawable.button_test)" is returning null and I don't know why.
Thank You in advance to everyone who tries to help me!
An alternative to a more "technically correct" solution: What if you used a square background and then rotated the icon 45 degrees clockwise and rotated the whole button 45 degrees counter-clockwise?
<ImageButton
android:background="@color/black"
app:srcCompat="@drawable/ic_camera_45deg"
android:rotation="-45"
android:layout_width="48dp"
android:layout_height="48dp"/>
Here the background is a solid color so you won't get any visual touch feedback. You'll want to use a <selector>
drawable on Android 4 and <ripple>
drawable on Android 5+ for that.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="@color/white"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group
android:pivotX="12"
android:pivotY="12"
android:rotation="45">
<!-- Original paths go here. -->
</group>
</vector>
Notice the tint
attribute. Make sure the pivot point is in the middle of viewportWidth
and viewportHeight
if your icon is not 24x24.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.