Skip to content
Share
Explore

Android Application Development: Creating responsive layouts using ConstraintLayout

Android Kotlin app that demonstrates creating responsive layouts using ConstraintLayout.
This app will showcase various constraints and positioning techniques.
Completely project ready to import into an Android Studio Project:
⁠
⁠
⁠

Here are the necessary files and their contents:

MainActivity.kt DONE
package com.example.responsivelayoutdemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.responsivelayoutdemo.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

// You can add any additional logic here if needed
}
}
build.gradle.kts (Project level) done
// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
id("com.android.application") version "8.2.0" apply false
id("org.jetbrains.kotlin.android") version "1.9.10" apply false
}
build.gradle.kts (Module level)
plugins {
id("com.android.application")
id("org.jetbrains.kotlin.android")
}

android {
namespace = "com.example.responsivelayoutdemo"
compileSdk = 34

defaultConfig {
applicationId = "com.example.responsivelayoutdemo"
minSdk = 24
targetSdk = 34
versionCode = 1
versionName = "1.0"

testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
}

buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro"
)
}
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_1_8
targetCompatibility = JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
}
buildFeatures {
viewBinding = true
}
}

dependencies {
implementation("androidx.core:core-ktx:1.12.0")
implementation("androidx.appcompat:appcompat:1.6.1")
implementation("com.google.android.material:material:1.11.0")
implementation("androidx.constraintlayout:constraintlayout:2.1.4")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
}
activity_main.xml DONE
<?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">

<!-- Element constrained to the top of the screen -->
<TextView
android:id="@+id/topTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Text"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

<!-- Element constrained to the bottom of the screen -->
<TextView
android:id="@+id/bottomTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom Text"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

<!-- Element centered on the screen -->
<Button
android:id="@+id/centerButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Centered Button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

<!-- Element positioned relative to another element (below centerButton) -->
<TextView
android:id="@+id/belowCenterTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Below Center"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@id/centerButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

<!-- Element positioned to the right of another element -->
<Button
android:id="@+id/rightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right Button"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="@id/centerButton"
app:layout_constraintBottom_toBottomOf="@id/centerButton"
app:layout_constraintStart_toEndOf="@id/centerButton" />

<!-- Element with margin and padding -->
<TextView
android:id="@+id/marginPaddingTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Margin and Padding"
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.