Circular Button with Icon and Text in Android

Rounded android button can be used for many purposes to make awesome application. We can see many applications that have used circle button or rounded corner. In this tutorial, I am going to show how to make circular android button and to add icons/images and text in the same button.

To make circular button in android app, you don’t need any java code, this can be done by using only XML. Rounded button can also be created by using java code but it is time consuming and need to have advance knowledge of java programming.

Here you will learn to make circular/rounded corner button using XML only.

Android Example: How to Create Circular Button with Icon and Text in Android

First you have to create a new XML file in drawable folder to make rounded button. In this file I have made a rectangle and gave border radius to make circular and fill the background and border color. Following is the complete content of XML drawable file.

res/drawable/ circle.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://pkrkinth.android.com/apk/res/android"

android:shape="rectangle">

<corners android:radius="1000dp" />

<solid android:color="#41ba7a" />

<stroke

android:width="2dip"

android:color="#03ae3c" />

<padding

android:bottom="4dp"

android:left="4dp"

android:right="4dp"

android:top="4dp" />

</shape>

XML Layout File

This is the XML layout file where I have added different buttons with image and text together and set background to the drawable file that we have created above. Following is the complete content of XML layout file.

res/layout/circular_button_with_image_and_text.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://pkrkinth.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center_horizontal"

android:orientation="vertical"

android:padding="16dp">

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

<Button

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@drawable/circle"

android:drawableTop="@android:drawable/ic_dialog_email"

android:paddingTop="20dp"

android:text="Contact"

android:textColor="#fff" />

<Button

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginLeft="10dp"

android:background="@drawable/circle"

android:drawableTop="@android:drawable/ic_dialog_map"

android:paddingTop="20dp"

android:text="Map"

android:textColor="#fff" />

<Button

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginLeft="10dp"

android:background="@drawable/circle"

android:drawableTop="@android:drawable/ic_dialog_info"

android:paddingTop="20dp"

android:text="Info"

android:textColor="#fff" />

</LinearLayout>

</LinearLayout>

Java Activity File

Following is the default code of java activity file.

src/ RoundedAndroidButton.java

package pkrkinth.com.androidxmluserinterfacetutorial;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

public class RoundedAndroidButton extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.circular_button_with_image_and_text);

}

}

Strings.xml File

res/values/strings.xml

<resources>

<string name="app_name">Circular Button with Icon and Text</string>

</resources>

Now, run your Circular Button with Icon and Text in Android application which will look like above screenshot. If you have any question please mention in the comment box below. 

Read more...

How can I decrease the size of Ratingbar?

There are two ways you can do this.

You have to style the RatingBar with either ratingBarStyleSmall or a custom style inheriting from Widget.Material.RatingBar.Small (assuming you're using Material Design in your app).

Option 1:

<RatingBar android:id="@+id/ratingBar" style="?android:attr/ratingBarStyleSmall" ... />

Option 2:

// styles.xml<style name="customRatingBar" parent parent="android:style/Widget.Material.RatingBar.Small"> ... // Additional customizations</style> // layout.xml<RatingBar android:id="@+id/ratingBar" style="@style/customRatingBar" ... />

Read more...

Android Material Rating Bar - Rating Bar example in Material Design

Rating Bar

How to add?

I. In your build.gradle add latest appcompat library.

dependencies { compile
compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version}

II. Make your activity extend android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity { ...}

III. Declare your RatingBar inside any layout.xml file.

<RatingBar android:rating="3.5" android:stepSize="0.5" android:numStars="5" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

How to style?

I. Declare custom style in your styles.xml file.

<style name="RatingBar" parent="Theme.AppCompat"> <item name="colorControlNormal">@color/indigo</item> <item name="colorControlActivated">@color/pink</item></style>

II. Apply this style to your RatingBar via android:theme attribute.

<RatingBar android:theme="@style/RatingBar" android:rating="3" android:stepSize="0.5" android:numStars="5" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

Read more...

Create 'assets' folder in Android Studio

It is not easy to add 'assets' folder in Android Studio, today we learn how to add 'assets' folder in Android Studio.
In Android Studio you got to create it, lets see how it has to be done:
1. Navigate to Packages

2. You would see app as the root folder, right click on it and select : New -> Folder -> Assets Folder

3.You would get a Dialog : Create a source root for assets which will be included in APK. Target Source Set : main

4. Click Finish
5. Now move back to Android Project view, you should be able to see the 'assets' folder now 

 

Hope it helps, Enjoy (Y) 

Read more...

How to make an android app to always run in background?

If you want to make an Android app to always run in background, then below is the process of doing it.

You have to start a service in your Application class to run it always. If you do that, your service will be always running. Even though user terminates your app from task manager or force stop your app, it will start running again.
Create a service:

public class YourService extends Service {

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        return null;
    }

    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        // do your jobs here
        return super.onStartCommand(intent, flags, startId);
    }
}

Create an Application class and start your service:

public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        startService(new Intent(this, YourService.class));
    }
}

Don't forget add this in "application" tag of your AndroidManifest.xml

android:name=".App"

Read more...

How to start an Application on startup?

Hi Friends,

Today we learn how to start an application on device startup.
First, you need the permission in your AndroidManifest.xml

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

Also in your AndroidManifest.xml, define your service and listen for the BOOT_COMPLETED action:

<service android:name=".MyService" android:label="My Service">
    <intent-filter>
        <action android:name="com.myapp.MyService" />
    </intent-filter>
</service>

<receiver
    android:name=".receiver.StartMyServiceAtBootReceiver"
    android:label="StartMyServiceAtBootReceiver">
    <intent-filter>
        <action android:name="android.intent.action.BOOT_COMPLETED" />
    </intent-filter>
</receiver>

Then you need to define  the receiver that will get the BOOT_COMPLETED action and start your service.

public class StartMyServiceAtBootReceiver extends BroadcastReceiver {

    @Override
    public void onReceive(Context context, Intent intent) {
        if (Intent.ACTION_BOOT_COMPLETED.equals(intent.getAction())) {
            Intent serviceIntent = new Intent(context, MyService.class);
            context.startService(serviceIntent);
        }
    }
}

And now your applicaiton should be running when the phone starts up.

Enjoy!! 

Read more...

Get the phone IMEI number (or serial number)

There are many ways to get the mobile phone IMEI no. You can follow any of this process:

Process 1:
TelephonyManager mngr = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE); mngr.getDeviceId();

add READ_PHONE_STATE permission to AndroidManifest.xml

Process 2:
telephonyManager = (TelephonyManager)context.getSystemService(Context.TELEPHONY_SERVICE); deviceId = telephonyManager.getDeviceId(); Log.d(TAG, "getDeviceId() " + deviceId); phoneType = telephonyManager.getPhoneType(); Log.d(TAG, "getPhoneType () " + phoneType);

Process 3:
Also you can get the both IMEI numbers using the below code

TelephonyManager tm = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE);
String imeiNumber1 = tm.getDeviceId(1); //(API level 23)   
String imeiNumber2 = tm.getDeviceId(2);

Process 4:

telephonyManager = (TelephonyManager)context.getSystemService(Context.TELEPHONY_SERVICE);

    deviceId = telephonyManager.getDeviceId(); 
    Log.d(TAG, "getDeviceId() " + deviceId);


    phoneType = telephonyManager.getPhoneType();
    Log.d(TAG, "getPhoneType () " + phoneType);

Hope it helps!! :)

Read more...

How to Implement Material Design Floating Action Menu

How to Implement Material Design Floating Action Menu

Floating action menu is new concept which is used in mobile apps and websites. Nowadays some popular sites and apps have used floating action menu including inbox. It is used for quick action with multiple options like uploading photo, video, writing note etc. Floating action menu is useful for note taking application. Here, we will learn to add/implement material design floating action menu in our android application or game.

Using floating action menu helps to make clean and to increase content space in mobile app. One button is visible and when users click that button, other action buttons will appear there.

This is simple task just we have to add some floating action buttons and make it as menu. Let's start by adding compile 'com.github.clans:fab:1.6.2' dependency in our app build.gradle file. Build.gradle file will look like below.

build.gradle

dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.1.0' compile 'com.android.support:design:23.1.0' compile 'com.github.clans:fab:1.6.2' }

XML Layout File

Open your app XML layout file and add following XML code.

res/layout/ material_design_floating_menu.xml

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

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/material_design_android_floating_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="11dp"
        android:layout_marginLeft="11dp"
        android:layout_marginRight="11dp"
        fab:menu_animationDelayPerItem="55"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_buttonSpacing="0dp"
        fab:menu_colorNormal="#da3c2f"
        fab:menu_colorPressed="#dc4b3f"
        fab:menu_colorRipple="#99d4d4d4"
        fab:menu_fab_label="Floating Action Menu"
        fab:menu_fab_size="normal"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_labels_colorNormal="#333"
        fab:menu_labels_colorPressed="#444"
        fab:menu_labels_colorRipple="#66efecec"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_position="left"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_textColor="#f2f1f1"
        fab:menu_labels_textSize="15sp"
        fab:menu_openDirection="up"
        fab:menu_shadowColor="#66aff198"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="4dp"
        fab:menu_showShadow="true">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_menu_item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_send"
            fab:fab_label="Menu Item 1"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_menu_item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_photo"
            fab:fab_label="Menu Item 2"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_menu_item3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_edit"
            fab:fab_label="Menu Item 3"
            fab:fab_size="mini" />
    </com.github.clans.fab.FloatingActionMenu>
</RelativeLayout>

Java Activity File

Here, we controlled all about action menu item onclick. Following is the complete modified code of java activity file and you can add action to onclick listener according to your requirement.

src/ MaterialDesignFloatingActionMenu.java

package kithnkin.com.materialdesigntutorial;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.github.clans.fab.FloatingActionButton;
import com.github.clans.fab.FloatingActionMenu;

public class MaterialDesignFloatingActionMenu extends AppCompatActivity {

    FloatingActionMenu materialDesignFAM;
    FloatingActionButton floatingActionButton1, floatingActionButton2, floatingActionButton3;

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

        materialDesignFAM = (FloatingActionMenu) findViewById(R.id.material_design_android_floating_menu);
        floatingActionButton1 = (FloatingActionButton) findViewById(R.id.material_design_floating_menu_item1);
        floatingActionButton2 = (FloatingActionButton) findViewById(R.id.material_design_floating_menu_item2);
        floatingActionButton3 = (FloatingActionButton) findViewById(R.id.material_design_floating_menu_item3);

        floatingActionButton1.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                //TODO something when floating action menu first item clicked

            }
        });
        floatingActionButton2.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                //TODO something when floating action menu second item clicked

            }
        });
        floatingActionButton3.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                //TODO something when floating action menu third item clicked

            }
        });
    }
}

Now, run your Material Design Android Floating Action Menu Example application and click to the plus button then some other buttons will appear just above that plus button like the above screenshot. 

Enjoy and Happy coding....

Read more...

Create a signed build apk using build.gradle

You can create a signed build apk via regular method.
Here we learn another way to generate signed build apk through build.gradle:

android {
      signingConfigs {
                release {
                      storeFile file ("release.keystore")
                      storePassword "******"
                      storeAlias "********"
                      keyPassword "*******"
                }
        }
        buildTypes {
                release {
                      signingConfig signingConfigs.release
                 }
         }
}

Now your signed release apk is ready.

Read more...

Floating Action Button(FAB) with Animation in Material Design

Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.
Most of the Material Design apps use the important element as FAB which covers important functionality of their apps. 
Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the fabSize attribute.
As this class descends from ImageView, you can control the icon which is displayed via setImageDrawable(Drawable).
The background color of this view defaults to the your theme's  colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

1. Floating Action Button
You can place a floating action button using below design support widget. The layout_gravity attribute is used to define the position of the button.

<android.support.design.widget.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" 
android:src="@android:drawable/ic_dialog_email" />


2. Creating New Project

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. I gave my project name as FAB and package name as com.androidxu.floatingbutton

2. Open build.gradle and add design support library dependency.

com.android.support:appcompat-v7:23.1.1 and com.android.support:design:23.1.1

dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) test
Compile 'junit:junit:4.12' 
compile 'com.android.support:appcompat-v7:23.1.1' 
compile 'com.android.support:design:23.1.1' }

3. Open dimens.xml and add below dimensions. You can see fab_margin is added as 16dp

4.Open the layout file of main activity (activity_main.xml) and do the below changes. You can see the Floating Action Button is added in the below layout. This layout contains the toolbar and floating action button needed for the activity.

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidxu.floatingbutton.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Example of Floating buttons"
        android:textSize="20sp"
        android:layout_gravity="center"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="180dp"
        android:src="@drawable/ic_action_settings"
        android:elevation="6dp"
        android:id="@+id/settings"
        app:pressedTranslationZ="12dp"
        android:backgroundTint="@color/fab1_color"
        android:visibility="invisible"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="100dp"
        android:src="@drawable/ic_action_share"
        android:elevation="6dp"
        android:id="@+id/share"
        app:pressedTranslationZ="12dp"
        android:backgroundTint="@color/fab2_color"
        android:visibility="invisible"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:fabSize="normal"
        android:layout_margin="16dp"
        android:src="@drawable/ic_action_more"
        android:elevation="6dp"
        android:id="@+id/more"
        app:pressedTranslationZ="12dp"/>

2.1 Floating Action Button Click Listener

The click event listener of fab is same as a normal button click event. Add the below code to your MainActivity.java to take appropriate action when fab is clicked.

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Click action
                Intent intent = new Intent(MainActivity.this, NewMessageActivity.class);
                startActivity(intent);
            }
        });

2.2 Adding the click Event in other two  Floating Action Button


Add the below code with combining the animation and other two action buttons in MainActivity.java.

package com.androidxu.floatingbutton;

import android.support.design.widget.FloatingActionButton;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    FloatingActionButton fab_more,fab_settings,fab_share;
    Animation open, close, rotateclock,rotateanticlock;
    boolean isopen = false;

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

        // typecasting the buttons
        fab_more = (FloatingActionButton) findViewById(R.id.more);
        fab_settings = (FloatingActionButton) findViewById(R.id.settings);
        fab_share = (FloatingActionButton) findViewById(R.id.share);

        // loading the animation from xml file
        open = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fab_open);
        close = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fab_close);
        rotateclock = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_clock);
        rotateanticlock = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_anticlock);

        // setting up the onClickListener() method
        fab_more.setOnClickListener(this);
        fab_settings.setOnClickListener(this);
        fab_share.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId())
        {
            case R.id.more:
                if(isopen){
                    // more button is already open
                    fab_settings.startAnimation(close);
                    fab_share.startAnimation(close);
                    fab_more.startAnimation(rotateanticlock);
                    fab_share.setClickable(false);
                    fab_settings.setClickable(false);
                    isopen = false;
                } else{
                    // more button is already close
                    fab_settings.startAnimation(open);
                    fab_share.startAnimation(open);
                    fab_more.startAnimation(rotateclock);
                    fab_share.setClickable(true);
                    fab_settings.setClickable(true);
                    isopen = true;
                }
                break;
            case R.id.settings:
                Toast.makeText(getApplicationContext(),"You clicked settings",Toast.LENGTH_LONG).show();
                break;
            case R.id.share:
                Toast.makeText(getApplicationContext(),"You clicked share",Toast.LENGTH_LONG).show();
                break;
        }
    }
}

2.3 Adding the animation to Floating Button

To add animation to the material design element create anim folder in res Folder .Adding the animation element by creating xml File

create  fab_close.xml

<scale
    android:duration="300"
    android:fromXScale="0.8"
    android:fromYScale="0.8"
    android:toXScale="0.0"
    android:toYScale="0.0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    />

<alpha
    android:duration="300"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    />

2.3.1 For Rotating  animation to the Fab add the rotate_clock.xml

<rotate
    android:duration="300"
    android:fromDegrees="0"
    android:toDegrees="45"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    />

Now run the Application and Enjoy!!

Read more...