Widget Recent Post No.

header ads

Android UI Design | Modern Learning App UI Design | UiUX


 Step 1 LEARNING APP.XML

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

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

    android:orientation="vertical"

    android:background="@color/white"

    android:layout_marginTop="58dp"

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



<LinearLayout

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">




    <FrameLayout

        android:id="@+id/affiliate"

        android:layout_width="match_parent"

        android:layout_height="200dp"

        android:orientation="vertical"

        android:background="@drawable/affiliate">



    </FrameLayout>



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"


        android:layout_marginStart="22dp"

        android:layout_marginEnd="22dp"

        android:layout_marginTop="32dp"

        >



        <TextView

            android:id="@+id/tv_name"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:fontFamily="sans-serif-black"

            android:layout_gravity="center"

            android:layout_marginStart="2dp"


            android:textSize="20dp"

            android:text="Join Diploma Courses"

            android:textColor="@color/black"


            />

        <TextView

            android:id="@+id/tv_name1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginStart="75dp"

            android:textSize="14dp"

            android:text="View All"

            android:textColor="#0066ff"

            />


    </LinearLayout>


    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"


        android:layout_marginTop="12dp"

        android:clipToPadding="false"

        >



        <androidx.cardview.widget.CardView

            android:id="@+id/online_teaching"

            android:layout_width="0dp"

            android:layout_height="130dp"

            android:layout_weight="1"


            android:layout_marginStart="10dp"

            app:cardCornerRadius="12dp"

            app:cardElevation="8dp"

            app:cardUseCompatPadding="true"

            >


            <ImageView

                android:layout_width="match_parent"

                android:layout_height="match_parent"


                android:scaleType="centerCrop"

                android:src="@drawable/onlinet1"

                />


            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"


                android:layout_gravity="center"


                android:textSize="22dp"

                android:text="  Online\nTeaching"

                android:textColor="@color/white"


                android:textStyle="bold"

                />


        </androidx.cardview.widget.CardView>


        <androidx.cardview.widget.CardView

            android:id="@+id/digital_marketing"

            android:layout_width="0dp"

            android:layout_height="130dp"

            android:layout_weight="1"


            android:layout_marginEnd="10dp"

            app:cardCornerRadius="12dp"

            app:cardElevation="8dp"

            app:cardUseCompatPadding="true">


            <ImageView

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:scaleType="centerCrop"

                android:src="@drawable/digital1"

                />


            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"


                android:layout_gravity="center"


                android:textSize="22dp"

                android:text="   Digital\nMarketing"

                android:textColor="@color/white"


                android:textStyle="bold"

                />


        </androidx.cardview.widget.CardView>



    </LinearLayout>


    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"


        android:clipToPadding="false"

        >



        <androidx.cardview.widget.CardView

            android:id="@+id/blog"

            android:layout_width="0dp"

            android:layout_height="130dp"

            android:layout_weight="1"

            android:layout_marginStart="10dp"

            app:cardCornerRadius="12dp"

            app:cardElevation="8dp"

            app:cardUseCompatPadding="true"

            >


            <ImageView

                android:layout_width="match_parent"

                android:layout_height="match_parent"


                android:scaleType="centerCrop"

                android:src="@drawable/blog1"

                />


            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"


                android:layout_gravity="center"


                android:textSize="22dp"

                android:text="Blogging"

                android:textColor="@color/white"


                android:textStyle="bold"

                />


        </androidx.cardview.widget.CardView>


        <androidx.cardview.widget.CardView

            android:id="@+id/payment"

            android:layout_width="0dp"

            android:layout_height="130dp"

            android:layout_weight="1"


            android:layout_marginEnd="10dp"

            app:cardCornerRadius="12dp"

            app:cardElevation="8dp"

            app:cardUseCompatPadding="true"

            >


            <ImageView

                android:layout_width="match_parent"

                android:layout_height="match_parent"


                android:scaleType="centerCrop"

                android:src="@drawable/pay"

                />


            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"


                android:layout_gravity="center"


                android:textSize="22dp"

                android:text="Pay Now"

                android:textColor="@color/white"


                android:textStyle="bold"

                />


        </androidx.cardview.widget.CardView>




    </LinearLayout>


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




    <TextView

        android:layout_marginTop="20dp"

        android:id="@+id/tv_name2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="22dp"

        android:textSize="20dp"

        android:fontFamily="sans-serif-black"

        android:text="Get Started Free"

        android:textColor="@color/black"


        />




              <LinearLayout

                  android:layout_marginTop="20dp"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:orientation="vertical">


                <HorizontalScrollView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="4dp">



                    <LinearLayout

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:orientation="vertical"

                        android:paddingLeft="8dp"

                        android:paddingTop="8dp"

                        android:paddingRight="8dp"

                        android:paddingBottom="10dp">


                        <LinearLayout

                            android:layout_width="match_parent"

                            android:layout_height="wrap_content"

                            android:padding="8dp"

                            android:weightSum="100">

                            <androidx.cardview.widget.CardView

                                android:id="@+id/free_article"

                                android:layout_width="150dp"

                                android:layout_height="wrap_content"

                                android:layout_marginEnd="8dp"

                                android:layout_weight="50"

                                app:cardCornerRadius="16dp"

                                android:layout_marginRight="8dp">


                                <RelativeLayout

                                    android:layout_width="match_parent"

                                    android:layout_height="wrap_content">


                                    <ImageView

                                        android:layout_width="match_parent"

                                        android:layout_height="200dp"

                                        android:scaleType="centerCrop"

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


                                    <LinearLayout

                                        android:layout_width="match_parent"

                                        android:layout_height="wrap_content"

                                        android:layout_alignParentBottom="true"

                                        android:background="#000"

                                        android:orientation="vertical"

                                        android:padding="8dp">


                                        <TextView

                                            android:layout_width="match_parent"

                                            android:layout_height="wrap_content"


                                            android:text="Free Articles"

                                            android:textColor="#FFFFFF"

                                            android:textSize="14sp"

                                            android:textStyle="bold" />


                                        <LinearLayout

                                            android:layout_width="match_parent"

                                            android:layout_height="wrap_content"

                                            android:layout_marginTop="4dp"

                                            android:orientation="horizontal"

                                            android:weightSum="100">


                                            <TextView

                                                android:layout_width="0dp"

                                                android:layout_height="wrap_content"

                                                android:layout_weight="80"


                                                android:text="Read More >>"

                                                android:textColor="#FFFFFF"

                                                android:textSize="12sp"

                                                android:textStyle="bold" />





                                        </LinearLayout>


                                    </LinearLayout>


                                </RelativeLayout>


                            </androidx.cardview.widget.CardView>


                            <androidx.cardview.widget.CardView

                                android:id="@+id/free_video"

                                android:layout_width="150dp"

                                android:layout_height="wrap_content"

                                android:layout_marginEnd="8dp"

                                android:layout_weight="50"

                                app:cardCornerRadius="16dp"

                                android:layout_marginRight="8dp">


                                <RelativeLayout

                                    android:layout_width="match_parent"

                                    android:layout_height="wrap_content">


                                    <ImageView

                                        android:layout_width="match_parent"

                                        android:layout_height="200dp"

                                        android:scaleType="centerCrop"

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


                                    <LinearLayout

                                        android:layout_width="match_parent"

                                        android:layout_height="wrap_content"

                                        android:layout_alignParentBottom="true"

                                        android:background="#000"

                                        android:orientation="vertical"

                                        android:padding="8dp">


                                        <TextView

                                            android:layout_width="match_parent"

                                            android:layout_height="wrap_content"


                                            android:text="Free Videos"

                                            android:textColor="#FFFFFF"

                                            android:textSize="14sp"

                                            android:textStyle="bold" />


                                        <LinearLayout

                                            android:layout_width="match_parent"

                                            android:layout_height="wrap_content"

                                            android:layout_marginTop="4dp"

                                            android:orientation="horizontal"

                                            android:weightSum="100">


                                            <TextView

                                                android:layout_width="0dp"

                                                android:layout_height="wrap_content"

                                                android:layout_weight="80"


                                                android:text="Watch Now"

                                                android:textColor="#FFFFFF"

                                                android:textSize="12sp"

                                                android:textStyle="bold" />





                                        </LinearLayout>


                                    </LinearLayout>


                                </RelativeLayout>


                            </androidx.cardview.widget.CardView>





                            <androidx.cardview.widget.CardView

                                android:id="@+id/free_audio"

                                android:layout_width="150dp"

                                android:layout_height="wrap_content"

                                android:layout_marginLeft="8dp"

                                android:layout_weight="50"

                                app:cardCornerRadius="16dp">


                                <RelativeLayout

                                    android:layout_width="match_parent"

                                    android:layout_height="wrap_content">


                                    <ImageView

                                        android:layout_width="match_parent"

                                        android:layout_height="200dp"

                                        android:scaleType="centerCrop"

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


                                    <LinearLayout

                                        android:layout_width="match_parent"

                                        android:layout_height="wrap_content"

                                        android:layout_alignParentBottom="true"

                                        android:background="#000"

                                        android:orientation="vertical"

                                        android:padding="8dp">


                                        <TextView

                                            android:layout_width="match_parent"

                                            android:layout_height="wrap_content"


                                            android:text="Free Audio Courses"

                                            android:textColor="#FFFFFF"

                                            android:textSize="14sp"

                                            android:textStyle="bold" />


                                        <LinearLayout

                                            android:layout_width="match_parent"

                                            android:layout_height="wrap_content"

                                            android:layout_marginTop="4dp"

                                            android:orientation="horizontal"

                                            android:weightSum="100">


                                            <TextView

                                                android:layout_width="0dp"

                                                android:layout_height="wrap_content"

                                                android:layout_weight="80"


                                                android:text="Listen Now"

                                                android:textColor="#FFFFFF"

                                                android:textSize="12sp"

                                                android:textStyle="bold" />




                                        </LinearLayout>


                                    </LinearLayout>


                                </RelativeLayout>

                            </androidx.cardview.widget.CardView>







                        </LinearLayout>





                    </LinearLayout>



                </HorizontalScrollView>



 </LinearLayout>


    </LinearLayout>

</ScrollView>


Source Img :https://user-images.githubusercontent.com/71060268/144716355-89a51133-a8b5-41c5-8fd0-5b9f7044d549.png

WEBSITE:https://learncodewithrk.in/

GITHUB:https://github.com/LearncodeWithRk/Learning-App-UI

Post a Comment

0 Comments