Expanding Menu View in Android

If you want to make a shopping Android app then a great library is for you which name as Expanding Menu View Library. This gives you a great look in your simple android application.
This is a library to help creating expanding views with animation in Android.



Download Source Code

Adding the Library to gradle file

dependencies {
    compile 'com.diegodobelo.expandingview:expanding-view:0.9.3'
}

Demo


Using the Library

Layouts

First of all include the ExpandingList in your Activity (or Fragment) layout. This will be the list of items (ExpandItem):
<com.diegodobelo.expandingview.ExpandingList
        android:id="@+id/expanding_list_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
Now create a new layout (xml) file to represent the item (such as res/layout/expanding_item.xml). This will be the Item (header) that can be expanded to show sub items:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="94dp">
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center_vertical|left"
        android:textSize="22sp"/>
</RelativeLayout>
Create another layout file to represent the sub items (such as /res/expanding_sub_item.xml). This will be the sub items that will be shown when the Item is expanded:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="48dp">
    <TextView
        android:id="@+id/sub_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:textSize="18sp"
        android:gravity="center_vertical|left"/>
</RelativeLayout>
Now create a layout file (such as /res/expanding_layout.xml) to represent the whole item, including both item layout and sub item layout. We will explain each custom attribute later:
<com.diegodobelo.expandingview.ExpandingItem
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:item_layout="@layout/expanding_item"
    app:sub_item_layout="@layout/expanding_sub_item"
    app:indicator_size="42dp"
    app:indicator_margin_left="16dp"
    app:indicator_margin_right="16dp"
    app:show_indicator="true"
    app:show_animation="true"
    app:start_collapsed="true"
    app:animation_duration="250"/>
Note that we included expanding_item and expanding_sub_item layouts created before.

Java code

Now that you have all the required layouts you are able to use them in Java code. Let's start inflating the ExpandingList:
ExpandingList expandingList = (ExpandingList) findViewById(R.id.expanding_list_main);
Create a new ExpandingItem in the ExpandingList. This method receives the expanding_layout created before. Yes! We can have different layouts for different items in the same list. The items will be created based on expanding_item layout and the sub items will be created based on expanding_sub_item layout:
ExpandingItem item = expandingList.createNewItem(R.layout.expanding_layout);

/*ExpandingItem extends from View, so you can call
findViewById to get any View inside the layout*/
(TextView) item.findViewById(R.id.title)).setText("It Works!!");
Let's create the sub items. There is a method to create items in batch:
//This will create 5 items
item.createSubItems(5);

//get a sub item View
View subItemZero = item.getSubItemView(0);
((TextView) subItemZero.findViewById(R.id.sub_title)).setText("Cool");

View subItemOne = item.getSubItemView(1);
((TextView) subItemOne.findViewById(R.id.sub_title)).setText("Awesome");

...
For each item you can set the indicator color and the indicator icon:
item.setIndicatorColorRes(R.color.blue);
item.setIndicatorIconRes(R.drawable.ic_icon);

ExpandingItem layout attributes

Attribute NameTypeDefault ValueMeaningMandatory
item_layoutreferenceThe layout for the Item (header).Yes
sub_item_layoutreferenceThe layout for the sub items.Yes
separator_layoutreferenceA layout to separate items.No
indicator_sizedimension0dpThe indicator size in dp.No
indicator_margin_leftdimension0dpThe margin between the indicator and its left.No
indicator_margin_rightdimension0dpThe margin between the indicator and its right.No
show_indicatorbooleantruetrue if you want to show the indicator. false otherwise.No
show_animationbooleantruetrue if you want to show animations. false otherwise.No
start_collapsedbooleantruetrue if you want the sub views to start collapsed. false otherwise.No
animation_durationinteger300msThe animations duration in milliseconds.No

ExpandingList public methods

public void createNewItem(int layoutId)

Method to create and add a new item.
  • Parameters: layoutId — The item Layout

public void removeItem(ExpandingItem item)

Method to remove an item.
  • Parameters: item — The item to be removed, of type {@link ExpandingItem}

public void removeAllViews()

Method to remove all items.

ExpandingItem public methods

public void setStateChangedListener(OnItemStateChanged listener)

Set a listener to listen item stage changed.
  • Parameters: listener — The listener of type {@link OnItemStateChanged}

public boolean isExpanded()

Tells if the item is expanded.
  • Returns: true if expanded. false otherwise.

public int getSubItemsCount()

Returns the count of sub items.
  • Returns: The count of sub items.

public void collapse()

Collapses the sub items.

public void toggleExpanded()

Expand or collapse the sub items.

public void setIndicatorColorRes(int colorRes)

Set the indicator color by resource.
  • Parameters: colorRes — The color resource.

public void setIndicatorColor(int color)

Set the indicator color by color value.
  • Parameters: color — The color value.

public void setIndicatorIconRes(int iconRes)

Set the indicator icon by resource.
  • Parameters: iconRes — The icon resource.

public void setIndicatorIcon(Drawable icon)

Set the indicator icon.
  • Parameters: icon — Drawable of the indicator icon.

@Nullable public View createSubItem()

Creates a sub item based on sub_item_layout Layout, set as ExpandingItem layout attribute.
  • Returns: The inflated sub item view.

@Nullable public View createSubItem(int position)

Creates a sub item based on sub_item_layout Layout, set as ExpandingItem layout attribute. If position is -1, the item will be added in the end of the list.
  • Parameters: position — The position to add the new Item. Position should not be greater than the list size.
  • Returns: The inflated sub item view.

public void createSubItems(int count)

Creates as many sub items as requested in {@param count}.
  • Parameters: count — The quantity of sub items.

public View getSubItemView(int position)

Get a sub item at the given position.
  • Parameters: position — The sub item position. Should be > 0.
  • Returns: The sub item inflated view at the given position.

public void removeSubItemAt(int position)

Remove sub item at the given position.
  • Parameters: position — The position of the item to be removed.

public void removeSubItemFromList(View view)

Remove the given view representing the sub item. Should be an existing sub item.
  • Parameters: view — The sub item to be removed.

public void removeSubItem(View view)

Remove the given view representing the sub item, with animation. Should be an existing sub item.
  • Parameters: view — The sub item to be removed.

public void removeAllSubItems()

Remove all sub items.

How to Add PanoramaImageView in Android

Today i am going to tell you a new Custom view which can blow your mind. This is using Gyroscope sensor.
An imageView can auto scroll with device rotating.

ScreenShots


horizontal sample


vertical sample
recyclerview sample

Include PanoramaImageView to Your Project

With gradle:

dependencies {
   compile 'com.gjiazhe:PanoramaImageView:1.0'
}

Use PanoramaImageView in Layout File Just Like ImageView

<com.gjiazhe.panoramaimageview.PanoramaImageView
    android:id="@+id/panorama_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/img"
    app:piv_enablePanoramaMode="true"
    app:piv_show_scrollbar="true"
    app:piv_invertScrollDirection="false" />

Description of Attributes

AttributesFormatDefaultDescription
piv_enablePanoramaModebooleantrueEnable panorama effect or not.
piv_show_scrollbarbooleantrueShow scrollbar or not.
piv_invertScrollDirectionbooleanfalseInvert the scroll direction or not
You can also check : Add Boom Menu For Android

All the attributes can also be set in java code:
panoramaImageView.setEnablePanoramaMode(true);
panoramaImageView.setEnableScrollbar(true);
panoramaImageView.setInvertScrollDirection(false);

Register the GyroscopeObserver

In Activity or Fragment using PanoramaImageView, you should register the GyroscopeObserver in onResume() and remember to unregister it in onPause().
public class MyActivity extends AppCompatActivity {

    private GyroscopeObserver gyroscopeObserver;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Initialize GyroscopeObserver.
        gyroscopeObserver = new GyroscopeObserver();
        // Set the maximum radian the device should rotate to show image's bounds.
        // It should be set between 0 and π/2.
        // The default value is π/9.
        gyroscopeObserver.setMaxRotateRadian(Math.PI/9);

        PanoramaImageView panoramaImageView = (PanoramaImageView) findViewById(R.id.panorama_image_view);
        // Set GyroscopeObserver for PanoramaImageView.
        panoramaImageView.setGyroscopeObserver(gyroscopeObserver);
    }

    @Override
    protected void onResume() {
        super.onResume();
        // Register GyroscopeObserver.
        gyroscopeObserver.register(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        // Unregister GyroscopeObserver.
        gyroscopeObserver.unregister();
    }
}

Set OnPanoramaScrollListener to observe scroll state

Check this : Add Android Fingerprint Authentication in Android

If you want to get callback when the image scrolls, set an OnPanoramaScrollListener for PanoramaImageView.
panoramaImageView.setOnPanoramaScrollListener(new PanoramaImageView.OnPanoramaScrollListener() {
    @Override
    public void onScrolled(PanoramaImageView view, float offsetProgress) {
        // Do something here.
        // The offsetProgress range from -1 to 1, indicating the image scrolls
        // from left(top) to right(bottom).
    }
});

[Resolved] Preselect and Value Stay Problem in Multiple Select in Materialize

Hello today i am here with two problem which occur with most of developer when they start with Google's Materialized theme. In my project i also used this awesome designing them but i stuck with problems in Multiple select option. And now let us look with problem and their solution.


Problem 1 :

MaterializeCSS - Multiple Select - value stays in array after unselecting

When I unselect value in multiple selection in MaterializeCSS, it's still in the value array and I can't find a way to repair it. It works if I unselect option from original select with some function but

 

(please ignore the error on the screenshot, it's not related)
As you can see in screenshot firstly i selected Option 2 and Option 4 and got value in console is:
["test2", "test4"]
But when i unselect Option 2 then value of that is remain as you can show in console of second image.

Solution :

I had the same problem and wrote a small workaround. 
$(document).ready(function () {
    $('select').material_select();
    $('select').change(function(){
        var newValuesArr = [],
            select = $(this),
            ul = select.prev();
        ul.children('li').toArray().forEach(function (li, i) {
            if ($(li).hasClass('active')) {
                newValuesArr.push(select.children('option').toArray()[i].value);
            }
        });
        select.val(newValuesArr);
    });
});
You can also see demo here

Problem 2 :

Dynamically select Materialized multiple select

After the resolving first problem i stuck again when i need to select some data automatically from database. But it doesn't have any solution for this. Then i send this issue to MaterializeCSS forum and they update their JS and gave me updated JS. So now if you want to do this then you need to follow below step:
This is multiple dropdown of Materialize
<div class="input-field col s12">
    <select multiple>
        <option value="" disabled selected>Choose your option</option>
        <option value="1" selected>Option 1</option>
        <option value="2">Option 2</option>
        <option value="3" selected>Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
</div>
And you change little change in your Javascript section :
<script src="http://materializecss.com/bin/materialize.js" />
$(document).ready(function () {
        $('select').material_select();
    });
You can also see demo here

Boom Menu For Android - New Era of Android Menu UI

Are you bored to see typical plain menu in android app then a great news for Android developer which is about a new era of Android UI for menu purpose which can boom your mind by this.

 


This concept came from floating button of Android and now firstly just look at this.
See this : Android Floating Action Button Example

Tired of these menu buttons?



Why not try these:

Circle Ham


List Share




Yes, this library is about a menu which can ... BOOM! It is cool isn't it.

Download

Documentation Chapters

Basic Usage

How to use BMB in just several lines of code?

Simple Circle Button

Add simple circle buttons with just an image for each to BMB.

Text Inside Circle Button

Add text inside circle buttons with a text and image inside for each to BMB.

Text Outside Circle Button

Add text outside circle buttons with a text and image outside for each to BMB.

Ham Button

Add ham buttons with with a title, subtitle and image inside for each to BMB.

Share Style

Make a share-style BMB.

Button Place Alignments

Place all the buttons to anywhere on screen.
    

Different Ways to Boom

Different animations when the buttons boom or re-boom.
  

Ease Animations for Buttons

Use different and cute ease-animations for buttons.
Different Order for Buttons
Different order enum for boom-buttons.

Other Animations Attributes for Buttons

Delay, duration, rotate-degrees, frames...

Click Event and Listener

Listener for clicking each button or animation-states.

Control BMB

Boom or re-boom BMB programmatically.

Use BMB in Action Bar

How to put BMB in action bar?

Use BMB in List

Matters need attention when you need a BMB in list-view or recycler-view.

Use BMB in Fragment

Example for use BMB in fragment.

Attributes for BMB or Pieces on BMB

How to change the size or margins of dots on BMB?

Cache Optimization & Boom Area

What if I want BMB to boom in just its parent-view?

Version History

What's more for every version?

Structure for BMB

Structure for BMB when I designed it, for sharing and communicating.

Android Floating Action Button Example

In my previous article i am showing Android Floating label example and FAB loading bar which are come from Google Material design. And today we'll discuss about yet another implementation of Floating Action Button for Android with lots of features.


Android Floating Action Button based on Material Design specification

Requirements

The library requires Android API Level 14+.

Download

Features

  • Ripple effect on Android Lollipop devices
  • Option to set custom normal/pressed/ripple colors
  • Option to set custom shadow color and offsets
  • Option to disable shadow for buttons and (or) labels
  • Option to set custom animations
  • Option to set custom icon drawable
  • Support for normal 56dp and mini 40dp button sizes
  • Custom FloatingActionMenu icon animations
  • Option to expand menu up and down
  • Option to show labels to the left and to the right of the menu
  • Option to show circle progress on FloactinActionButton
  • Option to add button to the FloatingActionMenu programmatically
  • Option to dim the FloatinActionMenu's background
  • Option to remove all buttons from the FloatingActionMenu
  • Option to set a label for the FloatingActionMenu's button

Demo

Usage

Add a dependency to your build.gradle:
dependencies {
    compile 'com.github.clans:fab:1.6.4'
}

See this(Not for beginner)Boom Menu For Android Example - New Era of Android UI

Add the com.github.clans.fab.FloatingActionButton to your layout XML file.
<FrameLayout 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">

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

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/ic_menu"
        fab:fab_colorNormal="@color/app_primary"
        fab:fab_colorPressed="@color/app_primary_pressed"
        fab:fab_colorRipple="@color/app_ripple"/>

</FrameLayout>
You can set an icon for the FloatingActionButton using android:src xml attribute. Use drawables of size 24dp as specified by guidlines. Icons of desired size can be generated with Android Asset Studio.


FloatingActionButton

Here are all the FloatingActionButton's xml attributes with their default values which means that you don't have to set all of them:
<com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/your_icon_drawable"
        app:fab_colorNormal="#DA4336"
        app:fab_colorPressed="#E75043"
        app:fab_colorRipple="#99FFFFFF"
        app:fab_showShadow="true"
        app:fab_shadowColor="#66000000"
        app:fab_shadowRadius="4dp"
        app:fab_shadowXOffset="1dp"
        app:fab_shadowYOffset="3dp"
        app:fab_size="normal"
        app:fab_showAnimation="@anim/fab_scale_up"
        app:fab_hideAnimation="@anim/fab_scale_down"
        app:fab_label=""
        app:fab_progress_color="#FF009688"
        app:fab_progress_backgroundColor="#4D000000"
        app:fab_progress_indeterminate="false"
        app:fab_progress_max="100"
        app:fab_progress="0"
        app:fab_progress_showBackground="true"/>
All of these FloatingActionButton's attributes has their corresponding getters and setters. So you can set them programmatically.

Floating action menu

Here are all the FloatingActionMenu's xml attributes with their default values which means that you don't have to set all of them:
<com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        fab:menu_fab_size="normal"
        fab:menu_showShadow="true"
        fab:menu_shadowColor="#66000000"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="3dp"
        fab:menu_colorNormal="#DA4336"
        fab:menu_colorPressed="#E75043"
        fab:menu_colorRipple="#99FFFFFF"
        fab:menu_animationDelayPerItem="50"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_buttonSpacing="0dp"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_paddingTop="4dp"
        fab:menu_labels_paddingRight="8dp"
        fab:menu_labels_paddingBottom="4dp"
        fab:menu_labels_paddingLeft="8dp"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_textSize="14sp"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_style="@style/YourCustomLabelsStyle"
        fab:menu_labels_position="left"
        fab:menu_openDirection="up"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="your_label_here"
        fab:menu_fab_show_animation="@anim/my_show_animation"
        fab:menu_fab_hide_animation="@anim/my_hide_animation">

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

    </com.github.clans.fab.FloatingActionMenu>
If you're using custom style for labels - other labels attributes will be ignored.

Labels shadow preferences depends on their corresponding FloatingActionButtons' shadow preferences.