Search code examples
androidandroid-layoutandroid-constraintlayoutimagebutton

One Layout file instead of many similar ones

I have several (for about 10 activities) XML layout files that all look quite similar. Here you can see one of them:

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:id="@+id/container_frame_softrdinks"/>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="432dp"
        android:layout_height="135dp"
        android:background="#435cb53f"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:titleTextColor="@android:color/holo_green_light">

        <TextView
            android:id="@+id/textView_ToolBar_CocktailSelectionActivity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:textColor="@android:color/white"
            android:textSize="24sp"
            android:text="Softdrinks" />
    </androidx.appcompat.widget.Toolbar>

    <ScrollView
        app:layout_constraintTop_toBottomOf="@id/toolbar_mainActivity"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_width="0dp"
        android:layout_height="0dp">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:context=".MainActivity"
            tools:ignore="ExtraText">


            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintEnd_toStartOf="@id/imageButton1"
                app:layout_constraintHorizontal_chainStyle="spread"
                app:layout_constraintHorizontal_weight="1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/test_dish_1" />

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_weight="1"
                app:layout_constraintStart_toEndOf="@id/imageButton2"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintEnd_toStartOf="@id/imageButton4"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton2"
                app:layout_constraintVertical_chainStyle="packed"
                app:srcCompat="@drawable/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/imageButton3"
                app:layout_constraintTop_toBottomOf="@id/imageButton2"
                app:srcCompat="@drawable/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton5"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintVertical_chainStyle="packed"
                app:layout_constraintEnd_toStartOf="@id/imageButton6"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton3"
                app:srcCompat="@drawable/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton6"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintStart_toEndOf="@id/imageButton5"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton3"
                app:srcCompat="@drawable/test_dish_1" />


            <ImageButton
                android:id="@+id/imageButton7"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintVertical_chainStyle="packed"
                app:layout_constraintEnd_toStartOf="@id/imageButton8"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton5"
                app:srcCompat="@drawable/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton8"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintStart_toEndOf="@id/imageButton7"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton5"
                app:srcCompat="@drawable/test_dish_2" />


            <ImageButton
                android:id="@+id/imageButton9"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintVertical_chainStyle="packed"
                app:layout_constraintEnd_toStartOf="@id/imageButton10"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton7"
                app:srcCompat="@drawable/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton10"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintStart_toEndOf="@id/imageButton9"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton7"
                app:srcCompat="@drawable/test_dish_2" />


            <ImageButton
                android:id="@+id/imageButton11"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintVertical_chainStyle="packed"
                app:layout_constraintEnd_toStartOf="@id/imageButton12"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton9"
                app:srcCompat="@drawable/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton12"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintStart_toEndOf="@id/imageButton11"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton9"
                app:srcCompat="@drawable/test_dish_2" />


            <ImageButton
                android:id="@+id/imageButton13"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintVertical_chainStyle="packed"
                app:layout_constraintEnd_toStartOf="@id/imageButton14"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton11"
                app:srcCompat="@drawable/test_dish_1" />

            <ImageButton
                android:id="@+id/imageButton14"
                android:layout_width="0dp"
                android:layout_height="128dp"
                android:layout_marginTop="12dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintStart_toEndOf="@id/imageButton13"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageButton11"
                app:srcCompat="@drawable/test_dish_2" />



        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>




    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        app:labelVisibilityMode="labeled"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorGreen"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation"
        app:itemIconTint="@color/colorPrimaryDark"
        app:itemTextColor="@color/colorAccent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Now the question is whether it is possible (and advicable ) to have only one XML-layout file for all of the different activities. I personally see the following problems:

  1. The number of bottoms are not identical in every layout file. Since I am using a ScrollView inside of a ConstraintLayout, I would not know how to disgn the layout. I have to set the constraints manually in the XML layout file for all the ImageButtoms
  2. I am not using normal Buttoms but ImageButtons in every XML layout file. When creating the XML layout file I have to specify the pictures being displayed on the ImageButtons. I do not know how to do this dynamically

So I'd be happy for every comment and I would really appreciate your help.

Does nobody have an idea if that is possible and how to do something like this?

Solution

  • You can add Stuff to your Layout and manage parameters of your layouts completely at runtime (most often done in OnCreate or OnCreateView (depends wether it's Activity or Fragment) Just do a base Layout with the AppBar etc and add the image buttons by code.