 |
| Nagad Uddokta App Ui design |
Step 1: Creating a new project
- Open a new project.
- We will be working on Empty Activity with language as Java. Leave all other options unchanged.
- You can change the name of the project at your convenience.
- There will be two default files named activity_main.xml and MainActivity.java.
Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code:
In this step we open an XML file and add the code :-
<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">
<!--
* Created by RSM Developer on 12-04-2023.
* Follow Facebook : https://www.facebook.com/RsmDeveloper
* Subscribe Youtube : https://www.youtube.com/@RsmDeveloper
* Visit Website : https://rsmdeveloper.blogspot.com/
* Developed Your Creativity With RSM Developer
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/capture"
android:orientation="vertical"
>
<!-- NavBar -->
<LinearLayout
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:weightSum="3"
android:layout_marginBottom="10dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/dot"
android:layout_weight="1"
android:layout_gravity="left"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="নগদ উদ্যোক্তা"
android:textSize="30sp"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/white"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/notifications_none_24"
android:layout_weight="1"
android:layout_gravity="right"
/>
</LinearLayout>
<!-- Balance -->
<androidx.cardview.widget.CardView
app:cardCornerRadius="20dp"
android:layout_width="250dp"
android:layout_height="45dp"
android:orientation="vertical"
android:backgroundTint="@color/white"
android:layout_margin="20dp"
android:layout_gravity="center"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/unnamed"
android:layout_marginLeft="5dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ব্যালেন্স জানতে ট্যাব করুন"
android:textSize="20sp"
android:layout_marginLeft="10dp"
android:textColor="#e94e24"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<!-- Body -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="150dp"
android:padding="20dp"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="20dp"
android:backgroundTint="@color/black"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="20dp"
android:layout_margin="1dp"
android:backgroundTint="@color/white"
>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:orientation="horizontal"
android:background="@color/white"
android:useDefaultMargins="true" >
<!-- M2P -->
<RelativeLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_marginLeft="30dp"
>
<LinearLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="@drawable/ic_cash_in"
android:gravity="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="এম টু পি"
android:textSize="20sp"
android:gravity="center"
android:textColor="#e94e24"
/>
</LinearLayout>
<View
android:layout_alignParentBottom="true"
android:layout_width="140dp"
android:layout_height="1dp"
android:background="@color/black"
android:gravity="center"
/>
<View
android:layout_width="1dp"
android:layout_height="90dp"
android:background="@color/black"
android:layout_alignParentRight="true"
android:gravity="center"
/>
</RelativeLayout>
<!-- Setelment -->
<RelativeLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="@drawable/ic_b2b"
android:gravity="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="সেটেলমেন্ট"
android:textSize="20sp"
android:gravity="center"
android:textColor="#e94e24"
/>
</LinearLayout>
<View
android:layout_alignParentBottom="true"
android:layout_width="140dp"
android:layout_height="1dp"
android:background="@color/black"
android:gravity="center"
/>
</RelativeLayout>
<!-- Shadhin -->
<RelativeLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_marginLeft="30dp"
>
<LinearLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="@drawable/shad"
android:gravity="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="স্বাধীন"
android:textSize="20sp"
android:gravity="center"
android:textColor="#e94e24"
/>
</LinearLayout>
<View
android:layout_alignParentBottom="true"
android:layout_width="140dp"
android:layout_height="1dp"
android:background="@color/black"
android:gravity="center"
/>
<View
android:layout_width="1dp"
android:layout_height="90dp"
android:background="@color/black"
android:layout_alignParentRight="true"
android:gravity="center"
/>
</RelativeLayout>
<!-- Reg-->
<RelativeLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="@drawable/nib"
android:gravity="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="নিবন্ধন"
android:textSize="20sp"
android:gravity="center"
android:textColor="#e94e24"
/>
</LinearLayout>
<View
android:layout_alignParentBottom="true"
android:layout_width="140dp"
android:layout_height="1dp"
android:background="@color/black"
android:gravity="center"
/>
</RelativeLayout>
<!-- Details -->
<RelativeLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_marginLeft="30dp"
>
<LinearLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="@drawable/ic_transaction_history"
android:gravity="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="বিবরণী"
android:textSize="20sp"
android:gravity="center"
android:textColor="#e94e24"
/>
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="90dp"
android:background="@color/black"
android:layout_alignParentRight="true"
android:gravity="center"
/>
</RelativeLayout>
<!-- Bill Pay -->
<RelativeLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="150dp"
android:layout_height="100dp"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="@drawable/bill"
android:gravity="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="বিল পে"
android:textSize="20sp"
android:gravity="center"
android:textColor="#e94e24"
/>
</LinearLayout>
</RelativeLayout>
</GridLayout>
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
</LinearLayout>
</RelativeLayout>
Output:
Now run the App and you will see main topics and sub-topics listed.....
Nagad Uddokta App Icon: 
Tags
Ui Design