Widget Recent Post No.

header ads

How to Build Modern E-commerce App UI Design in Android Studio


Step 1 : Main.xml 


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

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

    xmlns:app="http://schemas.android.com/apk/res-auto"

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/white"

    tools:context=".MainActivity">



    <androidx.core.widget.NestedScrollView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:scrollbars="none">



        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:clipToPadding="false"

            android:orientation="vertical"

            android:paddingBottom="60dp">



            <include layout="@layout/toolbar" />



            <ImageView

                android:layout_width="match_parent"

                android:layout_height="163dp"

                android:layout_margin="11.7dp"

                android:scaleType="centerCrop"

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



            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginLeft="11.7dp"

                android:layout_marginTop="11.6dp"

                android:layout_marginRight="11.7dp"

                android:orientation="horizontal">


                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="Latest Style Women"

                    android:textColor="@color/txt_color"

                    android:textSize="16.7sp" />



                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="View all"

                    android:textColor="@color/sky_blue"

                    android:textSize="13.3sp" />

            </LinearLayout>



            <androidx.recyclerview.widget.RecyclerView

                android:id="@+id/recommanded_recyclerview"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:clipToPadding="false"

                android:nestedScrollingEnabled="false"

                android:paddingLeft="16.7dp"

                android:paddingTop="13.3dp" />



            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginLeft="11.7dp"

                android:layout_marginTop="23.3dp"

                android:layout_marginRight="11.7dp"

                android:orientation="horizontal">


                <TextView

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="Latest Style Men"

                    android:textColor="@color/txt_color"

                    android:textSize="16.7sp" />



                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="View all"

                    android:textColor="@color/sky_blue"

                    android:textSize="13.3sp" />

            </LinearLayout>



            <androidx.recyclerview.widget.RecyclerView

                android:id="@+id/top50_books_recyclerview"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:clipToPadding="false"

                android:nestedScrollingEnabled="false"

                android:paddingLeft="16.7dp"

                android:paddingTop="13.3dp" />


        </LinearLayout>


    </androidx.core.widget.NestedScrollView>



    <com.roughike.bottombar.BottomBar

        android:id="@+id/bottombar"

        android:layout_width="match_parent"

        android:layout_height="52.6dp"

        android:layout_alignParentBottom="true"

        android:layout_gravity="bottom"

        android:layout_marginTop="15dp"

        android:background="#fff"

        android:elevation="8dp"

        android:gravity="bottom|end"

        app:bb_activeTabColor="#ffffff"

        app:bb_badgesHideWhenActive="true"

        app:bb_inActiveTabColor="#a4ebfe"

        app:bb_showShadow="true"

        app:bb_tabXmlResource="@xml/bottombar_tabs"

        app:bb_titleTextAppearance="@style/botoombar_textchange"

        app:paddingStart="10dp" />


</RelativeLayout>


Step 2 item_recommanded_list.xml

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


<LinearLayout

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

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:orientation="vertical">



    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginRight="16.7dp"

        android:orientation="vertical">


        <ImageView

            android:id="@+id/image"

            android:layout_width="97.8dp"

            android:layout_height="146dp"

            android:scaleType="centerCrop"

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


        <TextView

            android:id="@+id/title"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textColor="@color/txt_color"

            android:textSize="13.3sp"

            android:text="Ribbed Off Shoulder\nMidi Slinky Dress - Purple L"

            android:layout_marginTop="5dp"/>



        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="3dp"

            android:orientation="horizontal">


            <ImageView

                android:layout_width="13dp"

                android:layout_height="12.4dp"

                android:layout_gravity="center"

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


            <TextView

                android:id="@+id/rating"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="4.5"

                android:textSize="11.7sp"

                android:layout_marginLeft="5dp"

                android:textColor="@color/txt_color"/>

        </LinearLayout>



        <TextView

            android:id="@+id/author_name"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Learncode with rk"

            android:textSize="11.7sp"

            android:layout_marginTop="3dp"

            android:textColor="#a0a7b0"/>

    </LinearLayout>


</LinearLayout>



Step 3 Toolbar.xml



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


<androidx.appcompat.widget.Toolbar

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

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="@color/orange">





    <TextView

        android:id="@+id/title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textColor="@color/black"

        android:textSize="25sp"

        android:text="LearnCode With RK"/>



    <ImageView

        android:id="@+id/search_img"

        android:visibility="gone"

        android:layout_width="19.3dp"

        android:layout_height="19.3dp"

        android:src="@drawable/ic_search"

        android:layout_gravity="right"

        android:layout_marginRight="15dp"/>


</androidx.appcompat.widget.Toolbar>



Github :https://github.com/LearncodeWithRk/E-commerce

 

Post a Comment

0 Comments