CODEWITHSUNDEEP
javaandroidxmlandroid-layout
Aishvarya Jaiswal
Aishvarya Jaiswal

Reputation: 1811

2 semi circle seekarc around a button

I am trying to make a layout which should look like this.

enter image description here

I am using TriggerTrap/SeekArc from github. Here is my xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:seekarc="http://schemas.android.com/apk/res/com.triggertrap.sample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/black"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <FrameLayout
        android:id="@+id/seekArcContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <com.triggertrap.seekarc.SeekArc
            android:id="@+id/seekArc1"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:padding="20dp"
            seekarc:arcColor="#808080"
            seekarc:clockwise="true"
            seekarc:max="500"
            seekarc:progressColor="@android:color/white"
            seekarc:rotation="275"
            seekarc:startAngle="0"
            seekarc:sweepAngle="175"
            seekarc:thumb="@drawable/custom_seek_arc_control_selector"
            seekarc:touchInside="false" />


        <com.triggertrap.seekarc.SeekArc
            android:id="@+id/seekArc2"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:padding="20dp"
            seekarc:arcColor="#808080"
            seekarc:clockwise="true"
            seekarc:max="500"
            seekarc:progressColor="@android:color/white"
            seekarc:rotation="95"
            seekarc:startAngle="0"
            seekarc:sweepAngle="175"
            seekarc:thumb="@drawable/custom_seek_arc_control_selector"
            seekarc:touchInside="false" />

        <Button 
            android:id="@+id/btn"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="@drawable/scrubber_pressed"/>
    </FrameLayout>

</LinearLayout>

Now, the problem is, since I am using frame layout, only one seekarc is clickable. If I change the seekarc to linear layout, the whole layout gets distorted like this.

enter image description here

Now everything is clickable but the design is finished. Can anyone please tell me how to make it work such that the button as well as both seekarc are touchable and also the design remains unaffected.

Upvotes: 1

Views: 1633

Answers (2)

Jeroen Mols
Jeroen Mols

Reputation: 3464

As an alternative to @matiash approach, you can also, you can also wrap the SeekArcs in a new FrameLayout container to avoid the arcs from overlapping in the first place.

Downside is that this increases your view nesting hierarchy, but on the upside you don't have to make any code changes or touch the library code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:seekarc="http://schemas.android.com/apk/res/com.triggertrap.sample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/black"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:id="@+id/seekArcContainer"
        android:layout_width="match_parent"
        android:layout_height="300dp" >

        <FrameLayout
            android:layout_width="300dp"
            android:layout_height="150dp"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="150dp">

            <com.triggertrap.seekarc.SeekArc
                android:id="@+id/seekArc1"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:padding="20dp"
                seekarc:arcColor="#808080"
                seekarc:clockwise="true"
                seekarc:max="500"
                seekarc:progressColor="@android:color/white"
                seekarc:rotation="275"
                seekarc:startAngle="0"
                seekarc:sweepAngle="175"
                seekarc:thumb="@drawable/custom_seek_arc_control_selector"
                seekarc:touchInside="false" />

        </FrameLayout>

        <FrameLayout
            android:layout_width="300dp"
            android:layout_height="150dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true">

            <com.triggertrap.seekarc.SeekArc
                android:id="@+id/seekArc2"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_gravity="bottom"
                android:padding="20dp"
                seekarc:arcColor="#808080"
                seekarc:clockwise="true"
                seekarc:max="500"
                seekarc:progressColor="@android:color/white"
                seekarc:rotation="95"
                seekarc:startAngle="0"
                seekarc:sweepAngle="175"
                seekarc:thumb="@drawable/custom_seek_arc_control_selector"
                seekarc:touchInside="false" />

        </FrameLayout>

        <Button 
            android:id="@+id/btn"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_centerInParent="true"
            android:background="@drawable/scrubber_pressed"/>
    </RelativeLayout>

</LinearLayout>

enter image description here

Upvotes: 5

matiash
matiash

Reputation: 55380

The suggestion by @corsair992 is very good. However, reimplementing onTouchEvent() in a FrameLayout descendant is not as easy at it sounds, since it's a very complex method with many special conditions.

In this particular case, the problem is that the FrameLayout contains two SeekArc views, and the one in the foreground is consuming all touch events. Therefore, altering SeekArc itself to ignore events that do not belong to it seems like a much simpler alternative. If SeekArc.ounTouchEvent() returns false for these "unwanted" touches, then its FrameLayout parent will attempt passing the event to its other child -- exactly what we want.

Therefore, the solution is to change it like this:

@Override
public boolean onTouchEvent(MotionEvent event) {

    if (isUnwantedTouch(event))
        return false;

    switch (event.getAction()) {
    // ... same as before
}

Where the isUnwantedTouch() method is:

protected boolean isUnwantedTouch(MotionEvent event)
{
    return (ignoreTouch(event.getX(), event.getY()) ||
            getProgressForAngle(getTouchDegrees(event.getX(), event.getY())) == INVALID_PROGRESS_VALUE);
}

Upvotes: 3

Related Questions