Dashboard ui design in android studio
modern dashboard ui design in android studio using cardview tutorial or example
dependencies install (build.gradle): implementation 'androidx.cardview:cardview:1.0.0'
XML UI Design : activity_main
<?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"
tools:context=".MainActivity">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<RelativeLayout
android:background="#E6E6E6"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:orientation="vertical"
android:gravity="center"
android:background="@color/colorAccent"
>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_gravity="center"
android:src="@drawable/onlinestore" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MY DASHBOARD DESIGN"
android:textColor="#fff"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginTop="10dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="251dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="135dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
>
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/profile"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="@drawable/man"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Profile"
android:textSize="18sp"
android:layout_below="@+id/profile"
android:layout_marginTop="10dp"
/>
<Button
android:id="@+id/profileBtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="@drawable/placeholder"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Location"
android:textSize="18sp"
android:layout_below="@+id/imageView1"
android:layout_marginTop="10dp"
/>
<Button
android:id="@+id/locationBtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="135dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
>
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/profileimg"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="@drawable/googleplus"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Google Plus"
android:textSize="18sp"
android:layout_below="@+id/profileimg"
android:layout_marginTop="10dp"
/>
<Button
android:id="@+id/googleplusbtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/youtubeview"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="@drawable/youtube"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Youtube"
android:textSize="18sp"
android:layout_below="@+id/youtubeview"
android:layout_marginTop="10dp"
/>
<Button
android:id="@+id/youtubebtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="135dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
>
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/facebookimg"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="@drawable/facebook"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Facebook"
android:textSize="18sp"
android:layout_below="@+id/facebookimg"
android:layout_marginTop="10dp"
/>
<Button
android:id="@+id/facebookBtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/twitterView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="@drawable/twitter"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Twitter"
android:textSize="18sp"
android:layout_below="@+id/twitterView"
android:layout_marginTop="10dp"
/>
<Button
android:id="@+id/twitterBtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Preview |