Implementing iOS ActionSheet in Android

One of our clients came up with an idea to develop an Android application resembling their iOS application available in Apple AppStore. Our challenge was to do a replica of the iOS app in every way possible. We went ahead with the challenges and replicating all the UIs and behavior as nearly possible as Android would allow us. There were a few things which we couldn’t do such as the iOS ActionSheet, but the client was not ready to take a “No” for an answer. So we implemented the action sheet and that is what we are going to see in this tutorial today.

Lets create a new project named, ActionSheetDemo in Motodev Studio. In the main layout of our project, just put a button. Set the onClick attribute of this button and point it to this function (showActionSheet):

public void showActionSheet(View v) {

final Dialog myDialog = new Dialog(ActionSheetDemoActivity.this, R.style.CustomTheme);

myDialog.setContentView(R.layout.actionsheet);

TextView tvNewButton = (TextView) myDialog.findViewById(R.id.tvButtonExample);

tvNewButton.setOnClickListener(new OnClickListener() {

 @Override

publicvoid onClick(View v) {

myDialog.dismiss();

Toast.makeText(getApplicationContext(), “Example message”, Toast.LENGTH_LONG).show();

}

});

TextView tvCancel = (TextView) myDialog.findViewById(R.id.tvCancel);

tvCancel.setOnClickListener(new OnClickListener() {

@Override

publicvoid onClick(View v) {

myDialog.dismiss();

}

});

myDialog.getWindow().getAttributes().windowAnimations = R.anim.slide_up;

myDialog.show();

myDialog.getWindow().setGravity(Gravity.BOTTOM);

}

As you can see that is a Dialog we are using and modifying its UI a little bit to look like an iOS ActionSheet. We are creating the dialog with a style named “CustomTheme” to get transparency to our dialog. CustomTheme looks like this in styles.xml:

<stylename=“CustomTheme”parent=“android:Theme”>

<item name=“android:windowIsTranslucent”>true</item>

<item name=“android:windowBackground”>@color/transparent</item>

<item name=“android:windowContentOverlay”>@null</item>

<item name=“android:windowNoTitle”>true</item>

<item name=“android:windowIsFloating”>true</item>

<item name=“android:backgroundDimEnabled”>false</item>

</style>

The color “transparent” has been initialized with a value of “#29000000”. Then, we are setting the “actionsheet” layout to be inflated for the dialog. The layout’s contents are:

<RelativeLayoutxmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_gravity=“bottom” >

<RelativeLayout

android:id=“@+id/rlActionSheet”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_alignParentBottom=“true”

android:background=“#000000” >

<TextView

android:id=“@+id/tvActionSheetTitle”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:layout_margin=“5dp”

android:gravity=“center_horizontal”

android:text=“@string/action_sheet_default”

android:textColor=“#ffffff”

android:textSize=“12sp” />

<TextView

android:id=“@+id/tvButtonExample”

android:layout_width=“fill_parent”

android:layout_height=“35dp”

android:layout_below=“@+id/tvActionSheetTitle”

android:layout_margin=“5dp”

android:background=“@drawable/desc_rounded_no_padding”

android:gravity=“center”

android:text=“@string/example_button”

android:textColor=“#000000”

android:textSize=“15sp” />

<TextView

android:id=“@+id/tvCancel”

android:layout_width=“fill_parent”

android:layout_height=“35dp”

android:layout_below=“@+id/tvButtonExample”

android:layout_marginLeft=“5dp”

android:layout_marginRight=“5dp”

android:layout_marginTop=“10dp”

android:background=“@drawable/desc_rounded_no_padding_black”

android:gravity=“center”

android:text=“@string/cancel”

android:textColor=“#ffffff”

android:textSize=“15sp” />

<View

android:layout_width=“fill_parent”

android:layout_height=“10dp”

android:layout_below=“@+id/tvCancel”/>

</RelativeLayout>

</RelativeLayout>

The action sheet as implemented can be seen like this:

 The left image shows the design view of the layout while the right image shows the actual action sheet seen in the emulator. The buttons “Example Button” & “Cancel” have been given a background to resemble like iOS buttons. We’ve defined two background drawables which designs a shape around our buttons. The background “desc_rounded_no_padding.xml” looks like:

<shapexmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:shape=“rectangle”>

<solid android:color=“#ffffffff” />

<corners android:topLeftRadius=“8dp”

android:topRightRadius=“8dp”

android:bottomLeftRadius=“8dp”

android:bottomRightRadius=“8dp” />

<stroke

android:width=“1dp”

android:color=“#A4A4A4” />

</shape>

We’ve also used an animation object in our layout called as slide_up.xml that we are using in this statement without the quotes:

 myDialog.getWindow().getAttributes().windowAnimations = R.anim.slide_up;”

The slide_up.xml contains code:

<setxmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:interpolator=“@android:anim/accelerate_decelerate_interpolator” >

<translate

android:duration=“5000”

android:fromYDelta=“100%”

android:fillAfter=“true”

android:toXDelta=“0” />

<alpha

android:duration=“5000”

android:fromAlpha=“0.0”

android:startOffset=“500”

android:toAlpha=“1.0” />

</set>

That’s it for now, folks. Happy Coding!

Advertisements
By Movivation Labs