On a recent client app, I ran into a situation where I needed an arbitrary number of EditText fields based on a selected value, where the user could enter people’s information. My initial thought was to put this logic in my Fragment, just adding EditTexts to a LinearLayout container as the selected value changes, but that bloated my Fragment, and didn’t allow for much reuse.
This was a perfect opportunity to encapsulate this interaction functionality in a custom view, which would be reusable throughout the app (required in two places so far), and would allow me to easily test the encapsulated functionality.
# What Are Custom Compound Views
The Android framework provides many Views and Layouts, but sometimes developers need to create their own. Sometimes these are extensions of the built in class to add functionality, like supporting custom fonts and letter spacing in TextViews. Other times these are simply because a built in view doesn’t exist for the desired functionality, like radial dials.
What I’m talking about are custom compound views, views that are made up of multiple other views, whether those are builtin or custom, to encapsulate complex interaction and functionality.
I use compound views in cases where a full fledged Fragment is more than I need, but I want reusable, testable components. The example I explained above is a great example of that. Since the code for that was for a client project, I’ve created a simple project to demonstrate creating and using custom compound views available [here](https://github.com/rharter/CompoundViews).
# The Custom View
In this example, we want a custom view that adds EditTexts so that the user can enter data for an arbitrary number of items. In a custom view, this can easily be done with a simple container view (LinearLayout) that sets the appropriate number of EditTexts, and allows you to easily fetch a list of names. Here’s the code:
<div class="highlight" style="font-weight: inherit; font-style: inherit;">
<table style="font-weight: inherit; font-style: inherit;">
<tr style="font-weight: inherit; font-style: inherit;">
<td class="gutter" style="font-style: inherit;">
```
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
</td>
<td class="code" style="font-style: inherit;">
```
`<span class="line"><span class="cm" style="font-style: italic !important; color: #c5c8c6 !important;">/**</span>
</span><span class="line"><span class="cm" style="font-style: italic !important; color: #c5c8c6 !important;"> * A custom compound view that displays an arbitrary</span>
</span><span class="line"><span class="cm" style="font-style: italic !important; color: #c5c8c6 !important;"> * number of text views to enter your friends names.</span>
</span><span class="line"><span class="cm" style="font-style: italic !important; color: #c5c8c6 !important;"> */</span>
</span><span class="line"><span class="kd" style="color: #81a2be !important;">public</span> <span class="kd" style="color: #81a2be !important;">class</span> <span class="nc" style="color: #85678f !important;">FriendNameView</span> <span class="kd" style="color: #81a2be !important;">extends</span> <span class="n" style="color: #81a2be !important;">LinearLayout</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">private</span> <span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">mFriendCount</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">private</span> <span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">mEditTextResId</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">FriendNameView</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">Context</span> <span class="n" style="color: #81a2be !important;">context</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">this</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">context</span><span class="o" style="font-weight: bold !important;">,</span> <span class="kc" style="font-weight: bold !important; color: #b5bd68 !important;">null</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">FriendNameView</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">Context</span> <span class="n" style="color: #81a2be !important;">context</span><span class="o" style="font-weight: bold !important;">,</span> <span class="n" style="color: #81a2be !important;">AttributeSet</span> <span class="n" style="color: #81a2be !important;">attrs</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">this</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">context</span><span class="o" style="font-weight: bold !important;">,</span> <span class="n" style="color: #81a2be !important;">attrs</span><span class="o" style="font-weight: bold !important;">,</span> <span class="mi" style="color: #8abeb7 !important;">0</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">FriendNameView</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">Context</span> <span class="n" style="color: #81a2be !important;">context</span><span class="o" style="font-weight: bold !important;">,</span> <span class="n" style="color: #81a2be !important;">AttributeSet</span> <span class="n" style="color: #81a2be !important;">attrs</span><span class="o" style="font-weight: bold !important;">,</span> <span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">defStyle</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">super</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">context</span><span class="o" style="font-weight: bold !important;">,</span> <span class="n" style="color: #81a2be !important;">attrs</span><span class="o" style="font-weight: bold !important;">,</span> <span class="n" style="color: #81a2be !important;">defStyle</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">setOrientation</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">VERTICAL</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="kt" style="color: #8abeb7 !important;">int</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">getFriendCount</span><span class="o" style="font-weight: bold !important;">()</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">return</span> <span class="n" style="color: #81a2be !important;">mFriendCount</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="kt" style="color: #8abeb7 !important;">void</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">setFriendCount</span><span class="o" style="font-weight: bold !important;">(</span><span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">friendCount</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">if</span> <span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">friendCount</span> <span class="o" style="font-weight: bold !important;">!=</span> <span class="n" style="color: #81a2be !important;">mFriendCount</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">mFriendCount</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="n" style="color: #81a2be !important;">friendCount</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">removeAllViews</span><span class="o" style="font-weight: bold !important;">();</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">for</span> <span class="o" style="font-weight: bold !important;">(</span><span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">i</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="mi" style="color: #8abeb7 !important;">0</span><span class="o" style="font-weight: bold !important;">;</span> <span class="n" style="color: #81a2be !important;">i</span> <span class="o" style="font-weight: bold !important;"><</span> <span class="n" style="color: #81a2be !important;">mFriendCount</span><span class="o" style="font-weight: bold !important;">;</span> <span class="n" style="color: #81a2be !important;">i</span><span class="o" style="font-weight: bold !important;">++)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">addView</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">createEditText</span><span class="o" style="font-weight: bold !important;">());</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">private</span> <span class="n" style="color: #81a2be !important;">View</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">createEditText</span><span class="o" style="font-weight: bold !important;">()</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">View</span> <span class="n" style="color: #81a2be !important;">v</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">if</span> <span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">mEditTextResId</span> <span class="o" style="font-weight: bold !important;">></span> <span class="mi" style="color: #8abeb7 !important;">0</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">LayoutInflater</span> <span class="n" style="color: #81a2be !important;">inflater</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="n" style="color: #81a2be !important;">LayoutInflater</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">from</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">getContext</span><span class="o" style="font-weight: bold !important;">());</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">v</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="n" style="color: #81a2be !important;">inflater</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">inflate</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">mEditTextResId</span><span class="o" style="font-weight: bold !important;">,</span> <span class="k" style="color: #de935f !important;">this</span><span class="o" style="font-weight: bold !important;">,</span> <span class="kc" style="font-weight: bold !important; color: #b5bd68 !important;">true</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span> <span class="k" style="color: #de935f !important;">else</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">EditText</span> <span class="n" style="color: #81a2be !important;">et</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="k" style="color: #de935f !important;">new</span> <span class="n" style="color: #81a2be !important;">EditText</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">getContext</span><span class="o" style="font-weight: bold !important;">());</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">et</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">setHint</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">R</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">string</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">friend_name</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">v</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="n" style="color: #81a2be !important;">et</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">return</span> <span class="n" style="color: #81a2be !important;">v</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="kt" style="color: #8abeb7 !important;">int</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">getEditTextResId</span><span class="o" style="font-weight: bold !important;">()</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">return</span> <span class="n" style="color: #81a2be !important;">mEditTextResId</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="kt" style="color: #8abeb7 !important;">void</span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">setEditTextResId</span><span class="o" style="font-weight: bold !important;">(</span><span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">editTextResId</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">mEditTextResId</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="n" style="color: #81a2be !important;">editTextResId</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="cm" style="font-style: italic !important; color: #c5c8c6 !important;">/**</span>
</span><span class="line"><span class="cm" style="font-style: italic !important; color: #c5c8c6 !important;"> * Returns a list of entered friend names.</span>
</span><span class="line"><span class="cm" style="font-style: italic !important; color: #c5c8c6 !important;"> */</span>
</span><span class="line"> <span class="kd" style="color: #81a2be !important;">public</span> <span class="n" style="color: #81a2be !important;">List</span><span class="o" style="font-weight: bold !important;"><</span><span class="n" style="color: #81a2be !important;">String</span><span class="o" style="font-weight: bold !important;">></span> <span class="nf" style="font-weight: bold !important; color: #81a2be !important;">getFriendNames</span><span class="o" style="font-weight: bold !important;">()</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">List</span><span class="o" style="font-weight: bold !important;"><</span><span class="n" style="color: #81a2be !important;">String</span><span class="o" style="font-weight: bold !important;">></span> <span class="n" style="color: #81a2be !important;">names</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="k" style="color: #de935f !important;">new</span> <span class="n" style="color: #81a2be !important;">ArrayList</span><span class="o" style="font-weight: bold !important;"><>();</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">for</span> <span class="o" style="font-weight: bold !important;">(</span><span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">i</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="mi" style="color: #8abeb7 !important;">0</span><span class="o" style="font-weight: bold !important;">;</span> <span class="n" style="color: #81a2be !important;">i</span> <span class="o" style="font-weight: bold !important;"><</span> <span class="n" style="color: #81a2be !important;">getChildCount</span><span class="o" style="font-weight: bold !important;">();</span> <span class="n" style="color: #81a2be !important;">i</span><span class="o" style="font-weight: bold !important;">++)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">View</span> <span class="n" style="color: #81a2be !important;">v</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="n" style="color: #81a2be !important;">getChildAt</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">i</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">if</span> <span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">v</span> <span class="k" style="color: #de935f !important;">instanceof</span> <span class="n" style="color: #81a2be !important;">EditText</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">EditText</span> <span class="n" style="color: #81a2be !important;">et</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">EditText</span><span class="o" style="font-weight: bold !important;">)</span> <span class="n" style="color: #81a2be !important;">v</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">names</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">add</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">et</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">getText</span><span class="o" style="font-weight: bold !important;">().</span><span class="na" style="color: #81a2be !important;">toString</span><span class="o" style="font-weight: bold !important;">());</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"> <span class="k" style="color: #de935f !important;">return</span> <span class="n" style="color: #81a2be !important;">names</span><span class="o" style="font-weight: bold !important;">;</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"><span class="o" style="font-weight: bold !important;">}</span>
</span>`
</td>
</tr>
</table>
</div></figure>
When the user sets the number of friends with `setFriendCount(int)`, we reset the number of child EditText fields based on that number. This can be done with a custom layout resource, but will default to a simple EditText.
When we want to retrieve the list of names the user has entered, we don’t care about any of the internal structure of the custom view since we can just call `getFriendNames()` and the view will compile a list of names.
That’s all there is to this simple example. As a special side effect, since this view is just made up of a LinearLayout (the super class) and EditText views which already know how to save and restore their state, we don’t have to do any state handling.
# Including the Custom View in Layouts
When you want to use your custom view in your Activity or Fragment layouts, you can simply add some XML like you would any other view.
<div class="highlight" style="font-weight: inherit; font-style: inherit;">
<table style="font-weight: inherit; font-style: inherit;">
<tr style="font-weight: inherit; font-style: inherit;">
<td class="gutter" style="font-style: inherit;">
```
1 2 3 4
</td>
<td class="code" style="font-style: inherit;">
```
`<span class="line"><span class="nt" style="font-weight: bold !important; color: #81a2be !important;"><com.ryanharter.android.compoundviews.app.views.FriendNameView</span>
</span><span class="line"> <span class="na" style="color: #81a2be !important;">android:id=</span><span class="s" style="color: #8abeb7 !important;">"@+id/friend_names"</span>
</span><span class="line"> <span class="na" style="color: #81a2be !important;">android:layout_width=</span><span class="s" style="color: #8abeb7 !important;">"match_parent"</span>
</span><span class="line"> <span class="na" style="color: #81a2be !important;">android:layout_height=</span><span class="s" style="color: #8abeb7 !important;">"wrap_content"</span><span class="nt" style="font-weight: bold !important; color: #81a2be !important;">/></span>
</span>`
</td>
</tr>
</table>
</div></figure>
Then you access it just like any other using `findViewById(int)`.
<div class="highlight" style="font-weight: inherit; font-style: inherit;">
<table style="font-weight: inherit; font-style: inherit;">
<tr style="font-weight: inherit; font-style: inherit;">
<td class="gutter" style="font-style: inherit;">
```
1
</td>
<td class="code" style="font-style: inherit;">
```
`<span class="line"><span class="n" style="color: #81a2be !important;">mFriendNameView</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">FriendNameView</span><span class="o" style="font-weight: bold !important;">)</span> <span class="n" style="color: #81a2be !important;">findViewById</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">R</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">id</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">friend_names</span><span class="o" style="font-weight: bold !important;">);</span>
</span>`
</td>
</tr>
</table>
</div></figure>
In our MainActivity we simply set the friend count when the NumberPicker value changes, and call `getFriendNames()` when we want to retrieve the list of names.
<div class="highlight" style="font-weight: inherit; font-style: inherit;">
<table style="font-weight: inherit; font-style: inherit;">
<tr style="font-weight: inherit; font-style: inherit;">
<td class="gutter" style="font-style: inherit;">
```
1 2 3 4 5 6 7 8 9 10 11 12 13 14
</td>
<td class="code" style="font-style: inherit;">
```
`<span class="line"><span class="n" style="color: #81a2be !important;">mFriendCountPicker</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">setOnValueChangedListener</span><span class="o" style="font-weight: bold !important;">(</span><span class="k" style="color: #de935f !important;">new</span> <span class="n" style="color: #81a2be !important;">OnValueChangeListener</span><span class="o" style="font-weight: bold !important;">()</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="nd">@Override</span> <span class="kd" style="color: #81a2be !important;">public</span> <span class="kt" style="color: #8abeb7 !important;">void</span> <span class="n" style="color: #81a2be !important;">onValueChange</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">NumberPicker</span> <span class="n" style="color: #81a2be !important;">picker</span><span class="o" style="font-weight: bold !important;">,</span> <span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">oldVal</span><span class="o" style="font-weight: bold !important;">,</span> <span class="kt" style="color: #8abeb7 !important;">int</span> <span class="n" style="color: #81a2be !important;">newVal</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">mFriendNameView</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">setFriendCount</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">newVal</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"><span class="o" style="font-weight: bold !important;">});</span>
</span><span class="line"><span class="n" style="color: #81a2be !important;">mCountFriendsButton</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">setOnClickListener</span><span class="o" style="font-weight: bold !important;">(</span><span class="k" style="color: #de935f !important;">new</span> <span class="n" style="color: #81a2be !important;">OnClickListener</span><span class="o" style="font-weight: bold !important;">()</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="nd">@Override</span> <span class="kd" style="color: #81a2be !important;">public</span> <span class="kt" style="color: #8abeb7 !important;">void</span> <span class="n" style="color: #81a2be !important;">onClick</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">View</span> <span class="n" style="color: #81a2be !important;">v</span><span class="o" style="font-weight: bold !important;">)</span> <span class="o" style="font-weight: bold !important;">{</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">List</span><span class="o" style="font-weight: bold !important;"><</span><span class="n" style="color: #81a2be !important;">String</span><span class="o" style="font-weight: bold !important;">></span> <span class="n" style="color: #81a2be !important;">names</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="n" style="color: #81a2be !important;">mFriendNameView</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">getFriendNames</span><span class="o" style="font-weight: bold !important;">();</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">Intent</span> <span class="n" style="color: #81a2be !important;">i</span> <span class="o" style="font-weight: bold !important;">=</span> <span class="k" style="color: #de935f !important;">new</span> <span class="n" style="color: #81a2be !important;">Intent</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">MainActivity</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">this</span><span class="o" style="font-weight: bold !important;">,</span> <span class="n" style="color: #81a2be !important;">FriendCountActivity</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">class</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">i</span><span class="o" style="font-weight: bold !important;">.</span><span class="na" style="color: #81a2be !important;">putStringArrayListExtra</span><span class="o" style="font-weight: bold !important;">(</span><span class="s" style="color: #8abeb7 !important;">"names"</span><span class="o" style="font-weight: bold !important;">,</span> <span class="k" style="color: #de935f !important;">new</span> <span class="n" style="color: #81a2be !important;">ArrayList</span><span class="o" style="font-weight: bold !important;"><</span><span class="n" style="color: #81a2be !important;">String</span><span class="o" style="font-weight: bold !important;">>(</span><span class="n" style="color: #81a2be !important;">names</span><span class="o" style="font-weight: bold !important;">));</span>
</span><span class="line"> <span class="n" style="color: #81a2be !important;">startActivity</span><span class="o" style="font-weight: bold !important;">(</span><span class="n" style="color: #81a2be !important;">i</span><span class="o" style="font-weight: bold !important;">);</span>
</span><span class="line"> <span class="o" style="font-weight: bold !important;">}</span>
</span><span class="line"><span class="o" style="font-weight: bold !important;">});</span>
</span>`
</td>
</tr>
</table>
</div></figure>
Though this is a contrived example, compound custom views are a great way to encapsulate functionality that would otherwise be strewn throughout your Activities and Fragments. They provide testable, reusable code that makes for more stable apps. I encourage you to see where you can use custom compound views in your apps, and share them with other devs if you can and they would be useful.
Get the code for the sample app on [Github](https://github.com/rharter/CompoundViews).
💬 评论