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 😊