Dashboard ui design in android studio

modern dashboard ui design in android studio using cardview tutorial or example

21 min read

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>