Android-UI Designs
Layouts
Constraint Layout: A flexible layout called ConstraintLayout enables you to design complicated and responsive user interfaces. Constraints are used to specify the size and placement of views in relation to one another.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is Constraint layout!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Relative Layout: You can place views relative to one another or relative to the parent container using RelativeLayout. It provides easy placement choices.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:id="@+id/text1" android:layout_height="wrap_content" android:text="This is Linear layout1!"/> <TextView android:layout_width="wrap_content" android:layout_below="@+id/text1" android:layout_height="wrap_content" android:text="This is Linear layout2!"/> </RelativeLayout> |
Linear Layout: Views are organized linearly via LinearLayout, either horizontally or vertically. In order to divide available space fairly, it supports weighing.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is Linear layout1!"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is Linear layout2!"/> </LinearLayout> |
Frame Layout: A single item can be seen at a time via the FrameLayout. The last view added takes up the entirety of the layout and is placed on top of the previous views.
This is the code for activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/frameLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@mipmap/ic_launcher" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click here" android:layout_gravity="center" /> </FrameLayout> |
This is the code for MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package com.example.layouts; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button = findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // Handle button click event } }); } } |
GridLayout: the GridLayout layout manager organizes views into rows and columns much like a grid. When designing a grid-based user interface with views arranged in a tabular layout, it is helpful.
This is the code for activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/gridLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:rowCount="3" android:columnCount="2" tools:context=".MainActivity"> <TextView android:id="@+id/text1" android:text="Text 1" android:layout_row="0" android:layout_column="0" /> <TextView android:id="@+id/text2" android:text="Text 2" android:layout_row="0" android:layout_column="1" /> <TextView android:id="@+id/text3" android:text="Text 3" android:layout_row="1" android:layout_column="0" /> <Button android:id="@+id/button" android:text="Button" android:layout_row="1" android:layout_column="1"/> </GridLayout> |
This is the code for MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
package com.example.layouts; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.Button; import android.widget.GridLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); GridLayout gridLayout = findViewById(R.id.gridLayout); TextView textView1 = findViewById(R.id.text1); TextView textView2 = findViewById(R.id.text2); Button button = findViewById(R.id.button); button.setOnClickListener(view -> { // Perform action for button1 }); } } |
