Revised Question
When one looks online in tutorials, or by Google IO presentations, there are always just 2 kinds of UI customizations that one can do (but there are several implementations of doing each type). These customizations are:
- Creating a custom view that is a composite of existing views, or your own
- Creating a custom layout that is your own
However, what if I wanted to create a hybrid of these two? Specifically a Custom View that allow child views to be laid out how I define? There is nothing that I have found online (no tutorials, no videos) or even anything saying if this is even feasible.
Idea
Here is the Contacts App
that has something very similar to what I want to do. You notice that every list item has a very similar layout. Nothing special here. I can create composite custom view
with styleables
to set the primary and secondary text, and the main and action icons.
However, my secret sauce comes with the idea of changing the primary text (the blacked-out region) to some other view in XML! This view could be a TextView
, RatingBar
, ProgressBar
, VideoView
, SurfaceView
, etc...
Examples
TextView
Here is an example of using my custom view that takes in a 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 of using my same custom view that takes in a 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 go about developing a custom view like this?