Expand View's Touch area in Android

There is an issue that I met a few days ago, my colleague wants me to improve the checkbox's clickable experience in Android. Following is the layout code and its visual effect.


Then the xml layout file:

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:id="@+id/checkbox1_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="50dp"
                android:layout_marginRight="50dp"
                android:gravity="center"
                android:orientation="horizontal">
                <CheckBox
                    android:id="@+id/checkbox1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="CheckBox 1"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/checkbox2_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="50dp"
                android:layout_marginRight="50dp"
                android:gravity="center"
                android:orientation="horizontal">
                <CheckBox
                    android:id="@+id/checkbox2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="CheckBox 2"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/checkbox3_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="50dp"
                android:layout_marginRight="50dp"
                android:gravity="center"
                android:orientation="horizontal">
                <CheckBox
                    android:id="@+id/checkbox3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="CheckBox 3"/>
            </LinearLayout>

        </LinearLayout>

My first response to those question is to listen the CheckBox's parent container then control its state. While it works, until I met the TouchDelegate which is also mentioned in the official document.

Here is the much more elegant solution by employing the TouchDelegate(written by kotlin).


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val box1 = findViewById(R.id.checkbox1)
        val box1Parent = findViewById(R.id.checkbox1_container)

        val box2 = findViewById(R.id.checkbox2)
        val box2Parent = findViewById(R.id.checkbox2_container)

        val box3 = findViewById(R.id.checkbox3)
        val box3Parent = findViewById(R.id.checkbox3_container)

        expandViewHitArea(box1Parent, box1)
        expandViewHitArea(box2Parent, box2)
        expandViewHitArea(box3Parent, box3)
    }

    private fun expandViewHitArea(parent : View, child : View) {

        parent.post {

            val parentRect = Rect()
            val childRect = Rect()
            parent.getHitRect(parentRect)
            child.getHitRect(childRect)

            childRect.left = 0
            childRect.top = 0
            childRect.right = parentRect.width()
            childRect.bottom = parentRect.height()

            parent.touchDelegate = TouchDelegate(childRect, child)
        }
    }


Comments

Post a Comment

Popular posts from this blog

How Bluetooth LE works? -- Link Layer

Image
How Bluetooth LE works? - Link layer Table of Contents 1 Bluetooth LE system architecture 2 Bluetooth LE Physical layer 3 Bluetooth LE Link Layer states 4 Bluetooth LE Link Layer packets 1 Bluetooth LE system architecture This is the first post and hopefully a series of upcoming postings about Bluetooth Low Energy. Above figure is the protocol stack of a whole Bluetooth LE system. The Bluetooth LE is one part of Bluetooth v4.0 specification, it was designed not to pursue high transmission speed but for lower energy consumption. So the Bluetooth LE products can be powered by a button-cell battery for years. How did it do that? This article is a review of Robin Heydon's excellent book – Bluetooth Low Energy, the developer's handbook. Bluetooth LE is completely redesigned of classic Bluetooth protocol, It seems that both the Bluetooth LE and classic Bluetooth has the same architecture from above figure, but actually they are so different inside, an...
Read more

Bluedroid stack in android

Image
Bluedroid stack in android Table of Contents Bluetooth stack in android Bluedroid .VS. Bluez Porting guide of Bluedroid stack 1 Bluetooth stack in android From Android 4.2, google use Bluedroid stack as its default Bluetooth host stack, before android 4.2, its default Bluetooth host stack was Bluez, which is also the Linux distribution's default stack. So why google changed its Bluetooth stack? The reason is maybe that Bluez stack was designed for the desktop environment, so in order to port Bluez into android, android must solve some dependency issues, like porting Dbus, Linux desktop's default IPC, into android. So there are at least five processes to power Bluetooth before android 4.2, they are systems, Bluetooth APP, Bluez, hciattach, and Dbus. The damn thing is that there are bugs between them, so Bluetooth stack is the weakest part in the android system before android 4.2, yeah, it is the usual reason that android system corrupted. So, what's t...
Read more

Network programming in elisp

  Network API in elisp Table of Contents 1 Introduction 2 A example 3 Http server implemented by elisp 1 Introduction Emacs is not just an editor, Yes, that's true. Emacs lisp can do network connection programming by its network API. But there is something difference with other kinds of programming language. First, elisp do not support multi-thread, pretty cool, huh!! Yeh, Multi-threads programming is a horrible venture for you, right! Second, There is no socket similarly conception in elisp, and elisp provide network programming ability as processes. Elisp can open a network connection by function – open-network-stream .  It can make network connection server listen a special port by function - make-network-process . Both of those function return a process object. Then you can communicate with the process by process's API. 2 A example I write a snippet code to figure out How to use it. ( require ' cl ) ( defvar my-network-client-b...
Read more