Any Idea how to create this layout in android. and more over how to handle click events of irregular shapes?

Question

enter image description here

I want to create a layout like this and handle click event based on irregular sahpes. but I don't know how to do this any help would be appreciated.

A simple way is to use 5 images (4 rectangles and 1 circle sitting on top of the others). — suitianshi, Aug 28 '14 at 08:03

Aviv Ben Shabat · Accepted Answer · 2014-08-28T08:33:36.013

1

Using a RelativeLayout. Make sure the circle comes after the squares in the xml, so it'll be in front of them.

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/centerLine"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginRight="2dp"
        android:layout_weight="1"
        android:src="@android:color/holo_orange_dark" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginLeft="2dp"
        android:layout_weight="1"
        android:src="@android:color/holo_green_dark" />
</LinearLayout>

<View
    android:id="@+id/centerLine"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_centerVertical="true"
    android:background="@android:color/holo_purple" />

<LinearLayout
    android:id="@+id/bottomSquares"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/centerLine"
    android:layout_centerVertical="true"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginRight="2dp"
        android:layout_weight="1"
        android:src="@android:color/holo_red_light" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginLeft="2dp"
        android:layout_weight="1"
        android:src="@android:color/holo_blue_light" />
</LinearLayout>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/circle" />

</RelativeLayout>

edited Aug 28 '14 at 08:33

answered Aug 28 '14 at 08:06

Aviv Ben Shabat

1,013
2
13
32

This is not the proper way to answer. Add some code, give more clarification. – Aniruddha Aug 28 '14 at 08:07
Thanks @Abs much appreciated – Muhammad Zeshan Aug 28 '14 at 08:27
This is more or less it. Just use images instead of colors. – Aviv Ben Shabat Aug 28 '14 at 08:34
@MuhammadZeshan Did it help? – Aviv Ben Shabat Aug 28 '14 at 09:21
Yeah, It's working but I don't know how to register click listener only circular area.. Any idea ??? @Abs – Muhammad Zeshan Aug 29 '14 at 08:14
@MuhammadZeshan Yes. Read this - http://stackoverflow.com/q/1839273/2463875 both answers are good and correct. – Aviv Ben Shabat Aug 29 '14 at 08:21
@Abs No I want to be click only circle surface not on the transparent part.Did you understand? – Muhammad Zeshan Aug 29 '14 at 09:04
For example if you have a circle imageview and you want to click only circular area... circle image also have transparent rectangle area when we click on that part it also clicked. I mean to say that is there any way to click only circular part outside of circle is ignore – Muhammad Zeshan Aug 29 '14 at 09:14
Ok, now I understand. I don't think there is, but I'm not sure there isn't. What you could do, is use a xml shape drawable instead of a PNG image, and then you will not have these transparent angles. – Aviv Ben Shabat Aug 29 '14 at 09:19
@can you give me sample of drawable how you did that?? – Muhammad Zeshan Aug 29 '14 at 09:25
@Abs Can you comment on this? http://stackoverflow.com/questions/25564309/how-to-save-image-in-an-array-android-after-get-response-from-server?noredirect=1#comment39922332_25564309 – Muhammad Zeshan Aug 29 '14 at 16:02

Any Idea how to create this layout in android. and more over how to handle click events of irregular shapes?

1 Answers1