Skip to content

Instantly share code, notes, and snippets.

@AkshatAgrawal05
Last active August 25, 2017 09:58
Show Gist options
  • Save AkshatAgrawal05/a334ca0522c7362c66d474872e204d2e to your computer and use it in GitHub Desktop.
Save AkshatAgrawal05/a334ca0522c7362c66d474872e204d2e to your computer and use it in GitHub Desktop.
Code Snippet to create Google Space like navigation tab in Android
public final class FabTabBackgroundView extends View {
Paint paint;
Path path;
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FabTabBackgroundView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
public FabTabBackgroundView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public FabTabBackgroundView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public FabTabBackgroundView(Context context) {
super(context);
init();
}
void init() {
paint = new Paint();
Resources localResources = getContext().getResources();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setAntiAlias(true);
paint.setColor(localResources.getColor(R.color.tab));
paint.setAlpha(244);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Resources localResources = getContext().getResources();
int width = View.MeasureSpec.getSize(widthMeasureSpec);
int offset = localResources.getDimensionPixelOffset(R.dimen.offset);
int size = localResources.getDimensionPixelSize(R.dimen.size);
int j = size + 2 * offset;
int k = (int) (0.7D * j);
int m = width / 2 - size;
int n = width - m;
int i1 = j - k;
path = new Path();
path.reset();
path.moveTo(0.0F, i1);
path.lineTo(m, i1);
//System.out.println("width-->" + width + "offset--->" + offset + "size-->" + size + "j-->" + j + "k-->" + k + "m--->" + m + "n-->" + n + "il--->" + i1);
//System.out.println();
path.cubicTo(m + size / 2, i1, (width - size) / 2, 0.0F, width / 2, 0.0F);
path.cubicTo((width + size) / 2, 0.0F, n - size / 2, i1, n, i1);
path.lineTo(width, i1);
path.lineTo(width, j);
path.lineTo(0.0F, j);
path.close(); /*the anchors you want, the curve will tend to reach these anchor points; look at the wikipedia article to understand more */
this.setMeasuredDimension(width, j);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint);
}
@Override
protected boolean awakenScrollBars() {
return super.awakenScrollBars();
}
@Override
protected boolean awakenScrollBars(int startDelay) {
return super.awakenScrollBars(startDelay);
}
@Override
protected boolean awakenScrollBars(int startDelay, boolean invalidate) {
return super.awakenScrollBars(startDelay, invalidate);
}
@Override
protected boolean dispatchGenericFocusedEvent(MotionEvent event) {
return super.dispatchGenericFocusedEvent(event);
}
@Override
protected boolean dispatchGenericPointerEvent(MotionEvent event) {
return super.dispatchGenericPointerEvent(event);
}
@Override
protected boolean dispatchHoverEvent(MotionEvent event) {
return super.dispatchHoverEvent(event);
}
}
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"
app:layout_behavior="solutions.epictech.www.epicresearchapp.controller.FloatingActionButtonBehavior">
<FabTabBackgroundView
android:id="@+id/fabTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="10dp"
android:clickable="true"
android:src="@drawable/ic_card_giftcard_white_24dp"
app:borderWidth="0.0dip"
app:fabSize="normal" />
<RadioGroup
android:id="@+id/navGroup"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="bottom"
android:orientation="horizontal">
<RadioButton
android:id="@+id/homeTab"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:button="@null"
android:drawableLeft="@drawable/home_icon"
android:gravity="center_horizontal|center_vertical"
android:paddingLeft="@dimen/leftnav_tab_padding_left"
android:paddingRight="@dimen/leftnav_tab_padding_left"
android:text="HOME"
android:textAlignment="gravity"
android:textColor="@color/radio_btn"
android:textSize="13dp"
android:typeface="sans" />
<RadioButton
android:id="@+id/serviceTab"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginLeft="100dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:button="@null"
android:drawableLeft="@drawable/service_icon"
android:gravity="center_horizontal|center_vertical"
android:paddingLeft="@dimen/rightnav_tab_padding_left"
android:paddingRight="@dimen/rightnav_tab_padding_left"
android:text="SERVICES"
android:textAlignment="gravity"
android:textColor="@color/radio_btn"
android:textSize="13dp"
android:typeface="sans" />
</RadioGroup>
</FrameLayout>
@rvndbalaji
Copy link

Thankyou so much for this!!! I've been trying for this for months, and thanks to you, I can finally implement it! :D 👍 💯

@AkshatAgrawal05
Copy link
Author

Welcome :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment