How to use Custom Views with other UI components?

Question

My problem is that I want to end up with something like this:

Here is an illustation

So I need a toolbar at the top, then a custom view (where I use a canvas to let the user to draw objects - circles and edges between the circles) and finally a layout at the bottom (with ImageButton components - for example to clear the canvas in the custom view).

Everything is working fine except that I am not able to add the bottom layer (with the ImageButtons) because the custom view takes up all the available space.

My code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/bogoToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#27A9E0"
        android:minHeight="45dp"
        app:titleTextColor="@android:color/white">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Breadth-First Search Visualization"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:textStyle="bold"
            app:fontFamily="@font/roboto_slab" />

    </androidx.appcompat.widget.Toolbar>

    <com.globalsoftwaresupport.graph.bfs.BreadthFirstSearchView
        android:id="@+id/breadthFirstSearchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="68dp"
        android:minHeight="100dp"
        android:orientation="horizontal">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/quiz_icon" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/quiz_icon2" />

    </LinearLayout>

</LinearLayout>

Do you have any suggestions what I do wrong? Thanks in advance

Answer 1

The problem is with this view

<com.globalsoftwaresupport.graph.bfs.BreadthFirstSearchView
        android:id="@+id/breadthFirstSearchView"
        android:layout_width="match_parent" <-------
        android:layout_height="wrap_content"/>

Your BreadthFirstSearchView is match_parent which is taking all the space below toolbar, assigning weights will make it responsive.

 <com.globalsoftwaresupport.graph.bfs.BreadthFirstSearchView
        android:id="@+id/breadthFirstSearchView"
        android:layout_height="0dp"
        android:weight="1"
        android:layout_width="wrap_content"/>

Answer 2

You'd be better off using a ConstraintLayout. Constrain the toolbar to the top and the Linearlayout with the buttons to the bottom, then constrain BreadthFirstSearchView top to the bottom of the toobar with 0dp margin and the botttom of BreadthFirstSearchView to the top of the LinearLayout with 0dp, and set the layout_height of BreadthFirstSearchView to MATCH_CONSTRAINTS(0dp). Here is what your layout file should look like:

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.appcompat.widget.Toolbar
    android:id="@+id/bogoToolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#27A9E0"
    android:minHeight="45dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:titleTextColor="@android:color/white">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Breadth-First Search Visualization"
        android:textColor="#ffffff"
        android:textSize="20dp"
        android:textStyle="bold"
        app:fontFamily="@font/roboto_slab" />

</androidx.appcompat.widget.Toolbar>

<com.globalsoftwaresupport.graph.bfs.BreadthFirstSearchView
    android:id="@+id/breadthFirstSearchView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginTop="0dp"
    android:layout_marginBottom="0dp"
    app:layout_constraintBottom_toTopOf="@+id/linearLayout"
    app:layout_constraintTop_toBottomOf="@+id/bogoToolbar" />

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="68dp"
    android:minHeight="100dp"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/quiz_icon" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/quiz_icon2" />

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

One last thing. If you want your view to show up in the editor in Android Studio and be able to inflate it from XML. You must supply this constructor:

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

}

Good Luck!