Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Thursday, 1 June 2017

HB Blog 137: Android "O" Supports New Emoji With Unicode 10 Standard.

Emoji are ideograms and smileys used in electronic messages and Web pages. They are used much like emoticons and exist in various genres, including facial expressions, common objects, places and types of weather, and animals. The first emoji was created in 1999 in Japan by Shigetaka Kurita, who wanted to provide users with a way to communicate through images. Originating on Japanese mobile phones in the late 1990s, emoji have become increasingly popular worldwide since their international inclusion in Apple's iPhone, which was followed by similar adoption by Android and other mobile operating systems.
Apple was looking to expand its market in Japan. People had been using these characters to provide context to their communication, so Apple added a hidden feature in the iOS5 update. Suddenly, yellow faces and poop icons became a part of our lexicon.

Android "O" an upcoming release of the Android mobile operating system, supports new emoji that will be included in the Unicode 10 standard. A new emoji font was also introduced, which notably redesigns its face figures to use a traditional circular shape, as opposed to the "blob" design that was introduced on Android "KitKat".

One Emoji to Rule Them All Before an emoji can become an emoji it must be approved by the Unicode Consortium. Approval process typically takes 1 to 2 years.

Unicode Consortium Submission Process:-
1. Submit a proposal
2. Provide justification for its creation by proving a need.

Argue that the icon is already popular online and frequently searched. • Show that a currently existing family of emoji is missing this pivotal group member. • Prove that there is no other way to express this idea with an existing emoji combination.

Emoji communication problems(With Great Power Comes Great Responsibility) :-
Research has shown that emojis are often misunderstood. In some cases, this is related to how the actual emoji design is interpreted by the viewer, in other cases the emoji that was sent, was not shown in the same way at the receiving side.
The difference between these two problems is, that the first relates to the cultural or contextual interpretation of the smiley. When the author picks a smiley, the author thinks about the smiley in a certain way, but the same smiley may not trigger the same thoughts with the receiver. See also Models of communication.
The second problem is technological. When an author of a message picks a smiley from a list of smiley faces, this smiley is encoded in some way during the transmission, and if the author and the reader do not use the same software or operating system for their devices, the reader's device may visualize the same smiley in a different way.

Small changes to a smiley's look may completely alter its perceived meaning with the receiver.

...Keep Smiling 😊😊😊
No comments:
Tags: , , , , , , , , , , , , , , , ,

Wednesday, 15 March 2017

HB Blog 131: Material Design For Registration - Login Module.

Registration and login has been most important and very first step in a mobile application. There are various ways through which we can achieve these functionality. Not only functionality wise but also applications look and feel is very important. While Android and other mobile application users increasing, we are moving more over towards UI/UX interfaces. Android has been using material design in various patterns.

In these tutorial, I will show how to use material design for login and registration screens.

We need single page application which uses proper animations for screen transitions and provide easy to use and understand way. Using these sample code use can easily design registration-login module.


Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

//MainActivity.java  
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.transition.Explode;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import butterknife.ButterKnife;
import butterknife.InjectView;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.et_username)
    EditText etUsername;
    @InjectView(R.id.et_password)
    EditText etPassword;
    @InjectView(R.id.bt_go)
    Button btGo;
    @InjectView(R.id.cv)
    CardView cv;
    @InjectView(R.id.fab)
    FloatingActionButton fab;

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

    }

    @OnClick({R.id.bt_go, R.id.fab})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.fab:
                getWindow().setExitTransition(null);
                getWindow().setEnterTransition(null);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    ActivityOptions options =
                            ActivityOptions.makeSceneTransitionAnimation(this, fab, fab.getTransitionName());
                    startActivity(new Intent(this, RegisterActivity.class), options.toBundle());
                } else {
                    startActivity(new Intent(this, RegisterActivity.class));
                }
                break;
            case R.id.bt_go:
                Explode explode = new Explode();
                explode.setDuration(500);

                getWindow().setExitTransition(explode);
                getWindow().setEnterTransition(explode);
                ActivityOptionsCompat oc2 = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
                Intent i2 = new Intent(this,LoginSuccessActivity.class);
                startActivity(i2, oc2.toBundle());
                break;
        }
    }
}

//RegisterActivity.java  
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.AccelerateInterpolator;

import butterknife.ButterKnife;
import butterknife.InjectView;

public class RegisterActivity extends AppCompatActivity {

    @InjectView(R.id.fab)
    FloatingActionButton fab;
    @InjectView(R.id.cv_add)
    CardView cvAdd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        ButterKnife.inject(this);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            ShowEnterAnimation();
        }
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animateRevealClose();
            }
        });
    }

    private void ShowEnterAnimation() {
        Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.fabtransition);
        getWindow().setSharedElementEnterTransition(transition);

        transition.addListener(new Transition.TransitionListener() {
            @Override
            public void onTransitionStart(Transition transition) {
                cvAdd.setVisibility(View.GONE);
            }

            @Override
            public void onTransitionEnd(Transition transition) {
                transition.removeListener(this);
                animateRevealShow();
            }

            @Override
            public void onTransitionCancel(Transition transition) {

            }

            @Override
            public void onTransitionPause(Transition transition) {

            }

            @Override
            public void onTransitionResume(Transition transition) {

            }


        });
    }

    public void animateRevealShow() {
        Animator mAnimator = ViewAnimationUtils.createCircularReveal(cvAdd, cvAdd.getWidth()/2,0, fab.getWidth() / 2, cvAdd.getHeight());
        mAnimator.setDuration(500);
        mAnimator.setInterpolator(new AccelerateInterpolator());
        mAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }

            @Override
            public void onAnimationStart(Animator animation) {
                cvAdd.setVisibility(View.VISIBLE);
                super.onAnimationStart(animation);
            }
        });
        mAnimator.start();
    }

    public void animateRevealClose() {
        Animator mAnimator = ViewAnimationUtils.createCircularReveal(cvAdd,cvAdd.getWidth()/2,0, cvAdd.getHeight(), fab.getWidth() / 2);
        mAnimator.setDuration(500);
        mAnimator.setInterpolator(new AccelerateInterpolator());
        mAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                cvAdd.setVisibility(View.INVISIBLE);
                super.onAnimationEnd(animation);
                fab.setImageResource(R.drawable.plus);
                RegisterActivity.super.onBackPressed();
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }
        });
        mAnimator.start();
    }
    @Override
    public void onBackPressed() {
        animateRevealClose();
    }
}

//activity_main.xml  
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<?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"
    android:background="@drawable/bg"
    tools:context="cn.fanrunqi.materiallogin.MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:cardCornerRadius="6dp"
        app:cardElevation="3dp"
        app:cardUseCompatPadding="true"
        android:layout_centerInParent="true"
        android:id="@+id/cv">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
        <RelativeLayout
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="45dp">
            <View
                android:layout_alignParentStart="true"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:background="#2fa881"
                />
            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="50dp"
                android:text="@string/login"
                android:textColor="#FFCC00"
                android:textSize="18sp"
                android:textStyle="bold"
                />
        </RelativeLayout>
        <LinearLayout
            android:layout_marginTop="10dp"
            android:paddingStart="50dp"
            android:paddingEnd="30dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <android.support.design.widget.TextInputLayout
                android:textColorHint="#c5c5c5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <EditText
                    android:textSize="13sp"
                    android:hint="@string/Username"
                    android:textColor="#2fa881"
                    android:id="@+id/et_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPersonName"
                    android:background="@drawable/selector_bg_edit"
                    android:textCursorDrawable="@drawable/bg_input_cursor"
                    android:paddingBottom="2dp"
                    />
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>
            <LinearLayout
                android:paddingStart="50dp"
                android:paddingEnd="30dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="50dp">
                <android.support.design.widget.TextInputLayout
                    android:textColorHint="#c5c5c5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <EditText
                        android:textSize="13sp"
                        android:hint="@string/Password"
                        android:textColor="#2fa881"
                        android:id="@+id/et_password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textPassword"
                        android:background="@drawable/selector_bg_edit"
                        android:textCursorDrawable="@drawable/bg_input_cursor"
                        android:paddingBottom="2dp"
                        />
                </android.support.design.widget.TextInputLayout>
            </LinearLayout>
            <RelativeLayout
                android:layout_marginTop="25dp"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="60dp">
                <Button
                    android:id="@+id/bt_go"
                    android:background="@drawable/bt_shape"
                    android:stateListAnimator="@drawable/state_list_animator_z"
                    android:layout_width="150dp"
                    android:layout_height="50dp"
                    android:text="@string/go"
                    android:textColor="#d3d3d3"
                    >
                </Button>
            </RelativeLayout>
            <TextView
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:textColor="#9a9a9a"
                android:textSize="12sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/forgot_your_password"
                />
        </LinearLayout>
        </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:src="@drawable/plus"
        android:transitionName="loginFab"
        android:layout_alignTop="@id/cv"
        android:layout_marginTop="25dp"
        android:layout_alignEnd="@id/cv"
        android:layout_marginEnd="-20dp"
        />

</RelativeLayout>

//activity_register.xml  
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<?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"
    android:background="@drawable/bg">

    <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:cardCornerRadius="6dp"
        app:cardElevation="3dp"
        app:cardUseCompatPadding="true"
        android:layout_centerInParent="true"
        android:id="@+id/cv">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
        <RelativeLayout
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="45dp">
            <View
                android:layout_alignParentStart="true"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:background="#2fa881"
                />
            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="50dp"
                android:text="@string/login"
                android:textColor="#FFCC00"
                android:textSize="18sp"
                android:textStyle="bold"
                />
        </RelativeLayout>
        <LinearLayout
            android:layout_marginTop="10dp"
            android:paddingStart="50dp"
            android:paddingEnd="30dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <android.support.design.widget.TextInputLayout
                android:textColorHint="#c5c5c5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <EditText
                    android:textSize="13sp"
                    android:hint="@string/Username"
                    android:textColor="#2fa881"
                    android:id="@+id/et_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPersonName"
                    android:background="@drawable/selector_bg_edit"
                    android:textCursorDrawable="@drawable/bg_input_cursor"
                    android:paddingBottom="2dp"
                    />
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>
            <LinearLayout
                android:paddingStart="50dp"
                android:paddingEnd="30dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="50dp">
                <android.support.design.widget.TextInputLayout
                    android:textColorHint="#c5c5c5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <EditText
                        android:textSize="13sp"
                        android:hint="@string/Password"
                        android:textColor="#2fa881"
                        android:id="@+id/et_password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textPassword"
                        android:background="@drawable/selector_bg_edit"
                        android:textCursorDrawable="@drawable/bg_input_cursor"
                        android:paddingBottom="2dp"
                        />
                </android.support.design.widget.TextInputLayout>
            </LinearLayout>
            <RelativeLayout
                android:layout_marginTop="25dp"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="60dp">
                <Button
                    android:id="@+id/bt_go"
                    android:background="@drawable/bt_shape"
                    android:stateListAnimator="@drawable/state_list_animator_z"
                    android:layout_width="150dp"
                    android:layout_height="50dp"
                    android:text="@string/go"
                    android:textColor="#d3d3d3"
                    >
                </Button>
            </RelativeLayout>
            <TextView
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:textColor="#9a9a9a"
                android:textSize="12sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/forgot_your_password"
                />
        </LinearLayout>
        </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:src="@drawable/plus"
        android:transitionName="loginFab"
        android:layout_alignTop="@id/cv"
        android:layout_marginTop="25dp"
        android:layout_alignEnd="@id/cv"
        android:layout_marginEnd="-20dp"
        />

</RelativeLayout>
No comments:
Tags: , , , , , , , , , , , , , , ,

Tuesday, 15 November 2016

HB Blog 123: Android PowerPoint Viewer Tutorial.

Microsoft PowerPoint is a slide show presentation program currently developed by Microsoft, for use on both Microsoft and Apple Macintosh operating systems. PowerPoint, initially named "Presenter", was created by Forethought Inc.. Microsoft's version of PowerPoint was officially launched on May 22, 1990, as a part of the Microsoft Office suite. PowerPoint is useful for helping develop the slide-based presentation format and is currently one of the most commonly used slide-based presentation programs available. Microsoft has also released the PowerPoint mobile application for use on Apple and Android mobile operating systems.

PowerPoint presentations consist of a number of individual pages or "slides". The "slide" analogy is a reference to the slide projector. Slides may contain text, graphics, sound, movies, and other objects, which may be arranged freely.


Microsoft Office PowerPoint Viewer is a program used to run presentations on computers that do not have PowerPoint installed. Office PowerPoint Viewer (or in PowerPoint 2007 and later, a link to a viewer download) is added by default to the same disk or network location that contains one or more presentations packaged by using the Package for CD feature. PowerPoint Viewer is installed by default with a Microsoft Office 2003 installation for use with the Package for CD feature. The PowerPoint Viewer file is also available for download from the Microsoft Office Online Web site. Presentations password-protected for opening or modifying can be opened by PowerPoint Viewer. The Package for CD feature allows packaging any password-protected file or setting a new password for all packaged presentations. PowerPoint Viewer prompts for a password if the file is open password-protected. PowerPoint Viewer supports opening presentations created using PowerPoint 97 and later. In addition, it supports all file content except OLE objects and scripting. PowerPoint Viewer is currently only available for computers running on Microsoft Windows.

For Android mobile platform OS we have itsrts-pptviewer.jar library which acts as PowerPoint Viewer in the Android application,

Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

activity_main.xml 
1
2
3
4
5
6
7
8
9
<RelativeLayout 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">
    <com.itsrts.pptviewer.PPTViewer
        android:id="@+id/pptviewer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

MainActivity.java 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.example.harshalbenake.pptviewer;

import android.app.Activity;
import android.os.Bundle;
import android.os.Environment;
import com.itsrts.pptviewer.PPTViewer;

public class MainActivity extends Activity {
    PPTViewer pptViewer;
    public static final String sdCardPath = Environment.getExternalStorageDirectory() + "/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pptViewer = (PPTViewer) findViewById(R.id.pptviewer);
        String path = sdCardPath +"Bestowal" + "/" + "PPT1.ppt";
        pptViewer.setNext_img(R.drawable.next).setPrev_img(R.drawable.prev)
                .setSettings_img(R.drawable.settings)
                .setZoomin_img(R.drawable.zoomin)
                .setZoomout_img(R.drawable.zoomout);
        pptViewer.loadPPT(this, path);
    }
}
No comments:
Tags: , , , , , , , , , , , , , , , , ,

Saturday, 15 October 2016

HB Blog 121: Android Circular Menu Look And Feel.

Menus are a common user interface component in many types of applications. To provide a familiar and consistent user experience, you should use the Menu APIs to present user actions and other options in your activities.
Although the design and user experience for some menu items have changed, the semantics to define a set of actions and options is still based on the Menu APIs.

A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the ViewGroup.LayoutParams class which serves as the base class for layouts parameters.

 void onLayout (boolean changed, int left,  int top, int right, int bottom) method is called from layout when this view should assign a size and position to each of its children. Derived classes with children should override this method and call layout on each of their children.

 void onMeasure (int widthMeasureSpec, int heightMeasureSpec) method measure the view and its content to determine the measured width and the measured height. This method is invoked by measure(int, int) and should be overridden by subclasses to provide accurate and efficient measurement of their contents.
When overriding this method, you must call setMeasuredDimension(int, int) to store the measured width and height of this view. Failure to do so will trigger an IllegalStateException, thrown by measure(int, int). Calling the superclass' onMeasure(int, int) is a valid use.
The base class implementation of measure defaults to the background size, unless a larger size is allowed by the MeasureSpec. Subclasses should override onMeasure(int, int) to provide better measurements of their content.
If this method is overridden, it is the subclass's responsibility to make sure the measured height and width are at least the view's minimum height and width (getSuggestedMinimumHeight() and getSuggestedMinimumWidth()).

Using these two methods we can create our circular view and add the child views in the layout arranging into circular layout. Finally, we can have circular menu UI which can give attractive look and feel to out applications.
Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,
  
//activity_cicularmenu2.xml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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"
    android:gravity="center_vertical"
    android:background="#590100"
    android:orientation="horizontal" >

    <circlemenulayout.CircleMenuLayout
        android:id="@+id/id_menulayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="100dp"
        android:background="@drawable/circle_bg3" >

        <RelativeLayout
            android:id="@id/id_circle_menu_item_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <TextView
                android:id="@+id/tv_circlemenu"
                android:textSize="25sp"
                android:textStyle="bold"
                android:textColor="#a5f406"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"/>
        </RelativeLayout>
    </circlemenulayout.CircleMenuLayout>

</LinearLayout>

//circle_menu_item.xml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/id_circle_menu_item_image"
        android:layout_width="wrap_content"
        android:visibility="gone"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/id_circle_menu_item_text"
        android:layout_width="wrap_content"
        android:visibility="gone"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="text"
        android:textSize="16sp" />

</LinearLayout>

//CircleActivity.java 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
package com.example.harshalbenake.circularlayout;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.TextView;
import android.widget.Toast;

import circlemenulayout.CircleMenuLayout;
import circlemenulayout.CircleMenuLayout.OnMenuItemClickListener;

/**
 * <pre>


 * </pre>
 */
public class CircleActivity extends Activity {

    private CircleMenuLayout mCircleMenuLayout;

    private String[] mItemTexts = new String[]{"Item 0", "Item 1", "Item 2", "Item 3",
            "Item 4", "Item 5", "Item 6"};
    private int[] mItemImgs = new int[]{
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
            R.drawable.ic_launcher};
    private TextView mtv_circlemenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_cicularmenu2);

        mCircleMenuLayout = (CircleMenuLayout) findViewById(R.id.id_menulayout);
        mtv_circlemenu = (TextView) findViewById(R.id.tv_circlemenu);

        mCircleMenuLayout.setMenuItemIconsAndTexts(mItemImgs, mItemTexts);
        mCircleMenuLayout.setOnMenuItemClickListener(new OnMenuItemClickListener() {

            @Override
            public void itemClick(final View view, int pos) {
                mtv_circlemenu.setText(mItemTexts[pos]);
                Animation rotateAnimation = new RotateAnimation(0, 360, view.getWidth() / 2, view.getHeight() / 2);
                rotateAnimation.setDuration(250);
                view.startAnimation(rotateAnimation);
            }

            @Override
            public void itemCenterClick(View view) {
                Toast.makeText(CircleActivity.this, "Middle Item Clicked", Toast.LENGTH_SHORT).show();

            }
        });

    }

}

//CircleMenuLayout.java 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
package circlemenulayout;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.harshalbenake.circularlayout.R;


public class CircleMenuLayout extends ViewGroup {
    private int mRadius;
    private static final float RADIO_DEFAULT_CHILD_DIMENSION = 1 / 4f;
    private float RADIO_DEFAULT_CENTERITEM_DIMENSION = 1 / 3f;
    private static final float RADIO_PADDING_LAYOUT = 1 / 12f;
    private static final int FLINGABLE_VALUE = 300;
    private static final int NOCLICK_VALUE = 3;
    private int mFlingableValue = FLINGABLE_VALUE;
    private float mPadding;
    private double mStartAngle = 0;
    private String[] mItemTexts;
    private int[] mItemImgs;
    private int mMenuItemCount;
    private float mTmpAngle;
    private long mDownTime;
    private boolean isFling;
    private int mMenuItemLayoutId = R.layout.circle_menu_item;

    public CircleMenuLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        setPadding(0, 0, 0, 0);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int resWidth = 0;
        int resHeight = 0;


        int width = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int height = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);


        if (widthMode != MeasureSpec.EXACTLY
                || heightMode != MeasureSpec.EXACTLY) {
            resWidth = getSuggestedMinimumWidth();
            resWidth = resWidth == 0 ? getDefaultWidth() : resWidth;

            resHeight = getSuggestedMinimumHeight();
            resHeight = resHeight == 0 ? getDefaultWidth() : resHeight;
        } else {
            resWidth = resHeight = Math.min(width, height);
        }

        setMeasuredDimension(resWidth, resHeight);

        mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight());

        final int count = getChildCount();
        int childSize = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
        int childMode = MeasureSpec.EXACTLY;

        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);

            if (child.getVisibility() == GONE) {
                continue;
            }

            int makeMeasureSpec = -1;

            if (child.getId() == R.id.id_circle_menu_item_center) {
                makeMeasureSpec = MeasureSpec.makeMeasureSpec(
                        (int) (mRadius * RADIO_DEFAULT_CENTERITEM_DIMENSION),
                        childMode);
            } else {
                makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize,
                        childMode);
            }
            child.measure(makeMeasureSpec, makeMeasureSpec);
        }

        mPadding = RADIO_PADDING_LAYOUT * mRadius;

    }

    public interface OnMenuItemClickListener {
        void itemClick(View view, int pos);

        void itemCenterClick(View view);
    }


    private OnMenuItemClickListener mOnMenuItemClickListener;

    /**
     *
     * @param mOnMenuItemClickListener
     */
    public void setOnMenuItemClickListener(
            OnMenuItemClickListener mOnMenuItemClickListener) {
        this.mOnMenuItemClickListener = mOnMenuItemClickListener;
    }


    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int layoutRadius = mRadius;

        // Laying out the child views
        final int childCount = getChildCount();

        int left, top;
        // menu item
        int cWidth = (int) (layoutRadius * RADIO_DEFAULT_CHILD_DIMENSION);

        float angleDelay = 360 / (getChildCount() - 1);

        for (int i = 0; i < childCount; i++) {
            final View child = getChildAt(i);

            if (child.getId() == R.id.id_circle_menu_item_center)
                continue;

            if (child.getVisibility() == GONE) {
                continue;
            }

            mStartAngle %= 360;

            float tmp = layoutRadius / 2f - cWidth / 2 - mPadding;

            left = layoutRadius
                    / 2
                    + (int) Math.round(tmp
                    * Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f
                    * cWidth);
            top = layoutRadius
                    / 2
                    + (int) Math.round(tmp
                    * Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f
                    * cWidth);

            child.layout(left, top, left + cWidth, top + cWidth);
            mStartAngle += angleDelay;
        }

        View cView = findViewById(R.id.id_circle_menu_item_center);
        if (cView != null) {
            cView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {

                    if (mOnMenuItemClickListener != null) {
                        mOnMenuItemClickListener.itemCenterClick(v);
                    }
                }
            });
            int cl = layoutRadius / 2 - cView.getMeasuredWidth() / 2;
            int cr = cl + cView.getMeasuredWidth();
            cView.layout(cl, cl, cr, cr);
        }

    }

    private float mLastX;
    private float mLastY;


    private AutoFlingRunnable mFlingRunnable;

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        // Log.e("TAG", "x = " + x + " , y = " + y);

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:

                mLastX = x;
                mLastY = y;
                mDownTime = System.currentTimeMillis();
                mTmpAngle = 0;

                if (isFling) {
                    removeCallbacks(mFlingRunnable);
                    isFling = false;
                    return true;
                }

                break;
            case MotionEvent.ACTION_MOVE:

                float start = getAngle(mLastX, mLastY);

                float end = getAngle(x, y);

                // Log.e("TAG", "start = " + start + " , end =" + end);
                if (getQuadrant(x, y) == 1 || getQuadrant(x, y) == 4) {
                    mStartAngle += end - start;
                    mTmpAngle += end - start;
                } else
                {
                    mStartAngle += start - end;
                    mTmpAngle += start - end;
                }
                requestLayout();

                mLastX = x;
                mLastY = y;

                break;
            case MotionEvent.ACTION_UP:

                float anglePerSecond = mTmpAngle * 1000
                        / (System.currentTimeMillis() - mDownTime);

                // Log.e("TAG", anglePrMillionSecond + " , mTmpAngel = " +
                // mTmpAngle);

                if (Math.abs(anglePerSecond) > mFlingableValue && !isFling) {
                    post(mFlingRunnable = new AutoFlingRunnable(anglePerSecond));

                    return true;
                }

                if (Math.abs(mTmpAngle) > NOCLICK_VALUE) {
                    return true;
                }

                break;
        }
        return super.dispatchTouchEvent(event);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return true;
    }

    /**
     *
     * @param xTouch
     * @param yTouch
     * @return
     */
    private float getAngle(float xTouch, float yTouch) {
        double x = xTouch - (mRadius / 2d);
        double y = yTouch - (mRadius / 2d);
        return (float) (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI);
    }

    /**
     *
     * @param x
     * @param y
     * @return
     */
    private int getQuadrant(float x, float y) {
        int tmpX = (int) (x - mRadius / 2);
        int tmpY = (int) (y - mRadius / 2);
        if (tmpX >= 0) {
            return tmpY >= 0 ? 4 : 1;
        } else {
            return tmpY >= 0 ? 3 : 2;
        }

    }

    /**
     *
     * @param resIds
     */
    public void setMenuItemIconsAndTexts(int[] resIds, String[] texts) {
        mItemImgs = resIds;
        mItemTexts = texts;

        if (resIds == null && texts == null) {
            throw new IllegalArgumentException("IllegalArgumentException");
        }

        mMenuItemCount = resIds == null ? texts.length : resIds.length;

        if (resIds != null && texts != null) {
            mMenuItemCount = Math.min(resIds.length, texts.length);
        }

        addMenuItems();

    }

    /**
     *
     * @param mMenuItemLayoutId
     */
    public void setMenuItemLayoutId(int mMenuItemLayoutId) {
        this.mMenuItemLayoutId = mMenuItemLayoutId;
    }

    /**
     */
    private void addMenuItems() {
        LayoutInflater mInflater = LayoutInflater.from(getContext());


        for (int i = 0; i < mMenuItemCount; i++) {
            final int j = i;
            View view = mInflater.inflate(mMenuItemLayoutId, this, false);
            ImageView iv = (ImageView) view
                    .findViewById(R.id.id_circle_menu_item_image);
            TextView tv = (TextView) view
                    .findViewById(R.id.id_circle_menu_item_text);

            if (iv != null) {
                iv.setVisibility(View.VISIBLE);
                iv.setImageResource(mItemImgs[i]);
                iv.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {

                        if (mOnMenuItemClickListener != null) {
                            mOnMenuItemClickListener.itemClick(v, j);
                        }
                    }
                });
            }
            if (tv != null) {
                tv.setVisibility(View.VISIBLE);
                tv.setText(mItemTexts[i]);
            }

            addView(view);
        }
    }

    /**
     *
     * @param mFlingableValue
     */
    public void setFlingableValue(int mFlingableValue) {
        this.mFlingableValue = mFlingableValue;
    }

    /**
     *
     * @param mPadding
     */
    public void setPadding(float mPadding) {
        this.mPadding = mPadding;
    }

    /**
     *
     * @return
     */
    private int getDefaultWidth() {
        WindowManager wm = (WindowManager) getContext().getSystemService(
                Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return Math.min(outMetrics.widthPixels, outMetrics.heightPixels);
    }


    public class AutoFlingRunnable implements Runnable {

        private float angelPerSecond;

        public AutoFlingRunnable(float velocity) {
            this.angelPerSecond = velocity;
        }

        public void run() {
            if ((int) Math.abs(angelPerSecond) < 20) {
                isFling = false;
                return;
            }
            isFling = true;
            mStartAngle += (angelPerSecond / 30);
            angelPerSecond /= 1.0666F;
            postDelayed(this, 30);
            requestLayout();
        }
    }

}
No comments:
Tags: , , , , , , , , , ,
Subscribe to: Posts (Atom)