UI Tutorial Google Phone App V29 UI Cloning Full source Code and Tutorial With dark and light mode

Hey, what’s up friends, I’m back in this tutorial I will show you how you can achieve Google Phone app UI using just simple codes.

At first, I tell you that this post or series is not about building Google Phone App it’s about getting the concept of how to build the UI and get the idea.

At first, create a new project and chose the targeted SDK as 28 latest builds. after building the project you must add one dependency. So add the below dependency to your app level build file.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    
}

Now open styles.xml which is under the res>values>styles.xml and then change the parent theme and add some items to your theme as below code.

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
    </style>

</resources>

Now open colors.xml which is also in the values folder and change the color of “colorPrimary” & “colorPrimaryDark” to white.Now create a menu folder for adding two menu XML so after creating menu folder create two menu XML file name as  toolbar_menu.xml & bottom_nav_menu.xml and paste those codes.

toolbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:title="Voice"
        android:icon="@drawable/ic_keyboard_voice_black_24dp"
        app:showAsAction="always"
        android:id="@+id/search_voice_btn"/>
    <item
        android:title="Call History"
        android:id="@+id/history"/>
    <item
        android:title="Settings"
        android:id="@+id/settings"/>
    <item
        android:title="Help & feedback"
        android:id="@+id/help"/>
</menu>

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:title="Favourites"
        android:icon="@drawable/ic_star_black_24dp"
        android:id="@+id/favorite"/>
    <item
        android:title="Recent"
        android:icon="@drawable/ic_access_time_black_24dp"
        android:id="@+id/recent"/>
    <item
        android:title="Contacts"
        android:icon="@drawable/ic_people_black_24dp"
        android:id="@+id/contacts"/>
</menu>

After adding those codes you definitely get an error for the icons so open this link and add al;l the icons to your drawable folder. -> Drawable ResourcesNow open your activity_main.xml file and add this XML code.

<?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:background="@android:color/white"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="47dp"
        android:elevation="2dp"
        android:background="@drawable/toolbar_design"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/AppTheme">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:textSize="17sp"
            android:text="Search contacts & places"/>
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="70dp"
        android:layout_marginEnd="10dp"
        android:src="@drawable/ic_dialpad_black_24dp"
        android:tint="@android:color/white"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:backgroundTint="#1A73E8"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        app:itemIconTint="@drawable/nav_select_color"
        app:itemTextColor="@drawable/nav_select_color"
        app:menu="@menu/bottom_nav_menu" />
</android.support.design.widget.CoordinatorLayout>

And this is the last step for this part open your MainActivity.java file and add these codes.

import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = findViewById(R.id.toolbar);
        Drawable drawable = ContextCompat.getDrawable(this,R.drawable.ic_search_black_24dp);
        toolbar.setNavigationIcon(drawable);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle(null);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu,menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }
}

That’s it now you have the rounded toolbar and bottom navigation as Google Phone have. in the next part, we will modify this UI with some more details.

All the SOurce Code is available on GitHub so you can always clone the repository here-> https://github.com/MonsterTechnoGit/Google-Phone-UI-Cloning