Ocak 5, 2020

Android ConstraintLayout PlaceHolder & Animasyon

By admin Android 0 Comments

Android’de responsive tasarımlar yapabilmek klasik olan layoutlarla çok zor ( Relative,Linear,FrameLayout vb. ..) . Ancak ConstraintLayout ile çok komplex layoutlar ve responsive arayüzler tasarlamak mümkün hatta animasyonları bile kolayca hazırlamak mümkün. Bu yazıda PlaceHolder kullanarak bir animasyon yapacağız.

Projemizin adımları :

1 . Yeni bir proje oluşturma

2. ConstraintLayout’u gradleye eklemek

3. Yeni bir aktivite oluşturup bunun layout’unu düzenlemek.

uygulamamız bittiğindeki görüntüsü bu sistemde olacak.

burada yapacaklarımız şunlar önce 4 tane Imageview ekleyeceğiz ve birde placeholder eklenecek. layout tamam. Tabi bunların hepsine bir id vermelisiniz. Sonra java tarafından bütün idlere ulaşıp aktivitemizede View.setOnClickListener ‘i implemente edeceğiz. sonrası kodlarda…

<?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:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:maxWidth="96dp"
        android:maxHeight="96dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.554">


    </androidx.constraintlayout.widget.Placeholder>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        android:src="@drawable/library" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toStartOf="@+id/imageView4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        android:src="@drawable/music" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView4"
        android:src="@drawable/queue" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintEnd_toStartOf="@+id/imageView3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        android:src="@drawable/senkron"
        android:contentDescription="TODO" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="imageView4,imageView3,imageView,imageView2"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

<?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:id="@+id/mainLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<androidx.constraintlayout.widget.Placeholder

android:id="@+id/placeholder"

android:layout_width="96dp"

android:layout_height="96dp"

android:maxWidth="96dp"

android:maxHeight="96dp"

app:layout_constraintBottom_toTopOf="@+id/imageView2"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.554">

</androidx.constraintlayout.widget.Placeholder>

<ImageView

android:id="@+id/imageView"

android:layout_width="48dp"

android:layout_height="48dp"

android:layout_marginBottom="16dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/imageView2"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

android:src="@drawable/library" />

<ImageView

android:id="@+id/imageView2"

android:layout_width="48dp"

android:layout_height="48dp"

app:layout_constraintBottom_toBottomOf="@+id/imageView"

app:layout_constraintEnd_toStartOf="@+id/imageView4"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toEndOf="@+id/imageView"

android:src="@drawable/music" />

<ImageView

android:id="@+id/imageView3"

android:layout_width="48dp"

android:layout_height="48dp"

app:layout_constraintBottom_toBottomOf="@+id/imageView4"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toEndOf="@+id/imageView4"

android:src="@drawable/queue" />

<ImageView

android:id="@+id/imageView4"

android:layout_width="48dp"

android:layout_height="48dp"

app:layout_constraintBottom_toBottomOf="@+id/imageView2"

app:layout_constraintEnd_toStartOf="@+id/imageView3"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toEndOf="@+id/imageView2"

android:src="@drawable/senkron"

android:contentDescription="TODO" />

<androidx.constraintlayout.widget.Group

android:id="@+id/group"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:constraint_referenced_ids="imageView4,imageView3,imageView,imageView2"

app:layout_constraintBottom_toTopOf="parent"

app:layout_constraintEnd_toStartOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

package com.vsofttech.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.Placeholder;

import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Placeholder placeholder;
    ConstraintLayout mainLayout;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        ImageView ımageView=findViewById(R.id.imageView);
        ımageView.setOnClickListener(this);

        ImageView ımageView1=findViewById(R.id.imageView2);
        ımageView1.setOnClickListener(this);


        ImageView ımageView2=findViewById(R.id.imageView3);
        ımageView2.setOnClickListener(this);


        ImageView ımageView3=findViewById(R.id.imageView4);
        ımageView3.setOnClickListener(this);


        placeholder=findViewById(R.id.placeholder);
        mainLayout=findViewById(R.id.mainLayout);


    }

    @Override
    public void onClick(View v) {

        TransitionManager.beginDelayedTransition(mainLayout);

        placeholder.setContentId(v.getId());



    }
}

package com.vsofttech.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import androidx.constraintlayout.widget.ConstraintLayout;

import androidx.constraintlayout.widget.Placeholder;

import android.os.Bundle;

import android.transition.TransitionManager;

import android.view.View;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

Placeholder placeholder;

ConstraintLayout mainLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ImageView ımageView=findViewById(R.id.imageView);

ımageView.setOnClickListener(this);

ImageView ımageView1=findViewById(R.id.imageView2);

ımageView1.setOnClickListener(this);

ImageView ımageView2=findViewById(R.id.imageView3);

ımageView2.setOnClickListener(this);

ImageView ımageView3=findViewById(R.id.imageView4);

ımageView3.setOnClickListener(this);

placeholder=findViewById(R.id.placeholder);

mainLayout=findViewById(R.id.mainLayout);

}

@Override

public void onClick(View v) {

TransitionManager.beginDelayedTransition(mainLayout);

placeholder.setContentId(v.getId());

}

Tags:android animasyon, android animation, android place holder nedir, android placeholder, animation, constraint layout, placeholder nedir

yazdoldur.com

Android ConstraintLayout PlaceHolder & Animasyon

About Author

veyselsari23_um2m17e1

Add a Comment

Related Posts

About Author

veyselsari23_um2m17e1

Add a Comment