Create a SMS app in Android - Android Studio

Create a SMS app in Android – Android Studio (Part – 1)

An SMS app is a must in every smartphone. There are a lot of SMS app in Google Play Store, but I expect you to build the better one. So, In this tutorial I will provide my simple method to start building a SMS app. Creating a SMS app in android is nor so easy neither too hard.

In most of the tutorials over the internet shows you an activity for Inbox messages, an activity for Sent messages and an activity for writing a new message. But In this tutorial I’ll combine the inbox messages and sent messages in one activity so that it gives a feel of conversation. As, I’ll add a minimum design in the UI part, so you may need to add some dependencies into your build.gradle file. So let’s start on How to create a SMS app in Android in Android Studio.

As the full project is quite large so we are going to divide it into 2 parts. In this part we will complete the UI design. In second part, we’ll focus on the back-end JAVA program.

Create a SMS app in Android – Android Studio

Download the full project source code with all image resources.

Before you begin


1. Add the dependencies into your app-level build.gradle file:

compile 'com.android.support:design:26.+'
compile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'
compile 'com.lifeofcoding:cacheutilslibrary:1.1.0@aar'
compile 'com.google.code.gson:gson:2.2.2'
compile 'commons-io:commons-io:2.4'

After syncing your project if any error occurs add these packageOptions into the android section of your app-level build.gradle file:

android {
...
...
  packagingOptions {
    exclude 'META-INF/DEPENDENCIES'
    exclude 'META-INF/NOTICE'
    exclude 'META-INF/LICENSE'
    exclude 'META-INF/LICENSE.txt'
    exclude 'META-INF/NOTICE.txt'
    exclude 'META-INF/ASL2.0'
    exclude 'META-INF/MANIFEST.MF'
  }
}

Steps to create a SMS app in Android – Android Studio (Part – 1)


1. Open your AndroidManifest.xml file and add READ_SMS, SEND_SMS, RECEIVE_SMS, READ_CONTACTS, WRITE_CONTACTS permission. Your manifest file will look like this-

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

    <uses-permission android:name="android.permission.READ_SMS" />
    <uses-permission android:name="android.permission.SEND_SMS" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".NewSmsActivity"/>
        <activity android:name=".Chat"/>
    </application>

</manifest>

There are total 3 activities declared into manifest. We will build them leter.

2. Open your activity_main.xml file. Use a RelativeLayout to arrange the listviews and FAB buttons. You can adjust the FAB button size to suit various devices.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <FrameLayout
        android:id="@+id/bottomViewSearch"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_new"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:descendantFocusability="blocksDescendants"
        android:src="@drawable/ic_action_message" />


        <ProgressBar
            android:id="@+id/loader"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"/>
</FrameLayout>
</RelativeLayout>

You can find the Image Resources into the attached project file.

3. Now create a new layout resource file named “conversation_list_item.xml” and paste the below code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:customAttrs="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="1"
    android:descendantFocusability="blocksDescendants"
    android:padding="5dp"
    >

    <LinearLayout
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
            android:id="@+id/inbox_thumb"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"/>


    </LinearLayout>


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

            <TextView
            android:id="@+id/inbox_user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:textColor="#000000"
            android:text="255 sms"
            android:textStyle="bold"
            android:ellipsize="end"
            android:maxLines="1"
            android:textSize="16sp"/>


            <TextView
            android:id="@+id/inbox_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:textColor="#666666"
            android:text="255 sms"
            android:ellipsize="end"
            android:maxLines="1"
            android:textSize="14sp"/>


            <TextView
            android:id="@+id/inbox_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:textColor="#888888"
            android:text="255 sms"
            android:ellipsize="end"
            android:maxLines="1"
            android:textSize="12sp"/>


    </LinearLayout>
</LinearLayout>

 

4. Create “activity_chat.xml” and use the below codes

<?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:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

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


        <ListView
            android:id ="@+id/listView"
            android:layout_weight="100"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:divider="@null"
            android:stackFromBottom="true"
            android:transcriptMode="alwaysScroll"
            />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#E0E0E0"/>
        <LinearLayout
            android:id="@+id/llMsgCompose"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="#ffffff"
            android:orientation="horizontal"
            android:weightSum="1" >

            <EditText
                android:id="@+id/new_message"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FFFFFF"
                android:textColor="#666666"
                android:paddingLeft="6dp"
                android:paddingRight="6dp"/>

            <!--<Button
                android:id="@+id/send_message"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#3F51B5"
                android:textColor="@color/white"
                android:text="SEND" />-->


            <ImageButton
                android:id="@+id/send_message"
                android:layout_width="80dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_send"
                android:background="#3F51B5"/>
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

 

5. Again we will create a custom item ui. We named it as “chat_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <LinearLayout
        android:id="@+id/msgFrom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:paddingLeft="10dp">

        <TextView
            android:id="@+id/lblMsgFrom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:textColor="#777777"
            android:textStyle="italic"
            android:padding="5dp"/>

        <TextView
            android:id="@+id/txtMsgFrom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:layout_marginRight="80dp"
            android:textColor="#434343"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:background="@drawable/bg_msg_from"/>
        <TextView
            android:id="@+id/timeMsgFrom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10dp"
            android:textColor="#999999"
            android:textStyle="italic"
            android:padding="5dp"/>

    </LinearLayout>



    <LinearLayout
        android:id="@+id/msgYou"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="right"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp" >

        <TextView
            android:id="@+id/lblMsgYou"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:textColor="#777777"
            android:textSize="12dp"
            android:textStyle="italic" />

        <TextView
            android:id="@+id/txtMsgYou"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="80dp"
            android:background="@drawable/bg_msg_you"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="5dp"
            android:textColor="#ffffff"
            android:textSize="16dp" />

        <TextView
            android:id="@+id/timeMsgYou"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:textColor="#999999"
            android:textSize="10dp"
            android:textStyle="italic" />

    </LinearLayout>

</LinearLayout>


 

6. Finally for sending a message to a new number we gonna need another layout resource file “activity_send_new.xml“.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp">

    <EditText
        android:id="@+id/address"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:hint="Phone Number"
        android:inputType="phone"
    />


    <EditText
        android:id="@+id/message"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:hint="Message"
        />
    <Button
        android:id="@+id/send_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:textColor="#FFFFFF"
        android:text="SEND"/>

</LinearLayout>

Please see the Part – 2 of Create a SMS app in Android – Android Studion for the back-end codes.

Leave a comment

Your email address will not be published. Required fields are marked *