tab as like fileexploler

Question

How can i put tab as like this at above..

i want this type of tab when i click item it show on above,can anyone give snippet or links.. and please tell brief if available how can i do this.. as show in figure the red rectangle is there any android tools for that or library.... or directly i can do by code??

Thanks in advance

Rectangle describe what i want

belove is image

..

Answer 1

I have made a simple project for you. You should make it more beautiful as I wasn't focusing on that, just on the code.

First add these values to your color.xml

<resources>
    <color name="buttonGrey">#7A7A7A</color>
    <color name="layoutHolderStartColor">#F7F7F7</color>
    <color name="layoutHolderEndColor">#E1E1E1</color>
</resources>

Next create some background for the button holder and name it gradient_button_holder.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
        android:startColor="@color/layoutHolderStartColor" 
        android:endColor="@color/layoutHolderEndColor"
        android:angle="270"
     />
    <corners android:radius="3dp" />
</shape>

Now create activity_main.xml

Note: I am using some images, download the whole project at the bottom and get them out

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <RelativeLayout
        android:id="@+id/pathHolder"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/gradient_button_holder"
        android:gravity="center_vertical">

        <Button
            android:id="@+id/btnAdd"
            android:layout_width="29dp"
            android:layout_height="29dp"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="3dp"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:layout_marginTop="3dp"
            android:background="@color/buttonGrey"
            android:gravity="center"
            android:onClick="onBtnAdd"
            android:text="+"
            android:textSize="15sp"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/seperator"
            android:visibility="gone"/>

        <HorizontalScrollView
            android:id="@+id/btnScrollView"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@id/btnAdd">

            <LinearLayout
                android:id="@+id/btnFolderHolder"
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:orientation="horizontal">
            </LinearLayout>
        </HorizontalScrollView>
    </RelativeLayout>
</RelativeLayout>

Next create the Utils class

import android.annotation.SuppressLint;
import android.os.Build;
import android.view.View;

import java.util.concurrent.atomic.AtomicInteger;


public class Utils {

    private static final AtomicInteger sNextGeneratedId = new AtomicInteger(1);

    /**
     * Generate a value suitable for use in setId(int}.
     * This value will not collide with ID values generated at build time by aapt for R.id.
     *
     * @return a generated ID value
     */
    private static int generateViewId() {
        for (; ; ) {
            final int result = sNextGeneratedId.get();
            // aapt-generated IDs have the high byte nonzero; clamp to the range under that.
            int newValue = result + 1;
            if (newValue > 0x00FFFFFF) {
                newValue = 1; // Roll over to 1, not 0.
            }
            if (sNextGeneratedId.compareAndSet(result, newValue)) {
                return result;
            }
        }
    }

    @SuppressLint("NewApi")
    public static int generateId() {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) {

            return generateViewId();
        }
        else {

            return View.generateViewId();
        }
    }

}

And finally the MainActivity

import android.graphics.Color;
import android.os.Environment;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

import java.io.File;


public class MainActivity extends ActionBarActivity {

    private LinearLayout btnHolder;
    private HorizontalScrollView scroller; //parent folders
    private ViewTreeObserver observer; //needed for the scroll to the end
    private Toast toast;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        makeButtons(Environment.getExternalStorageDirectory().getPath(), "Folder1", "Folder2", "Folder3");
    }


    private void makeButtons(String... values) {
        StringBuilder sb = new StringBuilder(values.length * 2);
        for (int i = 0; i < values.length - 1; ++i) {
            sb.append(values[i]);
            sb.append(File.separator);
            addButton(values[i], sb.toString(), true);
        }
        sb.append(values[values.length - 1]);
        addButton(values[values.length - 1], sb.toString(), false);
    }


    private void init() {
        setWidgetConnections();
        observer = scroller.getViewTreeObserver();
        observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

            public void onGlobalLayout() {
                // this will always scroll to the last folder (displayed on the
                // right)
                scroller.fullScroll(HorizontalScrollView.FOCUS_RIGHT);
            }
        });
    }

    private void setWidgetConnections() {
        btnHolder = (LinearLayout) findViewById(R.id.btnFolderHolder);
        scroller = (HorizontalScrollView) findViewById(R.id.btnScrollView);
    }

    public void onBtnAdd(View v) {

    }

    private void addButton(final String text, final String path, boolean withImage) {
        // Dynamic call to add buttons
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        Button btn = new Button(this);
        btn.setId(Utils.generateId());
        btn.setText(text);
        btn.setTextColor(Color.BLACK);
        btn.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 12);
        btn.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                goToPath(path);
            }
        });

        //btn.setBackgroundResource(R.drawable.gradient_button_holder);
        btnHolder.addView(btn, params);
        if (withImage) {
            ImageView view = new ImageView(this);
            view.setBackgroundResource(R.drawable.seperator2);
            btnHolder.addView(view, params);
        }



    }

    private void goToPath(String path) {
        showToast(path);
    }

    private void showToast(String text) {
        if (toast != null) {
            toast.cancel();
        }

        toast = Toast.makeText(this, text, Toast.LENGTH_SHORT);
        toast.show();
    }


}

This is the final result and also note that it is horizontally scrollable

You can download the whole project here