أندرويد ستوديو 2020– درس4: كيف تستخدم الـConstraint Layout

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on print

:The Code

chains1.xml:

<?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"
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary">





<ImageView
android:id="@+id/image1"
android:layout_width="70dp"
android:layout_height="70dp"
android:contentDescription="@string/todo"
android:src="@drawable/image1"
app:layout_constraintBottom_toTopOf="@id/image2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />

<ImageView
android:id="@+id/image2"
android:layout_width="70dp"
android:layout_height="70dp"
android:contentDescription="@string/todo"
android:src="@drawable/image2"
app:layout_constraintBottom_toTopOf="@id/image3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image1" />

<ImageView
android:id="@+id/image3"
android:layout_width="70dp"
android:layout_height="70dp"
android:contentDescription="@string/todo"
android:src="@drawable/emadzedan"
app:layout_constraintBottom_toTopOf="@id/image4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image2" />

<ImageView
android:id="@+id/image4"
android:layout_width="70dp"
android:layout_height="70dp"
android:contentDescription="@string/todo"
android:src="@drawable/image4"
app:layout_constraintBottom_toTopOf="@id/image5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image3" />

<ImageView
android:id="@+id/image5"
android:layout_width="70dp"
android:layout_height="70dp"
android:contentDescription="@string/todo"
android:src="@drawable/image5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image4" />

</androidx.constraintlayout.widget.ConstraintLayout>




chains2.xml:




<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/constraintLayout"
android:background="@color/colorPrimary"
xmlns:app="http://schemas.android.com/apk/res-auto">




<ImageView
android:id="@+id/image1"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/image1"
android:contentDescription="@string/todo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/image2"
app:layout_constraintVertical_chainStyle="spread"
/>

<ImageView
android:id="@+id/image2"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/image2"
android:contentDescription="@string/todo"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/image1"
app:layout_constraintRight_toLeftOf="@id/image3"
/>

<ImageView
android:id="@+id/image3"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/emadzedan"
android:contentDescription="@string/todo"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="@id/image2"
app:layout_constraintRight_toLeftOf="@id/image4"
/>

<ImageView
android:id="@+id/image4"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/image4"
android:contentDescription="@string/todo"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="@id/image3"
app:layout_constraintRight_toLeftOf="@id/image5"
/>

<ImageView
android:id="@+id/image5"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/image5"
android:contentDescription="@string/todo"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/image4"
app:layout_constraintRight_toRightOf="parent"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java:

package com.emadzedan.addimage;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

ImageView image3;
Boolean Animated = false;

ConstraintLayout constraintLayout;

ConstraintSet constraintSet1 = new ConstraintSet(); // create a Constraint Set
ConstraintSet constraintSet2 = new ConstraintSet(); // create a Constraint Set

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chains1);
constraintSet2.clone(this, R.layout.chains2); // get constraints from layout 2

constraintLayout = findViewById(R.id.constraintLayout);

constraintSet1.clone(constraintLayout); // Clone The Old constraintLayout

image3 = findViewById(R.id.image3);
image3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
final ChangeBounds transition = new ChangeBounds();
transition.setDuration(1500); // Sets a duration of 1500 milliseconds
if (!Animated) {
Animated = true;
TransitionManager.beginDelayedTransition(constraintLayout, transition);
constraintSet2.applyTo(constraintLayout); // set constraintSet2 to constraintLayout
} else {
Animated = false;
TransitionManager.beginDelayedTransition(constraintLayout, transition);
constraintSet1.applyTo(constraintLayout); // set constraintSet1 to constraintLayout
}
}
});
}
}

:The Files

Download Files:
ConstraintLayoutFiles

Emad Zedan

Emad Zedan

Facebook
Twitter
LinkedIn
WhatsApp
Email
Print
أندرويد ستوديو
Emad Zedan

أندرويد ستوديو 2020– درس4: كيف تستخدم الـConstraint Layout

:The Code chains1.xml:<?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” android:id=”@+id/constraintLayout” android:layout_width=”match_parent” android:layout_height=”match_parent” android:background=”@color/colorPrimary”><ImageView android:id=”@+id/image1″ android:layout_width=”70dp” android:layout_height=”70dp” android:contentDescription=”@string/todo” android:src=”@drawable/image1″ app:layout_constraintBottom_toTopOf=”@id/image2″ app:layout_constraintLeft_toLeftOf=”parent” app:layout_constraintRight_toRightOf=”parent” app:layout_constraintTop_toTopOf=”parent” app:layout_constraintVertical_chainStyle=”spread” /><ImageView android:id=”@+id/image2″ android:layout_width=”70dp” android:layout_height=”70dp”

Read More »
أندرويد ستوديو
Emad Zedan

أندرويد ستوديو 2020 – درس 1: كيفية إضافة صورة إلى التطبيق

:The Code activity_main.xml: <?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” android:background=”@color/colorPrimaryDark”> <ImageView android:id=”@+id/bg_shape” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:src=”@drawable/bg_shape” android:scaleType=”fitStart” android:layout_alignParentTop=”true” android:contentDescription=”@string/todo”/> <ImageView android:id=”@+id/emadzedan” android:layout_width=”150dp”

Read More »
أندرويد ستوديو
Emad Zedan

أندرويد ستوديو 2020 – درس 2: كيفية إضافة خطوط غير إفتراضية إلى التطبيق واستخدامها

:The Code activity_main.xml: <?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” android:background=”@color/colorPrimaryDark”> <ImageView android:id=”@+id/bg_shape” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:src=”@drawable/bg_shape” android:scaleType=”fitStart” android:layout_alignParentTop=”true” android:contentDescription=”@string/todo”/> <TextView android:id=”@+id/title” android:layout_width=”wrap_content”

Read More »

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *