OsmAnd/OsmAnd/res/layout/map_hud_top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
              xmlns:osmand="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical">

    <!-- TOP ROW -->

    <FrameLayout
            android:id="@+id/map_top_bar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_flat"
            android:minHeight="@dimen/map_address_height">

            <!-- android:layout_weight="1" to show properly next turn -->
            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp">


                <TextView
                    android:id="@+id/map_address_text_shadow"
                    android:importantForAccessibility="no"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:singleLine="true"
                    android:textColor="@color/color_black"
                    android:textSize="@dimen/map_widget_text_size"
                    tools:text="Long Street Name">
                </TextView>

                <TextView
                    android:id="@+id/map_address_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:singleLine="true"
                    android:textColor="@color/color_black"
                    android:textSize="@dimen/map_widget_text_size"
                    tools:text="Long Street Name">
                </TextView>
            </FrameLayout>


            <LinearLayout
                android:id="@+id/waypoint_info_bar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:visibility="gone">

                <ImageView
                    android:id="@+id/waypoint_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="@dimen/map_button_margin"
                    android:layout_marginRight="@dimen/map_button_margin"
                    tools:src="@drawable/ic_action_test_light"/>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/waypoint_dist"
                        android:layout_width="64dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginLeft="2dp"
                        android:maxLines="2"
                        android:textColor="@color/osmand_orange"
                        android:textSize="@dimen/default_list_text_size"
                        android:textStyle="bold"/>

                    <TextView
                        android:id="@+id/waypoint_deviation"
                        android:layout_width="64dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:layout_marginLeft="2dp"
                        android:drawablePadding="2dp"
                        android:maxLines="1"
                        android:textColor="@color/osmand_orange"
                        android:textSize="@dimen/default_list_text_size"
                        android:textStyle="bold"
                        android:visibility="gone"/>

                </LinearLayout>

                <FrameLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="4dp"
                    android:layout_weight="1">

                    <TextView
                        android:id="@+id/waypoint_text_shadow"
                        android:importantForAccessibility="no"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:maxLines="2"
                        android:textColor="@color/color_black"
                        android:textSize="@dimen/map_button_text_size"
                        tools:text="Waypoint"/>

                    <TextView
                        android:id="@+id/waypoint_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:maxLines="2"
                        android:textColor="@color/color_black"
                        android:textSize="@dimen/map_button_text_size"
                        tools:text="Waypoint"/>

                </FrameLayout>

                <ImageButton
                    android:id="@+id/waypoint_more"
                    android:contentDescription="@string/shared_string_more"
                    android:layout_width="@dimen/map_address_height"
                    android:layout_height="@dimen/map_address_height"
                    android:background="@drawable/btn_circle_transparent"
                    tools:src="@drawable/ic_action_test_light"/>

                <ImageButton
                    android:id="@+id/waypoint_close"
                    android:contentDescription="@string/shared_string_close"
                    android:layout_width="@dimen/map_address_height"
                    android:layout_height="@dimen/map_address_height"
                    android:background="@drawable/bottom_shadow"
                    tools:src="@drawable/ic_action_test_light"/>
            </LinearLayout>
        </FrameLayout>

    <FrameLayout
        android:id="@+id/widget_top_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:visibility="gone"
        tools:visibility="visible">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/widget_top_bar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="@dimen/dashboard_map_toolbar"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/widget_top_bar_back_button"
                    style="@style/Widget.AppCompat.ActionButton"
                    android:layout_width="56dp"
                    android:layout_height="56dp"
                    android:layout_gravity="top"
                    android:contentDescription="@string/back_to_search"
                    android:src="@drawable/ic_arrow_back"/>

                <LinearLayout
                    android:id="@+id/widget_top_bar_title_layout"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:orientation="vertical"
                    android:paddingBottom="10dp"
                    android:paddingTop="10dp">

                    <TextView
                        android:id="@+id/widget_top_bar_title"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@null"
                        android:ellipsize="end"
                        android:gravity="center_vertical"
                        android:lines="1"
                        android:singleLine="true"
                        android:textColor="?android:textColorPrimary"
                        android:textSize="@dimen/abc_text_size_medium_material"
                        tools:text="OsmAnd+ 50% discount"/>

                    <TextView
                        android:id="@+id/widget_top_bar_description"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@null"
                        android:ellipsize="end"
                        android:gravity="center_vertical"
                        android:textColor="?android:textColorPrimary"
                        android:textSize="@dimen/default_sub_text_size"
                        android:visibility="gone"
                        tools:text="New version of OsmAnd+ with 50% discount"/>

                </LinearLayout>

                <ImageButton
                    android:id="@+id/widget_top_bar_refresh_button"
                    style="@style/Widget.AppCompat.ActionButton"
                    android:layout_width="48dp"
                    android:layout_height="56dp"
                    android:layout_gravity="top"
                    android:contentDescription="@string/shared_string_refresh"
                    android:src="@drawable/ic_action_refresh_dark"
                    android:visibility="gone"/>

                <ImageButton
                    android:id="@+id/widget_top_bar_close_button"
                    style="@style/Widget.AppCompat.ActionButton"
                    android:layout_width="48dp"
                    android:layout_height="56dp"
                    android:layout_gravity="top"
                    android:contentDescription="@string/shared_string_close"
                    android:src="@drawable/ic_action_remove_dark"/>

                <net.osmand.plus.widgets.TextViewEx
                    android:id="@+id/widget_top_bar_save"
                    android:layout_width="wrap_content"
                    android:layout_height="56dp"
                    android:background="@null"
                    android:ellipsize="end"
                    android:gravity="center_vertical"
                    android:lines="1"
                    android:paddingRight="16dp"
                    android:paddingEnd="16dp"
                    android:textAllCaps="true"
                    android:singleLine="true"
                    android:textColor="?android:textColorPrimary"
                    android:textSize="@dimen/default_desc_text_size"
                    android:contentDescription="@string/shared_string_save"
                    android:text="@string/shared_string_save"
                    tools:visibility="visible"
                    android:visibility="gone"
                    osmand:typeface="@string/font_roboto_medium"/>

                <android.support.v7.widget.SwitchCompat
                    android:id="@+id/widget_top_bar_switch"
                    android:layout_width="wrap_content"
                    android:layout_height="56dp"
                    android:paddingEnd="16dp"
                    android:paddingRight="16dp"
                    android:visibility="gone"
                    tools:visibility="visible"/>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/widget_top_bar_bottom_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:visibility="gone"/>

            <FrameLayout
                android:id="@+id/widget_top_bar_shadow"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:foreground="@drawable/bg_contextmenu_shadow"
                android:foregroundGravity="top|fill_horizontal"/>

        </LinearLayout>

    </FrameLayout>

    <FrameLayout
            android:id="@+id/map_markers_top_bar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:minHeight="@dimen/map_address_height"
            android:visibility="gone"
            tools:visibility="visible">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="60dp"
                    android:background="@color/markers_top_bar_background">

                    <LinearLayout
                        android:id="@+id/map_marker_row"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?attr/selectableItemBackground"
                        android:layout_gravity="center_vertical"
                        android:gravity="center_vertical"
                        android:layout_marginTop="5dp"
                        android:layout_marginBottom="5dp"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/map_marker_arrow"
                            android:layout_width="66dp"
                            android:layout_height="36dp"
                            android:src="@drawable/ic_arrow_marker_diretion"/>

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <TextView
                                android:id="@+id/map_marker_dist"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textStyle="bold"
                                android:textSize="26sp"
                                android:textColor="@color/color_white"
                                android:text="500 m"/>

                            <TextView
                                android:id="@+id/map_marker_address"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textColor="@color/marker_top_2nd_line_color"
                                android:textStyle="bold"
                                android:maxLines="1"
                                android:ellipsize="end"
                                android:textSize="@dimen/default_list_text_size"
                                android:text="Dmitrievskaya st., 45"/>

                        </LinearLayout>

                        <ImageButton
                            android:id="@+id/marker_btn_ok"
                            android:contentDescription="@string/move_to_history"
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:background="@drawable/marker_circle_background_top_bar_with_inset"
                            tools:src="@drawable/ic_action_marker_passed"/>

                        <ImageButton
                            android:id="@+id/marker_btn_more"
                            android:contentDescription="@string/shared_string_more"
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:background="?attr/selectableItemBackgroundBorderless"
                            android:src="@drawable/ic_action_markers_list"/>

                    </LinearLayout>


                </FrameLayout>

                <FrameLayout
                    android:id="@+id/map_markers_top_bar_2nd"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="50dp"
                    android:background="@color/markers_top_bar_2nd_background"
                    android:visibility="visible">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:foreground="@drawable/bg_contextmenu_shadow"
                        android:foregroundGravity="top|fill_horizontal"/>

                    <LinearLayout
                        android:id="@+id/map_marker_row_2nd"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?attr/selectableItemBackground"
                        android:layout_gravity="center_vertical"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/map_marker_arrow_2nd"
                            android:layout_width="66dp"
                            android:layout_height="24dp"
                            android:src="@drawable/ic_arrow_marker_diretion"/>

                        <RelativeLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_marginTop="6dp"
                            android:layout_marginBottom="6dp"
                            android:gravity="center_vertical"
                            android:orientation="horizontal">

                            <TextView
                                android:id="@+id/map_marker_dist_2nd"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="500 m"
                                android:textColor="@color/color_white"
                                android:textSize="@dimen/default_list_text_size_large"
                                android:textStyle="bold"/>

                            <TextView
                                android:id="@+id/map_marker_address_2nd"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignBaseline="@+id/map_marker_dist_2nd"
                                android:layout_toRightOf="@+id/map_marker_dist_2nd"
                                android:ellipsize="end"
                                android:maxLines="1"
                                android:text="  •  Dmitr"
                                android:textColor="@color/marker_top_2nd_line_color"
                                android:textSize="@dimen/default_list_text_size"
                                android:textStyle="bold"/>

                        </RelativeLayout>

                        <ImageButton
                            android:id="@+id/marker_btn_ok_2nd"
                            android:contentDescription="@string/move_to_history"
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:background="@drawable/marker_circle_background_top_bar_with_inset"
                            tools:src="@drawable/ic_action_marker_passed"/>

                    </LinearLayout>

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/map_markers_top_bar_shadow"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:foreground="@drawable/bg_contextmenu_shadow"
                    android:foregroundGravity="top|fill_horizontal"/>

            </LinearLayout>

        </FrameLayout>

    <!-- Widgets -->

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

        <!-- LEFT widgets colon -->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="1">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="top|left"
                android:layout_weight="0.45"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/map_left_widgets_panel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|left"
                    android:orientation="vertical">

                    <!-- 
                    <include layout="@layout/map_hud_widget" />
                    <include layout="@layout/map_hud_widget" />
                    <include layout="@layout/map_hud_widget" />
                     -->
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|left"
                    android:layout_marginLeft="@dimen/map_button_margin"
                    android:layout_marginTop="@dimen/map_button_margin"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:id="@+id/layers_compass_layout"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <ImageButton
                            android:id="@+id/map_layers_button"
                            android:layout_width="@dimen/map_small_button_size"
                            android:layout_height="@dimen/map_small_button_size"
                            android:background="@drawable/btn_inset_circle_trans"
                            android:contentDescription="@string/configure_map"
                            tools:src="@drawable/ic_action_test_light"/>

                        <ImageButton
                            android:id="@+id/map_compass_button"
                            android:layout_width="@dimen/map_small_button_size"
                            android:layout_height="@dimen/map_small_button_size"
                            android:layout_marginTop="@dimen/map_small_button_margin"
                            android:background="@drawable/btn_inset_circle_trans"
                            android:contentDescription="@string/map_widget_compass"
                            tools:src="@drawable/ic_action_test_light"/>

                    </LinearLayout>

                    <ImageButton
                        android:id="@+id/map_search_button"
                        android:contentDescription="@string/map_widget_search"
                        android:layout_width="@dimen/map_small_button_size"
                        android:layout_height="@dimen/map_small_button_size"
                        android:layout_marginLeft="@dimen/map_small_button_margin"
                        android:background="@drawable/btn_inset_circle_trans"
                        tools:src="@drawable/ic_action_test_light"/>
                </LinearLayout>
            </LinearLayout>
            <!-- empty block to not let widgets grow more than 45% -->

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0.55">
            </LinearLayout>
        </LinearLayout>

        <!-- RIGHT widgets colon -->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="1">

            <!-- empty block to not let widgets grow more than 45% -->

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0.55">
            </LinearLayout>

            <FrameLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="top|right"
                android:layout_weight="0.45">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|right"
                    android:orientation="vertical">

                    <LinearLayout
                        android:id="@+id/map_right_widgets_panel"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="top|right"
                        android:orientation="vertical">

                        <include layout="@layout/map_hud_widget"/>

                        <include layout="@layout/map_hud_widget"/>
                    </LinearLayout>

                    <ImageButton
                        android:id="@+id/map_collapse_button"
                        android:contentDescription="@string/shared_string_collapse"
                        android:layout_width="@dimen/map_small_button_size"
                        android:layout_height="@dimen/map_small_button_size"
                        android:layout_gravity="top|center_horizontal"
                        android:background="@drawable/btn_inset_circle_trans"
                        tools:src="@drawable/ic_action_test_light"/>
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
        <!-- CENTER -->

        <LinearLayout
            android:id="@+id/map_center_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|center"
            android:layout_marginTop="@dimen/map_button_margin"
            android:background="@drawable/btn_round"
            android:orientation="vertical"
            android:visibility="gone">

            <ImageView
                android:id="@+id/map_lanes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center"
                android:layout_weight="1">

                <TextView
                    android:id="@+id/map_lanes_dist_text_shadow"
                    android:importantForAccessibility="no"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:maxLines="1"
                    android:textColor="@color/color_black"
                    android:textSize="@dimen/map_button_text_size"
                    tools:text="1048 km"/>

                <TextView
                    android:id="@+id/map_lanes_dist_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:maxLines="1"
                    android:textColor="@color/color_black"
                    android:textSize="@dimen/map_button_text_size"
                    tools:text="1048 km"/>

            </FrameLayout>

            <ProgressBar
                android:id="@+id/map_horizontal_progress"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="@dimen/map_routing_progress_width"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/map_button_margin"
                android:layout_marginRight="@dimen/map_button_margin"
                android:max="100"
                android:progress="60"
                android:visibility="gone"/>
        </LinearLayout>
    </FrameLayout>

</LinearLayout>