Revised question

When you look online in tutorials or Google IO presentations, there are always only two types of custom settings that can be made (but there are several implementations of each type ). These settings:

• Create a custom view that is a collection of existing views or your own
• Create a custom layout that is your own

However, what if I wanted to create a hybrid of the two? Specifically, a custom view that lets me define detailed views, how do I define? There is nothing that I have found on the internet (no tutorials, no videos) or even nothing to say, if even possible.

Idea

Here's Contacts App

one that has something very similar to what I want to do. You will notice that each list item has a very similar layout. Nothing special here. I can create composite custom view

with help styleables

to set primary and secondary text as well as primary and action icons.

However, my secret sauce comes up with the idea to change the body text (darkened region) to a different XML representation! This representation can be TextView

, RatingBar

, ProgressBar

, VideoView

, SurfaceView

, etc.

Examples of

TextView

Here is an example using my custom view that accepts developer-defined

TextView

.

<com.example.customview.BaseViewLayout 
    ...
    custom:imageMainIcon="..."
    custom:imageActionIcon="..."
    custom:secondaryText="Home">

    <TextView
        ...
        android:text="User-defined TextView"
        ... />

</com.example.customview.BaseViewLayout>

      

        
        
        
      

    

VideoView

Here is an example using my own custom view that takes developer-defined

VideoView

.

<com.example.customview.BaseViewLayout 
    ...
    custom:imageMainIcon="..."
    custom:imageActionIcon="..."
    custom:secondaryText="Home">

    <VideoView
        ... />

</com.example.customview.BaseViewLayout>

      

        
        
        
      

    

code

BaseCustomLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/detail_list_item"
    android:layout_width="450dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:minHeight="72dp"
    android:background="@color/material_blue_grey_800" >

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginBottom="24dp"
        android:src="@drawable/ic_not_available_white"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/imageView" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="72dp"
        android:layout_marginStart="72dp"

        android:layout_marginRight="72dp"
        android:layout_marginEnd="72dp"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"

        android:layout_toRightOf="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">


        <ViewStub
            android:layout_height="20dp"
            android:layout_width="wrap_content"
            android:id="@+id/view_stub_main_view"
            android:inflatedId="@+id/inflated_main_view" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:paddingTop="4dp">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="16dp"
                android:text="Item Type"/>


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="16dp"
                android:textStyle="bold"
                android:text="  ·  "/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="16dp"

                android:text="Extra"/>

        </LinearLayout>

    </LinearLayout>

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_not_available_white"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        android:padding="8dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:id="@+id/imageView2" />

</RelativeLayout>

      

        
        
        
      

    

So how does a person design a custom view like this?