Membuat Layout Profile Sosial Media (Instagram Like) Android Studio Part 1

Update Terakhir pada

Hai, apa kabar sahabat setia blog webhozz sekalian, pada artikel kali ini saya akan mengenalkan adanya tutorial seri baru yaitu membuat layout profile sosial media seperti instagram, nantinya series ini akan kita bagi menjadi 3 part, diharapkan dari series artikel ini teman-teman dapat menyerap ilmu tata cara pembuatan layout yang cukup rumit nih.. Yuk langsung aja mulai dengan tutorialnya.

Untuk Part 1 ini Hasil akhir yang kita harapkan adalah seperti ini


Oke lumayan menarik bukan? Mari langsung aja menuju ke source code yang dibutuhkan!

1.      Buat Activity Baru

Kalian bisa langsung aja buat activity baru dengan nama ProfileActivity.java dan dengan layout activity_profile.xml bisa memilih empty Activity

2.      Edit activity_profile.xml

Berikut source code yang diperlukan

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context=".ProfileActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"

android:background="@drawable/profile_background"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="@+id/toolbar">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_profile" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"
app:backgroundTint="@color/colorAccent"
android:tint="#fff"
app:srcCompat="@android:drawable/ic_input_add" />

</android.support.design.widget.CoordinatorLayout>

Kalian juga bisa membuat file content_profile.xml pada layout untuk memberikan isi content text seperti gambar sebelumnya, barikut source code dari content_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".ProfileActivity"
tools:showIn="@layout/activity_profile">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

3.      Edit ProfileActivity

Untuk profile activity tidak banyak yang perlu ditambahkan, kalian hanya perlu menambahkan code dibawah pada bagian onCreate

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

toolbar.setTitle("@olympia95");
setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
        Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
}
});

4.      Hasil

Baik Hasilnya akan seperti dibawah ini

Saat di scroll kebawah gambar akan menghilang, hal ini biasa disebut dengan Collapsing Toolbar

Oke sekian dari Tutorial kali ini, sampai jumpa minggu depan dengan Part 2 kita akan memahas mengenai CardView pada Layout yang sama agar semakin mirip dengan Profile Instagram, Terimakasih 😊