User Interface design in android studio (source code) - Passionate Geekz

Breaking

Where you can unleash your inner geek.

Thursday, 12 September 2019

User Interface design in android studio (source code)

In this tutorial we are Creating user interface in android from Scratch

To begin create  android project file > new >new project>start with empty activity

Now you can use content _main.xml or you can create xml file by right click on layout folder>new>XML>layout xml named it as content.xml. and type the following code , in this we are creating the UI for dashboard

Go to your build.gradle (module:app)>add following code
dependencies {implementation 'com.android.support:cardview-v7:28.0.0' }
Now open your content_main.xml and start codding.............
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout 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="#2196F3"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:showIn="@layout/app_bar_main">    <androidx.cardview.widget.CardView        android:layout_width="163dp"        android:layout_height="148dp"        android:background="#fff"        android:elevation="@dimen/fab_margin"        app:cardBackgroundColor="#fff"        app:cardCornerRadius="10dp"        app:cardElevation="15dp"        app:cardMaxElevation="3dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.129"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.407">        <androidx.constraintlayout.widget.ConstraintLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/imageView"                android:layout_width="65dp"                android:layout_height="61dp"                android:background="#FFFFFF"                app:srcCompat="@drawable/q"                tools:layout_editor_absoluteX="49dp"                tools:layout_editor_absoluteY="28dp" />            <TextView                android:id="@+id/textView"                android:layout_width="113dp"                android:layout_height="22dp"                android:text="File"                android:textAlignment="center"                tools:layout_editor_absoluteX="25dp"                tools:layout_editor_absoluteY="103dp" />        </androidx.constraintlayout.widget.ConstraintLayout>    </androidx.cardview.widget.CardView>    <androidx.cardview.widget.CardView        android:layout_width="163dp"        android:layout_height="148dp"        android:background="#fff"        android:elevation="@dimen/fab_margin"        app:cardBackgroundColor="#fff"        app:cardCornerRadius="10dp"        app:cardElevation="15dp"        app:cardMaxElevation="3dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.923"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.407">        <androidx.constraintlayout.widget.ConstraintLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/imageView"                android:layout_width="65dp"                android:layout_height="61dp"                android:background="#FFFFFF"                app:srcCompat="@drawable/w"                tools:layout_editor_absoluteX="49dp"                tools:layout_editor_absoluteY="28dp" />            <TextView                android:id="@+id/textView"                android:layout_width="113dp"                android:layout_height="22dp"                android:text="Wifi"                android:textAlignment="center"                tools:layout_editor_absoluteX="25dp"                tools:layout_editor_absoluteY="103dp" />        </androidx.constraintlayout.widget.ConstraintLayout>    </androidx.cardview.widget.CardView>    <androidx.cardview.widget.CardView        android:layout_width="163dp"        android:layout_height="148dp"        android:background="#fff"        android:elevation="@dimen/fab_margin"        app:cardBackgroundColor="#fff"        app:cardCornerRadius="10dp"        app:cardElevation="15dp"        app:cardMaxElevation="3dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.129"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.672">        <androidx.constraintlayout.widget.ConstraintLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/imageView"                android:layout_width="65dp"                android:layout_height="61dp"                android:background="#FFFFFF"                app:srcCompat="@drawable/e"                tools:layout_editor_absoluteX="49dp"                tools:layout_editor_absoluteY="28dp" />            <TextView                android:id="@+id/textView"                android:layout_width="113dp"                android:layout_height="22dp"                android:text="Transfer"                android:textAlignment="center"                tools:layout_editor_absoluteX="25dp"                tools:layout_editor_absoluteY="103dp" />        </androidx.constraintlayout.widget.ConstraintLayout>    </androidx.cardview.widget.CardView>    <androidx.cardview.widget.CardView        android:layout_width="163dp"        android:layout_height="148dp"        android:background="#fff"        android:elevation="@dimen/fab_margin"        app:cardBackgroundColor="#fff"        app:cardCornerRadius="10dp"        app:cardElevation="15dp"        app:cardMaxElevation="3dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.923"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.672">        <androidx.constraintlayout.widget.ConstraintLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/imageView"                android:layout_width="65dp"                android:layout_height="61dp"                android:background="#FFFFFF"                app:srcCompat="@drawable/r"                tools:layout_editor_absoluteX="49dp"                tools:layout_editor_absoluteY="28dp" />            <TextView                android:id="@+id/textView"                android:layout_width="113dp"                android:layout_height="22dp"                android:text="Desktop"                android:textAlignment="center"                tools:layout_editor_absoluteX="25dp"                tools:layout_editor_absoluteY="103dp" />        </androidx.constraintlayout.widget.ConstraintLayout>    </androidx.cardview.widget.CardView>    <androidx.cardview.widget.CardView        android:layout_width="163dp"        android:layout_height="148dp"        android:background="#fff"        android:elevation="@dimen/fab_margin"        app:cardBackgroundColor="#fff"        app:cardCornerRadius="10dp"        app:cardElevation="15dp"        app:cardMaxElevation="3dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.129"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.943">        <androidx.constraintlayout.widget.ConstraintLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/imageView"                android:layout_width="65dp"                android:layout_height="61dp"                android:background="#FFFFFF"                app:srcCompat="@drawable/z"                tools:layout_editor_absoluteX="49dp"                tools:layout_editor_absoluteY="28dp" />            <TextView                android:id="@+id/textView"                android:layout_width="113dp"                android:layout_height="22dp"                android:text="Flag"                android:textAlignment="center"                tools:layout_editor_absoluteX="25dp"                tools:layout_editor_absoluteY="103dp" />        </androidx.constraintlayout.widget.ConstraintLayout>    </androidx.cardview.widget.CardView>    <androidx.cardview.widget.CardView        android:layout_width="163dp"        android:layout_height="148dp"        android:background="#fff"        android:elevation="@dimen/fab_margin"        app:cardBackgroundColor="#fff"        app:cardCornerRadius="10dp"        app:cardElevation="15dp"        app:cardMaxElevation="3dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.919"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.943">        <androidx.constraintlayout.widget.ConstraintLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/imageView"                android:layout_width="65dp"                android:layout_height="61dp"                android:background="#FFFFFF"                app:srcCompat="@drawable/x"                tools:layout_editor_absoluteX="49dp"                tools:layout_editor_absoluteY="28dp" />            <TextView                android:id="@+id/textView"                android:layout_width="113dp"                android:layout_height="22dp"                android:text="Add User"                android:textAlignment="center"                tools:layout_editor_absoluteX="25dp"                tools:layout_editor_absoluteY="103dp" />        </androidx.constraintlayout.widget.ConstraintLayout>    </androidx.cardview.widget.CardView>    <ImageView        android:id="@+id/imageView7"        android:layout_width="167dp"        android:layout_height="178dp"        android:layout_marginStart="143dp"        android:layout_marginLeft="143dp"        android:layout_marginTop="25dp"        android:layout_marginEnd="140dp"        android:layout_marginRight="140dp"        android:layout_marginBottom="614dp"        android:background="#2196F3"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.205"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.74"        app:srcCompat="@drawable/qwe" />    <TextView        android:id="@+id/textView2"        android:layout_width="314dp"        android:layout_height="47dp"        android:layout_marginTop="188dp"        android:layout_marginBottom="560dp"        android:text="Paras Guglani"        android:textAlignment="center"        android:textColor="#fff"        android:textSize="30dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.67"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

You can choose drawable’s of your choice >Add drawable’s in res>drawable

Now finally run your project(shift+f10) or from menu bar select run , you can use android emulator or you can use your device as emulator.

Output

No comments:

Post a Comment