Develop Reference

How can I prevent FrameLayout from shadowing my Views?

My interface looks like this:
XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/profile_fields_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_person_name_label" />
<EditText
android:id="#+id/person_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_emailId_label" />
<EditText
android:id="#+id/person_emailId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_phoneNo_label" />
<EditText
android:id="#+id/person_phoneNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="10"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_password_label" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_retypePassword_label" />
<EditText
android:id="#+id/retype_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/learner_tutor_status_label" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/learner_tutor_status_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<!--Floating Button-->
<Button
android:id="#+id/create_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/create_account_string"
style="#style/Widget.AppCompat.Button.Colored"/>
</FrameLayout>
Now, you can see at the bottom there is I am here to.... This is a dropdown and when I choose one of the options, my code dynamically adds a few views to the hierarchy but the problem is they are not visible(not all of them; just I am a... is visible.)
I checked the layout hierarchy through the Layout inspector and turns out that the hierarchy is alive but the floating button(Create Account) has overshadowed it.
Now, I know if I were to replace the root FrameLayout with a LinearLayout, it would be visible but the problem is that if then I would click on a EditText button, the keypad would cover the screen with the Create Account button as covered too. I actually want this button to be on the screen at all times.
Does anyone how can I get around this problem?

Your layout is not totally correct because your floating button hides the bottom of your ScrollView all the time. You should replace the FrameLayout with a vertical LinearLayout (just like you said) and then specify the window behavior of your activity when the soft keyboard pops up with the windowSoftInputMode attribute in your activity element on the AndroidManifest.xml file. If you use android:windowSoftInputMode="adjustResize", the window will resize accordingly and the button should be always visible.

Animating 2 views together hides one where the other view was

I have 2 views (a button and a slider bar), one above the other, and I am animating the lower one out of frame and I want the other view to also animate down the same amount. My issue is that the spot where the lower view use to be clips out the top view. (See images). Both animations are triggered by a view model property change.
TimeView.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
MyPositionButton.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
Before Animation:
After Animation:
How do I get the lower view to stop clipping the upper one? I have attempted to alter the view's Z and TransitionZ properties to make sure the button is higher then the bar. I have also tried to set the visibility of the bar to Gone on animation completion. Also I have tried to use a TranslateAnimation so that I could have control over the Fill properties. None of these thing have worked.
Here is a look at the axml.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>

After switching on the "Show layout bounds", OP found out that he was animating the Button itself, not the RelativeLayout. After animating RelativeLayout no clipping would happen.
Old answer
Change the places of your RelativeLayouts, so that one with ImageButton is declared below of another with SeekBar. In that case the ImageButton will be drawn over SeekBar.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>

Android Tv button is not selected

I encountered a problem with the display layout.
Relativelayout #+id/media is not visible when you put visible. He remains under Relativelayout #+id/media2,is selectable from dpad but remains under the other.
if the parts and put media2 first and second media. When media is visible, but can not be selectable dpad.
there is a certain order to make the media though is written first be above the media2?
Thank you
layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/app_video_box"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/media"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|center_horizontal|center"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:animateLayoutChanges="true"
android:background="#e72a2a"
android:id="#+id/relativeLayout">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button"
android:layout_toEndOf="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:id="#+id/button3"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button2"
android:layout_toEndOf="#+id/button2" />
</RelativeLayout>
<SeekBar
android:id="#+id/app_video_seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:layout_above="#+id/relativeLayout"
android:layout_alignLeft="#+id/relativeLayout"
android:layout_alignStart="#+id/relativeLayout"
android:layout_alignRight="#+id/relativeLayout"
android:layout_alignEnd="#+id/relativeLayout" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/media2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<tcking.github.com.giraffeplayer.IjkVideoView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</RelativeLayout>

It seems like you're trying to control the focus on different items on screen. You can use XML tags specifically for this:
android:nextFocusForward="#+id/media2"
android:nextFocusDown="#+id/media2"
You can look at the docs for keyboard navigation to learn more.

In Android TV, only ui elements gets selected only if they are focusable.
Achieve this either through xml attributes or by code.
view.setFocusable(true)
or
android:focusable="true".
And set rules for each ui elements to whom the focus to be transferred.
android:nextFocus{direction}="view_id".
where direction could be down, top, right or left.
focusable items

XML Margins not what I expect, all on same "line", not stacked

I'm following this tutorial and have the program working technically, only the Button and Image are inline with the display and text entry box.
I want it to look like the image below, but instead it has all of those elements on one horizontal line.
Image: How I want it to look like:
Here's the activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/main_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="#string/textView"/>
<!-- Displays keyboard when touched -->
<EditText
android:id="#+id/main_edittext"
android:inputType="textCapSentences"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="#string/hint"/>
<!-- List whose dataset is defined in code with an adapter -->
<ListView
android:id="#+id/main_listview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="20dp"/>
<!-- Set OnClickListener to trigger results when pressed -->
<Button
android:id="#+id/main_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:text="#string/button" />
<!-- Shows an image from your drawable resources -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:src="#drawable/ic_launcher" />
<!-- Closing tag for the horizontal nested layout -->
</LinearLayout>
Do you need the MainActivity.java? If so, I'll post it. That part works, I can get input from keyboard, and it displays - and if the string is long enough, will fill to the right, pushing everything else over.
I understand that's from the wrap_content property, right?
Final thought: The tutorial says
Add the EditText XML to activity_main.xml as a sibling to the TextView
and the horizontal LinearLayout.
I wasn't sure what it means to make it a sibling, so I just put it after TextView, as you may see. Does that have anything to do with it?
Thanks for any ideas or advice! (Sorry if the title is a little convoluted.)
edit: There was a comment basically saying to add android:orientation="vertical" to the top <LinearLayout xmlns:android... > part. That worked! Only now the button and image are pushed down to the bottom of the screen, while the text entry box and display are up top...so lots of white space. I thought that I had set them to all be 20dp separate from eachother?
Edit2: I fixed, kind of, that spacing issue by setting <textWidth>, <EditText>, and <Button> to have android:layout_width="match_parent"
android:layout_height="wrap_content". ...but now they are horizontal (yay!) but not like the screenshot. How do I get them lined up like that?

try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="#+id/main_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="textView"/>
<!-- Displays keyboard when touched -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:text="button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<EditText
android:id="#+id/main_edittext"
android:inputType="textCapSentences"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="hint"/>
<!-- List whose dataset is defined in code with an adapter -->
<ListView
android:id="#+id/main_listview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="20dp"/>
<!-- Closing tag for the horizontal nested layout -->
</LinearLayout>

findViewById in a different xml file?

I am editing csipsimple app and I have setContentView to this file, in_call_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ViewStub
android:id="#+id/dropZones"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout="#layout/in_call_drop_zones" />
<LinearLayout
android:id="#+id/inCallContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="3"
android:orientation="horizontal" >
<!--
Can we do better than using two linear layouts here?
The problem is that RelativeLayout doesn't allow to use weight and
plays bad with hidden childs and above/below only support one id
-->
<!-- Grid for active calls -->
<com.csipsimple.ui.incall.InCallInfoGrid
android:id="#+id/activeCallsGrid"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="2"
android:paddingBottom="4dip"
android:paddingTop="4dip"
tools:ignore="NestedWeights" />
<!-- Grid for held calls -->
<com.csipsimple.ui.incall.InCallInfoGrid
android:id="#+id/heldCallsGrid"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/in_call_held_background"
android:padding="4dip"
android:visibility="gone" />
</LinearLayout>
<!-- Answer slider/buttons -->
<com.csipsimple.ui.incall.locker.InCallAnswerControls
android:id="#+id/inCallAnswerControls"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="2"
android:visibility="gone" />
<!-- Wraps split action bar manually managed -->
<com.csipsimple.ui.incall.InCallControls
android:id="#+id/inCallControls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/incall_bottom_bar_bg" />
</LinearLayout>
<com.csipsimple.ui.incall.locker.ScreenLocker
android:id="#+id/lockerOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#8000"
android:visibility="gone" >
</com.csipsimple.ui.incall.locker.ScreenLocker>
</RelativeLayout>
There is another layout file, in_call_card.xml; with this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/call_card_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:padding="2dip"
tools:ignore="Overdraw" >
<com.csipsimple.widgets.MaxScaleImageView
android:id="#+id/contact_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/call_action_bar"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/empty_description"
android:scaleType="centerCrop"
android:src="#drawable/ic_contact_picture_180_holo_light" />
<RelativeLayout
android:id="#+id/contact_name_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#9e808080"
android:gravity="center_vertical" >
<!--
<EditText
android:id="#+id/editText1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
-->
<com.csipsimple.widgets.MarqueeTextView
android:id="#+id/contact_name_display_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:padding="5dip"
android:singleLine="true"
android:textColor="#android:color/white"
android:textSize="25sp" />
<com.csipsimple.widgets.MarqueeTextView
android:id="#+id/contact_name_sip_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/contact_name_display_name"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:padding="2dip"
android:singleLine="true"
android:textColor="#android:color/white"
android:textSize="15sp" />
<Chronometer
android:id="#+id/elapsedTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textSize="20sp" />
</RelativeLayout>
<TextView
android:id="#+id/call_status_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_name_bar"
android:layout_marginTop="1dip"
android:background="#c818617b"
android:gravity="center_vertical|right"
android:padding="3dip"
android:text="#string/call_state_calling"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="15sp" />
<RelativeLayout
android:id="#+id/call_secure_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/call_status_text"
android:layout_marginTop="1dip"
android:background="#c8d4aa00" >
<ImageView
android:id="#+id/call_secure_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_margin="2dip"
android:contentDescription="#string/empty_description"
android:src="#drawable/stat_sys_vp_phone_call" />
<TextView
android:id="#+id/call_secure_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/call_secure_icon"
android:padding="2dip"
android:textColor="#android:color/white"
android:textSize="15sp" />
</RelativeLayout>
<FrameLayout
android:id="#+id/call_action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/end_call_bar"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
android:layout_marginTop="2dip"
android:background="#000000" />
<LinearLayout
android:id="#+id/end_call_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginTop="2dip"
android:background="#drawable/end_call_background"
android:orientation="horizontal" >
<!-- android:onClick="pushtotalk3" -->
<ToggleButton
android:id="#+id/PTT_button5"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:text="#string/ptt5"
android:layout_weight="50"
android:textOn="Push To Talk On"
android:textOff="Push To Talk Off"
android:background="#drawable/btn_lightblue_glossy"
android:textColor="#android:color/white"
android:textSize="15sp"
/>
<ImageButton
android:id="#+id/endButton"
style="?attr/actionButtonStyle"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="50"
android:contentDescription="#string/done"
android:minHeight="64dip"
android:src="#drawable/ic_end_call" />
</LinearLayout>
</RelativeLayout>
When I setContentView to the other xml file, I can still see elements from this file, I am not sure how this works. As in I can see the PTT_button5 button etc, my problem is that if I want to set a listener on this button, how do I do it? If I try to reference it I get a Null Pointer Exception:
findViewById(R.id.PTT_button5).setOnTouchListener(this);
Is this because I have setContentView to a file that does not contain a reference to this button, so how do I get a reference to this button? I am also not sure how this works as in the button is displayed on screen without settingContentView to that file.
EDIT: as the button is on screen, can anybody see how it is done from the code?
https://code.google.com/p/csipsimple/source/browse/trunk/CSipSimple/src/com/csipsimple/ui/incall/?r=2170

I think you need to understand the following basics:
1) Activity provides a window for you in which you can place your UI with setContentView(View)
In your case, this View (lets call it contentView) is inflated using in_call_main.xml
2) The contentView contains other views.
In your case, the contentView contains views, which are defined in the XML layout. This is the reason why they are shown when the activity starts. (If xml file is empty, you don't see anything)
3 You can add and remove views from the contentView.
This means that, using code, we can create a new view (lets say ToggleButton) and add it to the contentView. This ToggleButton is now visible on the screen. (because it is a child of the contentView). Similarly, removing a child view will cause it to disappear.
4) Any view, (not just contentView) can be inflated (created) from a layout file.
In your case, InCallCard is a view, which is being inflated from the in_call_card.xml.
When the getView() method of the CallsAdapter is called.. a new instance of InCallCard (view) is created and returned. It is then attached to the contentView and therefor all the UI elements (views) inside the InCallCard (in_call_card.xml) are now visible on the screen. (Including the ToggleButton that has troubled you so much)
Therefore, if you try to access the ToggleButton from onCreate() it will be null. It has not been added to the contentView as yet. But if you do the same in the getView method, as I have explained in another answer. You will see that it is no more null, and you can attach listeners, change background etc..

Is this because I have setContentView to a file that does not contain
a reference to this button.
Yes. findviewById looks for a view with the id mentioned in the current inflated layout. So if you set the content of the layout to the activity, it looks for a view with the id mentioned in that layout. If not your initialization fails and you get NullPointerException.
You say
I have setContentView to this file, in_call_main.xml
So
setContentView(R.layout.in_call_main);
findViewById(R.id.PTT_button5).setOnTouchListener(this);// gives NPE
//in_call_main.xml does not have a toogle button with id button5
In in_call_card.xml you have
<ToggleButton
android:id="#+id/PTT_button5"
But if you have
setContentView(R.layout.in_call_card);
findViewById(R.id.PTT_button5).setOnTouchListener(this);// works
// in_call_card.xml has a toogle button with id button5
so how do I get a reference to this button?
You can't without inflating the layout.