CODEWITHSUNDEEP
androidandroid-layoutandroid-animation
Anubhav Jha
Anubhav Jha

Reputation: 81

How to achieve following transition in my android app homescreen?

I am converting an ios app into android app.Please can someone help me with the transition. I am not able to find how the home screen transition/animation for menu like events, pro shows, about us, etc are showed in a circular pattern. Please someone help.

See the below links for animation.

Home Screen1

Home Screen2

Upvotes: 2

Views: 119

Answers (2)

Anjali Tripathi
Anjali Tripathi

Reputation: 1477

You can also refer satellite menu lib for this if you are expecting this for all version

 SatelliteMenu menu = (SatelliteMenu) findViewById(R.id.menu);

//        Set from XML, possible to programmatically set        
//        float distance = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 170, getResources().getDisplayMetrics());
//        menu.setSatelliteDistance((int) distance);
//        menu.setExpandDuration(500);
//        menu.setCloseItemsOnClick(false);
//        menu.setTotalSpacingDegree(60);

        List<SatelliteMenuItem> items = new ArrayList<SatelliteMenuItem>();
        items.add(new SatelliteMenuItem(4, R.drawable.ic_1));
        items.add(new SatelliteMenuItem(4, R.drawable.ic_3));
        items.add(new SatelliteMenuItem(4, R.drawable.ic_4));
        items.add(new SatelliteMenuItem(3, R.drawable.ic_5));
        items.add(new SatelliteMenuItem(2, R.drawable.ic_6));
        items.add(new SatelliteMenuItem(1, R.drawable.ic_2));

Refer this link for details https://github.com/siyamed/android-satellite-menu/blob/master/satellite-menu-sample

Upvotes: 0

Mohammad Arman
Mohammad Arman

Reputation: 7065

You can check this library. Simple modification can help you to achieve your required design.

Library: https://github.com/saurabharora90/MaterialArcMenu

How to implement:

In your build gradle add:

dependencies {
compile 'com.sa90.materialarcmenu:library:1.1.1'

and include the com.sa90.materialarcmenu.ArcMenu as a viewgroup (with the sub-menu's as child) in your layout. Example:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_email"
    android:layout_height="wrap_content" />

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_alert"
    android:layout_height="wrap_content" />

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_info"
    android:layout_height="wrap_content" />

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_map"
    android:layout_height="wrap_content" />

The sub-menu's (child) can be anything. Here is an ImageButton example:

<ImageButton
    android:id="@+id/ib1"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_email"
    android:layout_height="wrap_content" />

<ImageButton
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_alert"
    android:layout_height="wrap_content" />

<ImageButton
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_info"
    android:layout_height="wrap_content" />

<ImageButton
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_map"
    android:layout_height="wrap_content" />

<ImageButton
    android:layout_width="wrap_content"
    android:src="@drawable/ic_dialog_dialer"
    android:layout_height="wrap_content" />

Upvotes: 1

Related Questions