JAVAChat: Navigation Drawer & Fragment Example

Add in gradle
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'

Create Main Activity first:


public class TrackActivity extends AppCompatActivity {



    RippleView ripTrack;

    EditText edtOrderId;

    DrawerLayout drawerLayout;

    HomeFragment home;

    ImageView navigation_tool_bar_menu;

    FragmentManager fragmentManager;

    TextView txt_about,home_text;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

        setContentView(R.layout.track_layout);

        txt_about=(TextView)findViewById(R.id.txt_about);

        home_text=(TextView)findViewById(R.id.home_text);

        navigation_tool_bar_menu = (ImageView) findViewById(R.id.navigation_tool_bar_menu);

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer);

        navigation_tool_bar_menu.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                if (drawerLayout.isDrawerOpen(Gravity.LEFT))

                    drawerLayout.closeDrawer(Gravity.LEFT);

                else

                    drawerLayout.openDrawer(Gravity.LEFT);

            }

        });

        fragmentManager = getSupportFragmentManager();

       final AboutFragment about =new AboutFragment();

        home =new HomeFragment();

        pushFragment(home);




        txt_about.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                pushFragment(new AboutFragment());

                drawerLayout.closeDrawer(GravityCompat.START);

            }

        });

        home_text.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                pushFragment(new HomeFragment());

                drawerLayout.closeDrawer(GravityCompat.START);

            }

        });

    }

    public void pushFragment(Fragment fragment) {

        if (fragment != null) {

            FragmentTransaction transaction = fragmentManager.beginTransaction();

            transaction.replace(R.id.frame_container, fragment);

            transaction.commit();

        } else {

            // error in creating fragment

            Log.e("MainActivity", "Error in creating fragment");

        }

    }

}

Create track_layout:


<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">




    <android.support.v7.widget.Toolbar

        android:id="@+id/gh"

        android:layout_width="match_parent"

        android:layout_height="@dimen/_45sdp"

        android:fitsSystemWindows="true"

        android:background="@android:color/white">


        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            >

            <ImageView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:id="@+id/navigation_tool_bar_menu"

                android:src="@drawable/ic_menu_black_24dp" />


            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_centerInParent="true"

                android:text="@string/app_name"

                android:textStyle="bold"

                android:textColor="#ffa500"

                android:textSize="@dimen/_15sdp" />


        </RelativeLayout>




    </android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout xmlns:app="http:


     //schemas.android.com/apk/res-auto"




        xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/drawer"


        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_below="@+id/gh"

        android:fitsSystemWindows="true"

        tools:openDrawer="start">


        <FrameLayout

            android:id="@+id/frame_container"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_below="@+id/gh"

            android:background="@color/white">

        </FrameLayout>





        <android.support.design.widget.NavigationView

            android:id="@+id/nav_view"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_gravity="start"

            android:fitsSystemWindows="true">

            <LinearLayout

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:background="@color/white"

                android:orientation="vertical"

                android:weightSum="5">

                <RelativeLayout

                    android:layout_width="match_parent"

                    android:layout_height="0dp"

                    android:layout_weight="1"

                    android:background="@color/white">

                    <include

                        android:id="@+id/layout1"

                        layout="@layout/navigation_drawer_inflator_screen"

                        android:layout_width="match_parent"

                        android:layout_height="match_parent" />

                </RelativeLayout>

            </LinearLayout>

        </android.support.design.widget.NavigationView>


    </android.support.v4.widget.DrawerLayout>

</RelativeLayout>

Create navigation_drawer_inflator_screen layout:


<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">







    <RelativeLayout

        android:id="@+id/main_layout"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"




        android:background="@drawable/landing_screen_profile_bg">




        <RelativeLayout

            android:id="@+id/rel_text_welcome"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerHorizontal="true"

            android:layout_marginTop="@dimen/_10sdp">




            <TextView

                android:id="@+id/text_welcome"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="@string/welcome"

                android:textColor="@color/white"

                android:textSize="@dimen/_20sdp"

                android:visibility="gone"




                />

        </RelativeLayout>




        <RelativeLayout

            android:id="@+id/rel_layout_user_profile_image"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_below="@+id/rel_text_welcome"

            android:layout_centerHorizontal="true"

            android:layout_marginTop="@dimen/_15sdp"

            android:background="@drawable/navigation_activity_round_shape">




            <ImageView

                android:id="@+id/imgProfile"

                android:layout_width="@dimen/_80sdp"

                android:layout_height="@dimen/_80sdp"

                android:layout_centerInParent="true"

                />




        </RelativeLayout>




        <RelativeLayout

            android:id="@+id/rel_layout_name_location"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_below="@+id/rel_layout_user_profile_image">




            <TextView

                android:id="@+id/text_user_name"

                android:layout_width="wrap_content"




                android:layout_height="wrap_content"

                android:layout_centerHorizontal="true"

                android:layout_marginTop="@dimen/_10sdp"

                android:textColor="#646464"

                android:textSize="@dimen/_16sdp" />




            <TextView

                android:id="@+id/text_location"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_below="@+id/text_user_name"

                android:layout_centerHorizontal="true"

                android:drawableLeft="@drawable/ic_place_black_24dp"

                android:drawablePadding="@dimen/_5sdp"

                android:gravity="center"

                android:padding="@dimen/_5sdp"

                android:text="Fetching location..."

                android:textColor="#646464"

                android:textSize="@dimen/_10sdp" />

        </RelativeLayout>







        <RelativeLayout

            android:id="@+id/relShare"

            android:layout_width="@dimen/_150sdp"

            android:layout_height="@dimen/_40sdp"

            android:layout_below="@+id/rel_layout_name_location"




            android:layout_centerHorizontal="true"

            android:layout_marginTop="@dimen/_5sdp">




            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_centerHorizontal="true"

                android:drawableLeft="@drawable/share_ic"

                android:drawablePadding="@dimen/_5sdp"

                android:gravity="center"

                android:padding="@dimen/_5sdp"

                android:text="@string/share_this_app"

                android:textColor="#ffa500"

                android:textSize="@dimen/_12sdp" />




        </RelativeLayout>




        <View

            android:layout_width="match_parent"

            android:layout_height="0.5dp"

            android:layout_below="@+id/relShare"

            android:layout_marginTop="@dimen/_5sdp"

            android:background="#ffa500" />

    </RelativeLayout>




    <ScrollView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/main_layout"

        android:fadeScrollbars="false"

        android:scrollbarThumbVertical="@drawable/scroll_bar_background">




        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content">




            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:background="@color/white"

                android:orientation="vertical">







                <RelativeLayout

                    android:id="@+id/customer_home_fragment"

                    android:layout_width="match_parent"

                    android:layout_height="@dimen/_40sdp">







                    <TextView

                        android:id="@+id/home_text"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerInParent="true"

                        android:layout_marginLeft="@dimen/_10sdp"

                        android:layout_toRightOf="@+id/image_home"

                        android:text="@string/home"

                        android:textColor="#6d6e71"

                        android:textSize="@dimen/_11sdp" />




                    <ImageView

                        android:id="@+id/image_home"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerVertical="true"

                        android:layout_marginLeft="@dimen/_20sdp"

                        android:background="@drawable/home_sidebar_ic"




                        />




                </RelativeLayout>







                <RelativeLayout

                    android:id="@+id/about_fragment"

                    android:layout_width="match_parent"

                    android:layout_height="@dimen/_40sdp">




                    <View

                        android:layout_width="match_parent"

                        android:layout_height="@dimen/_1sdp"

                        android:background="#ffa500"

                        android:visibility="gone" />




                    <TextView

                        android:id="@+id/txt_about"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerInParent="true"

                        android:layout_marginLeft="@dimen/_10sdp"

                        android:layout_toRightOf="@+id/imgAbout"

                        android:text="About"

                        android:textColor="#6d6e71"

                        android:textSize="@dimen/_11sdp" />




                    <ImageView

                        android:id="@+id/imgAbout"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerVertical="true"

                        android:layout_marginLeft="@dimen/_20sdp"

                        android:background="@drawable/about_sidebar_f_ic" />




                </RelativeLayout>




                <RelativeLayout

                    android:id="@+id/help_fragment"

                    android:layout_width="match_parent"

                    android:layout_height="@dimen/_40sdp">




                    <View

                        android:layout_width="match_parent"

                        android:layout_height="@dimen/_1sdp"

                        android:background="#ffa500"

                        android:visibility="gone" />




                    <TextView

                        android:id="@+id/txtContactUs"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerInParent="true"

                        android:layout_marginLeft="@dimen/_10sdp"

                        android:layout_toRightOf="@+id/imgHelp"

                        android:text="@string/help"

                        android:textColor="#6d6e71"

                        android:textSize="@dimen/_11sdp" />




                    <ImageView

                        android:id="@+id/imgHelp"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerVertical="true"

                        android:layout_marginLeft="@dimen/_18sdp"

                        android:background="@drawable/help_sidebar_f_ic" />




                </RelativeLayout>




                <RelativeLayout

                    android:id="@+id/contactus_fragment"

                    android:layout_width="match_parent"

                    android:layout_height="@dimen/_40sdp">




                    <View

                        android:layout_width="match_parent"

                        android:layout_height="@dimen/_1sdp"

                        android:background="#ffa500"

                        android:visibility="gone" />




                    <TextView

                        android:id="@+id/txtContactus"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerInParent="true"

                        android:layout_marginLeft="@dimen/_10sdp"

                        android:layout_toRightOf="@+id/imgContactUs"

                        android:text="@string/contact_us"

                        android:textColor="#6d6e71"

                        android:textSize="@dimen/_11sdp" />




                    <ImageView

                        android:id="@+id/imgContactUs"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerVertical="true"

                        android:layout_marginLeft="@dimen/_18sdp"

                        android:background="@drawable/contact_sidebar_ic" />




                </RelativeLayout>







            </LinearLayout>




        </LinearLayout>

    </ScrollView>




    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_above="@+id/footer_layout">







        <View

            android:layout_width="match_parent"

            android:layout_height="0.5dp"

            android:background="#ffa500" />




    </RelativeLayout>







    <LinearLayout

        android:id="@+id/footer_layout"

        android:layout_width="match_parent"

        android:layout_height="@dimen/_40sdp"

        android:layout_alignParentBottom="true"

        android:background="@color/white"

        android:orientation="horizontal"

        android:weightSum="3">







    </LinearLayout>




</RelativeLayout>





Now create HomeFragment:






public class HomeFragment extends android.support.v4.app.Fragment {







    RippleView ripTrack;

    EditText edtOrderId;




    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

    }




    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,


       Bundle savedInstanceState) {




        View view = inflater.inflate(R.layout.fragment_home, container);







       ripTrack = (RippleView) view.findViewById(R.id.ripTrack);

        edtOrderId = (EditText) view.findViewById(R.id.edtTrackId);




        ripTrack.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {

            @Override

            public void onComplete(RippleView rippleView) {




                startActivity(new Intent(getActivity(), TrackingMap.class));

            }

        });




        return super.onCreateView(inflater, container, savedInstanceState);

    }







}




Create home_fragment layout:



<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical" android:layout_width="match_parent"

    android:layout_height="match_parent">

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_centerVertical="true"

        android:layout_marginLeft="@dimen/_40sdp"

        android:layout_marginRight="@dimen/_40sdp">




        <EditText

            android:id="@+id/edtTrackId"

            android:layout_height="@dimen/_40sdp"

            android:layout_width="match_parent"

            android:layout_marginTop="@dimen/_50sdp"

            android:hint="@string/order_number"

            android:background="@drawable/custom_shape"

            android:paddingLeft="@dimen/_15sdp"

            android:textSize="@dimen/_14sdp"

            android:inputType="number"

            android:layout_centerVertical="true"

            />




        <com.andexert.library.RippleView

            android:id="@+id/ripTrack"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_below="@id/edtTrackId"

            android:background="#ffa500"

            android:layout_marginTop="@dimen/_25sdp">




            <Button

                android:layout_width="match_parent"

                android:layout_height="@dimen/_40sdp"

                android:text="@string/track"

                android:textColor="@android:color/white"

                android:background="#ffa500"

                />

        </com.andexert.library.RippleView>

    </RelativeLayout>




</RelativeLayout>

JAVAChat

Friday, 5 August 2016

Navigation Drawer & Fragment Example

No comments:

Post a Comment

Pages - Menu

Blogroll