Compound – Screech Studios

Introduction

Often, when developing Android applications, groups of views tend to be used in multiple places. In order to make things easier, it is considered good practice to encapsulate them in a custom compound view. This allows the same custom view component to be reused throughout the app.

A compound view or compound component is just a view composed of a group of views. This tutorial focuses on building a very basic compound view and defining some methods that change its state.

Creating the Compound View

Creating a Compound View is, in some respects, somewhat similar to creating a new Activity. A new class is created which contains all the view’s children and some methods to manipulate them.

To get started, we’ll first create a new XML layout file in /res/layout/view_article.xml. This will contain the compound view’s children:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

    <ProgressBar
        android:id="@+id/loadingProgressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:visibility="invisible"/>

    <LinearLayout
        android:id="@+id/contentLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        android:visibility="visible">

        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textStyle="bold|italic"/>

        <TextView
            android:id="@+id/contentTextView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:textAppearance="?android:attr/textAppearanceMedium"/>
    </LinearLayout>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<ProgressBar

android:id="@+id/loadingProgressBar"

style="?android:attr/progressBarStyleLarge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:visibility="invisible"/>

<LinearLayout

android:id="@+id/contentLayout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:padding="10dp"

android:visibility="visible">

<TextView

android:id="@+id/titleTextView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceLarge"

android:textStyle="bold|italic"/>

<TextView

android:id="@+id/contentTextView"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:textAppearance="?android:attr/textAppearanceMedium"/>

</LinearLayout>

</RelativeLayout>

Next, we need a class to inflate our new Article View. For simplicity’s sake, we’ll extend a basic RelativeLayout and define our child components. When the view is added to an Activity, it will basically act as a RelativeLayout and allow developers to customize it accordingly.

public class ArticleView extends RelativeLayout {

    private TextView titleTextView;
    private TextView contentTextView;
    private LinearLayout contentLayout;
    private ProgressBar loadingProgress;

    public ArticleView(Context context) {
        super(context);

        initView(context);
    }

    public ArticleView(Context context, AttributeSet attrs) {
        super(context, attrs);

        initView(context);
    }

    public ArticleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initView(context);
    }

    private void initView(Context context) {
        inflate(context, R.layout.view_article, this);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        titleTextView = (TextView) findViewById(R.id.titleTextView);
        contentTextView = (TextView) findViewById(R.id.contentTextView);
        contentLayout = (LinearLayout) findViewById(R.id.contentLayout);
        loadingProgress = (ProgressBar) findViewById(R.id.loadingProgressBar);
    }
}

public class ArticleView extends RelativeLayout {

private TextView titleTextView;

private TextView contentTextView;

private LinearLayout contentLayout;

private ProgressBar loadingProgress;

public ArticleView(Context context) {

super(context);

initView(context);

}

public ArticleView(Context context, AttributeSet attrs) {

super(context, attrs);

initView(context);

}

public ArticleView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initView(context);

}

private void initView(Context context) {

inflate(context, R.layout.view_article, this);

}

@Override

protected void onFinishInflate() {

super.onFinishInflate();

titleTextView = (TextView) findViewById(R.id.titleTextView);

contentTextView = (TextView) findViewById(R.id.contentTextView);

contentLayout = (LinearLayout) findViewById(R.id.contentLayout);

loadingProgress = (ProgressBar) findViewById(R.id.loadingProgressBar);

}

It is considered best practice to handle the instantiation of our UI components in the onFinishInflate() method in order to prevent any NullPointerExceptions, especially when using ImageViews with large Bitmaps.

At this point, our new Article View doesn’t really do anything special except displaying its children components. As a result, we’ll add some custom methods to manipulate its states:

    public void setLoading(boolean isLoading) {
        if (isLoading) {
            contentLayout.setVisibility(INVISIBLE);
            loadingProgress.setVisibility(VISIBLE);
        } else {
            contentLayout.setVisibility(VISIBLE);
            loadingProgress.setVisibility(INVISIBLE);
        }
    }

    public void populate(String title, String content) {
        titleTextView.setText(title);
        contentTextView.setText(content);
    }

    public void setBackground(int color) {
        contentLayout.setBackgroundColor(color);
    }

public void setLoading(boolean isLoading) {

if (isLoading) {

contentLayout.setVisibility(INVISIBLE);

loadingProgress.setVisibility(VISIBLE);

} else {

contentLayout.setVisibility(VISIBLE);

loadingProgress.setVisibility(INVISIBLE);

}

public void populate(String title, String content) {

titleTextView.setText(title);

contentTextView.setText(content);

}

public void setBackground(int color) {

contentLayout.setBackgroundColor(color);

}

Finally

Now that the ArticleView is complete, we just need to add it to an Activity. We will first add it to the Activity’s layout XML file:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.screechstudios.compoundview.MainActivity">

    <com.screechstudios.compoundview.ArticleView
        android:id="@+id/articleView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Article"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

<?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:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.screechstudios.compoundview.MainActivity">

<com.screechstudios.compoundview.ArticleView

android:id="@+id/articleView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Show Article"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true" />

</RelativeLayout>

Finally, we initialize it in the Activity and make use of it’s methods in order to change the ArticleView’s state:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Initialize the ArticleView
        final ArticleView articleView = (ArticleView) findViewById(R.id.articleView);

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                populateArticle(articleView);
            }
        });
    }

    private void populateArticle(final ArticleView articleView) {
        articleView.setLoading(true);

        // Display the article after 3 seconds.
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                articleView.setLoading(false);
                articleView.setBackground(Color.LTGRAY);
                articleView.populate("My First Article", "This is my first ever article, hope you enjoy!");
            }
        }, 3000);
    }
}

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Initialize the ArticleView

final ArticleView articleView = (ArticleView) findViewById(R.id.articleView);

findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

populateArticle(articleView);

}

});

}

private void populateArticle(final ArticleView articleView) {

articleView.setLoading(true);

// Display the article after 3 seconds.

new Handler().postDelayed(new Runnable() {

@Override

public void run() {

articleView.setLoading(false);

articleView.setBackground(Color.LTGRAY);

articleView.populate("My First Article", "This is my first ever article, hope you enjoy!");

}

}, 3000);

}

Get the full sample project here.

Share this on:

Tag: Compound

Creating a Compound View in Android

Introduction

Creating the Compound View

Finally