How to create an Android App Part 1

Hi everyone!

I’ll start a tutorial, written on Java, on how to develop an app that manage user profile, the basic functionality will be:

• Editing user name
• Choosing gender
• Choosing birthday
• Changing profile photo user
• Store profile in a database

Based on described functionality, the content has the following topics:

• Starting a new Android project and first steps
• Date pickup
• Operating camera
• CircularImageView
• Playing around slide menu
• Operating Android Room database

All content will be partitioned into various parts, updates will come once a week. The code will be updated here

To begin, once android studio is opened, we create a new navigation drawer activity. I recommend to use the navigation drawer activity because it provides a ready-to-use slide menu (and it looks great for profile editing)

We’ll choose application’s name, in my case it is ProfileApp. I recommend to change package name to one more appropriate, as I show below.

Don’t forget to properly select your save location!

The application start with a content_main, having a hello world text, a floating button and a navigation bar.

As it, the application can run an show the slide bar functionality, but it’s far away from our main objective. Meaning we need to do the following modifications.

• Remove floating button by editing the XML code on app_bar_main layout. You can choose between commenting or removing it. I prefer to comment it just in case we need to use it further steps.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

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

    <!--<com.google.android.material.floatingactionbutton.FloatingActionButton-->
        <!--android:id="@+id/fab"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="bottom|end"-->
        <!--android:layout_margin="@dimen/fab_margin"-->
        <!--app:srcCompat="@android:drawable/ic_dialog_email" />-->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

• Remove code from main activity, otherwise it’ll throw an error. Again, you can prefer removing it instead of commenting it.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
//        FloatingActionButton fab = findViewById(R.id.fab);
//        fab.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View view) {
//                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
//                        .setAction("Action", null).show();
//            }
//        });
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);
    }

• Into content_main.xml we add TextView and EditText to let user enter name, gender, birthday, profile photo, and a button to save information. The id of each component has to be adjusted to something understandable, just imagine yourself looking into a bunch of id’s all similar to each other, horrible.

If you're like me, spending hours trying to figure out the variables or id names I suggest to predefine a nomenclature, so your variable/id convention name would be easy. For example, my name convention for component’s id is “component purpose”_”component description”_”component type” giving me names like profile_photo_textview, profile_username_textview, etc. You can take a look at the github project link.

When all textviews are inserted (consider at this point we’re not looking at design), add a edit text just for name, the other ones will be using a different type of component that we will review later on.

As you have already noticed, android has a variety of edit text, everyone of them has its own purpose. We won’t review every single of them, but I provide a brief description of the ones we will be using.

For username we will insert a plain text edit text, to let the user be able to write down the username of his choice. It allow all kind of characters, no limits.
To select gender the most common alternative is a radio button. Radio buttons are different from others buttons because you’re just allowed to select one option or another, but by default radio buttons itself haven’t that property; to create that behavior it’s necessary to create a radio button group. Android has that option on palette -> buttons -> RadioGroup.

Then drag & drop the object, position it wherever you have you select gender option (mine is in front of its text view) and make it as big as you want. Don’t worry about the size at first, we can adjust it latter.

Once the radio group is set, drag & drop two radio buttons inside it. Select just your radio group and, on your attributes (the panel at right) set an id, because that would be the name of the group for your radio buttons.

Change id and text for your radio buttons.

Now is just missing the birthday option, I really like the text view option, because it would be able to play around in an easy way around it. I want to write full date inside that text view using a date picker inside it.

After all that, the result would be something like this. One additional step is create constraints, although we’re just inferring constraints to not complicate to much this post.

As you can see, there’s still a lot to do to improve design and functionality, but I think is enough for this one post.