3

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:

  1. Creating a custom view that is a composite of existing views, or your own
  2. 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

enter image description here

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.

enter image description here

<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.

enter image description here

<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?

Christopher Rucinski
  • 4,737
  • 2
  • 27
  • 58
  • Hi, I can only think of doing it programatically. after extending the framelayout, you should also programatically add the customization in that class as long as it retains property of being a layout, a parent. – Sheychan Jul 15 '15 at 01:08
  • I just read about ViewStub and looking to see if that is possible. Looks kind of promising. – Christopher Rucinski Jul 15 '15 at 01:10
  • 1
    Down vote? Why? I have not found any resources on this type of problem. It is either all predefined views or all user-defined child views – Christopher Rucinski Jul 15 '15 at 01:12
  • ViewStub? I wanna check it out, oops it's not me who downvoted – Sheychan Jul 15 '15 at 01:13

0 Answers0