Membuat UI Activity Profile seperti Instagram menggunakan Android Studio (Part 1)

Update Terakhir pada

Halo guys pada artikel kali ini kita akan membahas bagaimana caranya membuat user interface halamn profile seperti di instagram, nah karena artikel ini bakalan cukup panjang, akan saya bagi menjadi 2 part, Part 1 adalah part dimana kita membuat componen UI utama (bagian atas). yang kedua dimana kita komponen UI bagian bawah yaitu switch antara view

grid ke linear layout saaat melihat post yang ada

UI dari Instagram

Hasil Akhir dari yang akan kita buat

Oke lanjut saja ada beberapa hal yang kita butuhkan untuk membuat layout ini

File java : MainActivity.java

File xml folder layout : activity_main.xml

File xml folder menu : profile_navigation_menu.xml

File xml folder values : color.xml, styles.xml

1. Sync Gradle

Baik langsung aja kita mulai dari Sync gradle

Berikut source code gradle :

implementation 'com.android.support:support-v4:28.0.0'
implementation 'com.android.support:design:28.0.0'
implementation 'de.hdodenhof:circleimageview:2.2.0'

Taruh line tersebut dalam dependencies object lalu sync

2. activity_main.xml

3.	<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:background="@color/colorPrimary"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/profile_toolbar"
android:elevation="4dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:paddingBottom="5dp"
android:orientation="horizontal"
>
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_picture"
style="@style/field_profile_picture_styles"
android:src="@drawable/pp"
android:layout_width="120dp"
android:layout_height="100dp"
android:paddingRight="20dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:id="@+id/profile_counts_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<!--  Post Counts Label and Field -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:id="@+id/field_posts_count"
style="@style/field_profile_count_styles"
android:text="3k"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/label_posts_count"
style="@style/label_profile_count_styles"
android:text="posts"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

<!--  Followers Counts Label and Field -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:id="@+id/field_followers_count"
style="@style/field_profile_count_styles"
android:text="13m"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/label_followers_count"
style="@style/label_profile_count_styles"
android:text="Followers"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<!--  Following Counts Label and Field -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:id="@+id/field_following_count"
style="@style/field_profile_count_styles"
android:text="274"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/label_following_count"
style="@style/label_profile_count_styles"
android:text="Following"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

</LinearLayout>

<Button
android:layout_below="@+id/profile_counts_layout"
android:text="Edit Profile"
style="@style/button_profile_styles"
android:layout_width="match_parent"
android:layout_height="30dip"
android:layout_marginTop="5dp"/>

</RelativeLayout>

</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<TextView
android:id="@+id/field_profile_name"
android:text="@string/profile_name"
android:textStyle="bold"
android:textColor="#0f0f0f"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/field_profile_desc"
android:layout_below="@+id/field_profile_name"
android:text="@string/dummy_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:scrollbars="none"
>

<LinearLayout
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
style="@style/field_profile_highlight_styles"
android:src="@drawable/pp" />
<TextView
android:id="@+id/field_profile_highlight_name"
style="@style/field_profile_highlight_name_styles"
android:text="Highlights"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
style="@style/field_profile_highlight_styles"
android:src="@drawable/pp" />
<TextView
android:id="@+id/field_profile_highlight_name2"
style="@style/field_profile_highlight_name_styles"
android:text="Highlights"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
style="@style/field_profile_highlight_styles"
android:src="@drawable/pp" />
<TextView
android:id="@+id/field_profile_highlight_name3"
style="@style/field_profile_highlight_name_styles"
android:text="Highlights"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
style="@style/field_profile_highlight_styles"
android:src="@drawable/pp" />
<TextView
android:id="@+id/field_profile_highlight_name4"
style="@style/field_profile_highlight_name_styles"
android:text="Highlights"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
style="@style/field_profile_highlight_styles"
android:src="@drawable/pp" />
<TextView
android:id="@+id/field_profile_highlight_name5"
style="@style/field_profile_highlight_name_styles"
android:text="Highlights"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
style="@style/field_profile_highlight_styles"
android:src="@drawable/pp" />
<TextView
android:id="@+id/field_profile_highlight_name6"
style="@style/field_profile_highlight_name_styles"
android:text="Highlights"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
style="@style/field_profile_highlight_styles"
android:src="@drawable/pp" />
<TextView
android:id="@+id/field_profile_highlight_name7"
style="@style/field_profile_highlight_name_styles"
android:text="Highlights"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>


</LinearLayout>

</HorizontalScrollView>


</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="@color/colorBorders" ></View>
<android.support.design.widget.BottomNavigationView
android:id="@+id/posts_layout_type_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/profile_navigation_menu"
style="@style/custom_bottom_navbar_styles"
/>
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="@color/colorBorders" ></View>


<RelativeLayout
android:id="@+id/fragment_cont"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>

</LinearLayout>



</ScrollView>

</LinearLayout>

3. Source code file profile_navigation_menu.xml

Buatlah folder menu pada folder res, dan buatlah file bernama profile_navigation_menu.xml file ini akan berguna sebagai menu item dari BottomNavigationBar yang ada pada layout utama kita. Berikut source codenya :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/profile_nav_grid"
android:icon="@drawable/ic_view_module_black_24dp"
android:title="Grid"
/>

<item
android:id="@+id/profile_nav_linear"
android:icon="@drawable/ic_view_stream_black_24dp"
android:title="Linear"
/>

</menu>

4. Berikut adalah file – file untuk warna dan styleing yaitu file color.xml dan styles.xml

Source code Color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#ffff</color>
<color name="colorPrimaryDark">#f7f7f7</color>
<color name="colorAccent">#0f0f0f</color>
<color name="colorActive">#289eff</color>
<color name="colorBorders">#e0e0e0</color>
</resources>

Source code Styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>

</style>

<style name="field_profile_count_styles">
<item name="android:textColor">#0f0f0f</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16sp</item>
<item name="android:textAlignment">center</item>
</style>

<style name="label_profile_count_styles">
<item name="android:textColor">#7c7c7c</item>
<item name="android:textAlignment">center</item>
</style>

<style name="field_profile_picture_styles">
<item name="android:scaleType">centerCrop</item>
</style>

<style name="field_profile_highlight_styles">
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:paddingLeft">10dp</item>

<item name="android:layout_width">80dp</item>
<item name="android:layout_height">80dp</item>
</style>

<style name="field_profile_highlight_name_styles">
<item name="android:textAlignment">center</item>
</style>

<style name="custom_bottom_navbar_styles">
<item name="elevation">0dp</item>
<item name="android:backgroundTint">@color/colorPrimary</item>
<item name="itemIconTint">@color/bottom_navigation_selector</item>
<item name="itemTextColor">@color/bottom_navigation_selector</item>
<item name="labelVisibilityMode">unlabeled</item>
<item name="android:background">?android:attr/windowBackground</item>
</style>

<style name="button_profile_styles">
<item name="android:background">@drawable/bg_profile_button</item>
<item name="android:stateListAnimator">@null</item>
<item name="android:textAllCaps">false</item>
</style>

</resources>

4. File MainActivity.java

Source code Color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#ffff</color>
<color name="colorPrimaryDark">#f7f7f7</color>
<color name="colorAccent">#0f0f0f</color>
<color name="colorActive">#289eff</color>
<color name="colorBorders">#e0e0e0</color>
</resources>

Source code Styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>

</style>

<style name="field_profile_count_styles">
<item name="android:textColor">#0f0f0f</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16sp</item>
<item name="android:textAlignment">center</item>
</style>

<style name="label_profile_count_styles">
<item name="android:textColor">#7c7c7c</item>
<item name="android:textAlignment">center</item>
</style>

<style name="field_profile_picture_styles">
<item name="android:scaleType">centerCrop</item>
</style>

<style name="field_profile_highlight_styles">
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:paddingLeft">10dp</item>

<item name="android:layout_width">80dp</item>
<item name="android:layout_height">80dp</item>
</style>

<style name="field_profile_highlight_name_styles">
<item name="android:textAlignment">center</item>
</style>

<style name="custom_bottom_navbar_styles">
<item name="elevation">0dp</item>
<item name="android:backgroundTint">@color/colorPrimary</item>
<item name="itemIconTint">@color/bottom_navigation_selector</item>
<item name="itemTextColor">@color/bottom_navigation_selector</item>
<item name="labelVisibilityMode">unlabeled</item>
<item name="android:background">?android:attr/windowBackground</item>
</style>

<style name="button_profile_styles">
<item name="android:background">@drawable/bg_profile_button</item>
<item name="android:stateListAnimator">@null</item>
<item name="android:textAllCaps">false</item>
</style>

</resources>

5. File MainActivity.java

6.	package com.quicktapgame.instagramlike;

import android.net.Uri;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

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

toolbar = findViewById(R.id.profile_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(R.string.profile_username);


// kita set default nya Home Fragment
loadFragment(new ProfileGridFragment());
// inisialisasi BottomNavigaionView
BottomNavigationView bottomNavigationView = findViewById(R.id.posts_layout_type_navigation);
// beri listener pada saat item/menu bottomnavigation terpilih
bottomNavigationView.setOnNavigationItemSelectedListener(this);
}

// method listener untuk logika pemilihan
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;
        switch (item.getItemId()){
case R.id.profile_nav_grid:
//fragment = new ProfileGridFragment();
                break;
            case R.id.profile_nav_linear:
//fragment = new ProfileLinearFragment();
                break;
}
return loadFragment(fragment);
}

// method untuk load fragment yang sesuai
private boolean loadFragment(Fragment fragment) {
if (fragment != null) {
            getSupportFragmentManager().beginTransaction()
                    .replace(R.id.fragment_cont, fragment)
                    .commit();
            return true;
}
return false;
}

}

Baik itu semua file yang kita butuhkan, pada part 2 kita akan membuat fragment grid dan linear pada bagian bawah halaman, selamat mencoba 😊