At the moment I am trying to make a custom navigation bar like the image given.
My Code to make this navigation bar looks at the moment like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/nav"
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="@android:color/transparent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="70dp"
android:alpha="0.8"
android:background="#0089BA"
app:layout_constraintBottom_toBottomOf="@+id/linearLayout3"
app:layout_constraintEnd_toEndOf="parent"></View>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="@android:color/transparent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="100dp"
android:layout_height="70"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:clickable="true"
app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#0089BA"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/home_img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
app:srcCompat="@drawable/googleg_standard_color_18" />
<ImageView
android:id="@+id/home_img2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
app:srcCompat="@drawable/googleg_standard_color_18" />
<ImageView
android:id="@+id/home_img3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
app:srcCompat="@drawable/googleg_standard_color_18" />
<ImageView
android:id="@+id/home_img4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
app:srcCompat="@drawable/googleg_standard_color_18" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
But because I am really terrible at designing in xml I would appreciate some help. How can I make this design happen and how can I get better at designing in xml? Color:#0089BA transparency: 80 % I am using at the moment the same google icons to test this design.