Search code examples
androidlayoutandroid-appbarlayout

How do I align the contents of app bar layout to horizontal

I have an activity with coordinator layout for which I have app bar layout and include an scrolling content

All the items of the app bar layout are by default arranged vertically and also when I override an menu item for the app bar layout it is not visible so I used an button in the app bar layout

I tried changing the orientation to horizontal by writing in the xml but the scrolling content is coming over the app bar layout

Kindly help me to correct this issue and also how to include a menu item for this layout

XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        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"
        tools:context=".AddItem">


    <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            android:background="#252A4E">

        <TextView
                android:text="Item :"
                android:layout_marginLeft="4pt"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="25pt" android:id="@+id/tvItem"
                android:layout_gravity="center_vertical"
                android:textColor="#F8F6F6" android:textSize="15pt"
                app:fontFamily="@font/averia_libre" />
        <TextView
                android:text="1"
                android:layout_marginLeft="4pt"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="25pt" android:id="@+id/tvElevatorNo"
                android:layout_gravity="center_vertical"
                android:textColor="#F8F6F6" android:textSize="15pt"
                app:fontFamily="@font/averia_libre"/>
        <ImageButton
                android:layout_marginLeft="72pt"
                android:onClick="AddElevator"
                android:layout_gravity="end"
                android:layout_width="62dp"
                android:layout_height="match_parent" app:srcCompat="@drawable/baseline_done_white_18dp"
                android:id="@+id/ibComplete" tools:srcCompat="@drawable/baseline_done_white_18dp"
                android:tint="#F9FBE7" android:background="#252A4E"/>


    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_add_item" android:layout_height="674dp"/>

</android.support.design.widget.CoordinatorLayout>

Image

Solution

  • AppBarLayout extends a LinearLayout. So, if you need to create a more complex layout, you must encapsulate your views inside another ViewGroup such as RelativeLayout or even a ConstraintLayout etc.

    Something like:

    <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvItem"
            android:layout_width="wrap_content"
            android:layout_height="25pt"/>

        <TextView
            android:id="@+id/tvElevatorNo"
            android:layout_width="wrap_content"
            android:layout_height="25pt"
            android:layout_toEndOf="@id/tvItem"/>

        <ImageButton
            android:id="@+id/ibComplete"
            android:layout_width="62dp"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"/>

    </RelativeLayout>
</android.support.design.widget.AppBarLayout>