CODEWITHSUNDEEP
androiduser-interface
Fartab
Fartab

Reputation: 5493

Design overlay UI in android


I want to design a layout for an activity with 3 buttons (each one is a card) that seems like this:

enter image description here


I know that i can design it with FrameLayout, if so then i can't handle each 'card' onClick event beacause in FrameLayout the toppest layer is touchable.
Is there any idea?
Thanks in advance.

Upvotes: 0

Views: 516

Answers (2)

Fartab
Fartab

Reputation: 5493

Finally i solved my problem by 'pixel colors' of my image buttons.
I write an OnTouch event listener for my image buttons (cards) which determines the color of touched location on the screen and then can determine which 'card' is touched by means of comparing this color with color of 'cards'.
Thanks to all. This is the code:

findViewById(R.id.imgCard1).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if(event.getAction()==MotionEvent.ACTION_DOWN) {
                    int x = (int) event.getX();
                    int y = (int) event.getY();

                    ImageView card1 = (ImageView) findViewById(R.id.imgCard1);
                    ImageView card2 = (ImageView) findViewById(R.id.imgCard2);
                    ImageView card3 = (ImageView) findViewById(R.id.imgCard3);

                    int color1 = Color.argb(255, 250, 250, 250);
                    int color2 = Color.argb(255, 209, 201, 198);
                    int color3 = Color.argb(255, 226, 223, 222);

                    if (card1 != null && isColorTouched(card1, x, y, color1)) {
                        // card1 is touched
                    } else if (card2 != null && isColorTouched(card2, x, y, color2)) {
                        // card2 is touched
                    } else if (card3 != null && isColorTouched(card3, x, y, color3)) {
                        // card3 is touched
                    }
                    return true; //means that event is consumed!
                }
                return false;
            }
        });
    public static boolean isColorTouched(ImageView imageView, int x, int y, int color) {
        final int TOLERANCE = 5;
        Bitmap bitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
        int viewH = imageView.getHeight();
        int viewW = imageView.getWidth();
        int h = bitmap.getHeight();
        int w = bitmap.getWidth();
        float hScale = 1.0f*h/viewH;
        float wScale = 1.0f*w/viewW;

        int scaledX = (int) (x*wScale);
        int scaledY = (int) (y*hScale);
        if (scaledX>=0 && scaledY>=0 && scaledX <= w && scaledY <= h) {
            int pixel = bitmap.getPixel(scaledX, scaledY);
            if (Math.abs(Color.red(color) - Color.red(pixel)) > TOLERANCE)
                return false;
            if (Math.abs(Color.green(color) - Color.green(pixel)) > TOLERANCE)
                return false;
            if (Math.abs(Color.blue(color) - Color.blue(pixel)) > TOLERANCE)
                return false;
            return true;

        }
        return false;
    }

Upvotes: 1

Rishi Paul
Rishi Paul

Reputation: 936

I am giving you a small idea how to work with this. Rest You can Design According to your Requirements.

Here is the Code

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

<ImageView
    android:id="@+id/test_button_image"
    android:layout_width="300dp"
    android:layout_height="250dp"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/app_name"
    android:scaleType="fitXY"
    android:src="@drawable/cardd2" >
</ImageView>

<ImageView
    android:id="@+id/test_button_image1"
    android:layout_width="250dp"
    android:layout_height="270dp"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/app_name"
    android:scaleType="fitXY"
    android:src="@drawable/cardd2" >
</ImageView>
 <ImageView
    android:id="@+id/test_button_image2"
    android:layout_width="200dp"
    android:layout_height="290dp"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/app_name"
    android:scaleType="fitXY"
    android:src="@drawable/cardd2" >
</ImageView>

Here is the Output

output

Design it acc to your requirements

You can Also get Click event on all if you want to perform different function from these

Upvotes: 2

Related Questions