I : Creating your own Compound Views in Android

When creating an Android app one often wants to code custom views without consuming too much time drawing it and adding basic functions. If one needs to create a custom EditText that can become very complex but still uses a traditional View such as an EditText one doesn’t actually have to create a new kind of View. In this article I present you the simple but fun way of developing aesthetically pleasing compound views.

The gradient view that you can depict above is a custom compound view that consists of two custom views and a standard textview. Even though the Gradient View (Background) and the SelectStatusView (Top-Right) are custom made and did need a onDraw method, the shown View is a combination of three different views. Nevertheless, one can customise this view without having to add any difficult or complicated code. The class code for this view is shown below:

public class ShareLinkView extends FrameLayout {
    private ChatrGradientView gradientView;
    private SelectedStatusView selectedStatusView;
    private TextView textView;
    private ShareLinkViewModel viewModel;
    private StatusChangedCallback callback = null;
    private LinkEntity linkEntity;

    public ShareLinkView(@NonNull Context context) {
        super(context);
        init();
    }

    public ShareLinkView(@NonNull Context context,
                         @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();

    }

    public ShareLinkView(@NonNull Context context,
                         @Nullable AttributeSet attrs,
                         int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();

    }

    public ShareLinkView(@NonNull Context context,
                         @Nullable AttributeSet attrs,
                         int defStyleAttr,
                         int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();

    }

    private void init() {
        LayoutInflater.
                from(getContext())
                .inflate(
                        R.layout.layout_general_view_share_link,
                        this);
        initViews();

    }

    private void initViews() {
        gradientView = 
                findViewById(R.id.share_link_gradient_view);
        selectedStatusView = 
                findViewById(R.id.share_link_selected_status_view);
        selectedStatusView.
                setViewModel(viewModel);
        textView = 
                findViewById(R.id.share_link_txt_title);
        gradientView.
                setViewType(
                        ChatrGradientView.CONSTANT_SHARE_TYPE
                );


    }

    private void changeStatusView() {
        selectedStatusView.setChangeStatus(callback);

    }

    public void setGradientStartColor(int randomColor)
    {
        gradientView.setGradientStartColor(randomColor);

    }

    public void setGradientEndColor(int randomColor)
    {
        gradientView.setGradientEndColor(randomColor);

    }

    private int randomColor() {
        Random rnd = new Random();
        int color = Color.argb(255,
                rnd.nextInt(256),
                rnd.nextInt(256),
                rnd.nextInt(256));
        return color;
    }

    public void setViewModel(
            ShareLinkViewModel shareLinkViewModel) {
        this.viewModel = shareLinkViewModel;

    }


    public void setSelectedView(boolean b) {
        this.selectedStatusView.setSelectedStatus(b);
        selectedStatusView.postInvalidate();
    }

    public int getGradientEndColor() {
        
        return gradientView.getGradientEndColor();
    }

    public int getGradientStartColor() {
        
        return gradientView.getGradientStartColor();
    }

    public void setSelectable(boolean b) {
        
        selectedStatusView.setVisibility(GONE);
    }

    public void setLinkEntity(LinkEntity linkEntity) {
        this.linkEntity = linkEntity;
        gradientView.
                setViewType(
                        ChatrGradientView.CONSTANT_SHARE_TYPE
                );
        setGradientStartColor(
                linkEntity.getStartGradientBackground()
        );
        setGradientEndColor(
                linkEntity.getEndGradientBackground()
        );
        textView.
                setText(linkEntity.getTitle());
    }

    public LinkEntity getLinkEntity() {
        return linkEntity;
    }


    public interface StatusChangedCallback {
        void changedSelectedView();

    }

    public void setCallback(
            StatusChangedCallback callback) {
        this.callback = callback;
    }

}

The code shown above isn’t my best work but it clearly presents the fundamentals of what can be defined as a compound view. One can imagine a compound view as a ViewGroup that contains lots of different pre-defined views. To create a compound view one has to start off with creating a new class that extends any kind of layout and inflate a xml layout inside of it. The class has now become a ViewGroup and the children of that xml layout have become children to the class that we have created. Furthermore, one has to instantiate the children in the compound view class and create additional features to it. In the code above this can be seen when I use the method “findViewById” multiple times to find my children views. After that the class shows multiple methods and actions such as establishing the callback interface and the entity the data is pulled from. After I update the data entity I always invalidate the view to replenish my layout and present substantial change to the user.

I hope you enjoyed the first part of this series. If there are any questions to these kinds of view I would be very happy to answer them in the comments. I would also be very happy to see a clap if you enjoyed reading this article.