Friday, March 27, 2020

[#Coding] Membuat Tampilan Laman Profile Di Android Studio

[#Coding] Membuat Tampilan Laman Profile Di Android Studio
Apa itu android studio? android studio adalah sebuah software untuk membuat aplikasi android.

Software ini bisa dibilang software yang bagus, namun sayangnya untuk pc atau laptop dengan spek yang rendah, pastinya akan memberatkan. Karena software ini berat untuk dijalankan.

Untuk bisa menjalankan software ini paling tidak spek komputer kamu harus i3 dengan ram 4gb, ini pun sudah sangat minim.





Untuk tutorial kali ini kita akan membuat tampilan profile di android studio. Bagaimana caranya?

Berikut ini step by step untuk membuat profile di android studio!

1. Buat sebuah project baru dengan nama "Bebas (Sesuai keinginan kamu)".

2. Untuk keterangan contoh lainnya silahkan isi sebagai berikut :

  • Aplication Name : AppKu
  • Company domain : com.opal.appku
  • Phone and Tablet : API 15 : Android 4.0.3 (Ice Cream Sandwich)
  • Add on Activity to Mobile : Empty Activity
  • Activity Name : MainActivity
  • Layout Name : activity_main


3. Jika sudah masuk ke halaman utama project, maka selanjutnya kita menambahkan ikon-ikon yang diperlukan kedalam drawable. Caranya klik kanan pada drawable > New > Vector Asset.

tutorial android studio


4. Klik ikon Clip art, lalu cari ikon dan klik "more vert" > Ok > Next > Finish.

tutorial android studio


5. Lakukan langkah 3 dan 4 untuk menambahkan ikon lainnya seperti home, serta search. (Silahkan tambahkan sesuai kebutuhan anda).

6. Klik kanan pada Layout > New > XML > Layout XML File. Beri nama "menu_atas" dengan root tag "LinearLayout", klik finish.

tutorial android studio


7. Selanjutnya beralih ke tahap koding silahkan copy dan paste koding dibawah ini kedalam file masing-masing.


menu_atas.xml


<?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="wrap_content"
    android:background="@android:color/holo_orange_dark"
    android:gravity="end"
    android:padding="2dp">


    <TextView
        android:id="@+id/textView8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="10"
        android:text="@string/profileku"
        android:textAlignment="center"
        android:textColor="#FFFFFF"
        android:textSize="35sp" />

    <ImageButton
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:contentDescription="@string/home"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_home_black_24dp"
        tools:ignore="VectorDrawableCompat" />

    <ImageButton
        android:id="@+id/search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:contentDescription="@string/search"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_search_black_24dp"
        tools:ignore="VectorDrawableCompat" />

    <ImageButton
        android:id="@+id/popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:contentDescription="@string/menus"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"
        tools:ignore="VectorDrawableCompat" />

</LinearLayout>

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">

    <include
        layout="@layout/menu_atas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/myPict"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginTop="100dp"
        android:src="@drawable/nama_picture"/>
    <TextView
        android:id="@+id/tvMy"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/myPict"
        android:textSize="20sp"
        android:layout_marginTop="5dp"
        android:text="@string/my_profile"
        android:gravity="center"
        />


    <TextView
        android:id="@+id/textView1"
        android:layout_width="250dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="400dp"
        android:layout_marginTop="289dp"
        android:layout_marginEnd="400dp"
        android:layout_marginBottom="400dp"
        android:text="@string/nama"
        android:textColor="#070707" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="250dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="400dp"
        android:layout_marginTop="315dp"
        android:layout_marginEnd="400dp"
        android:layout_marginBottom="400dp"
        android:text="@string/nama_kamu"
        android:textColor="#020202" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="250dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="400dp"
        android:layout_marginTop="342dp"
        android:layout_marginEnd="400dp"
        android:text="@string/alamat"
        android:textColor="#020202" />


    <TextView
        android:id="@+id/textView4"
        android:layout_width="250dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="400dp"
        android:layout_marginTop="371dp"
        android:layout_marginEnd="400dp"
        android:layout_marginBottom="400dp"
        android:text="@string/alamat_kamu"
        android:textColor="#020202" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="250dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="400dp"
        android:layout_marginTop="401dp"
        android:layout_marginEnd="400dp"
        android:layout_marginBottom="400dp"
        android:text="@string/no_telp"
        android:textColor="#020202" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="250dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="400dp"
        android:layout_marginTop="430dp"
        android:layout_marginEnd="400dp"
        android:layout_marginBottom="400dp"
        android:text="@string/no_telp_kamu"
        android:textColor="#020202" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="250dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="400dp"
        android:layout_marginTop="480dp"
        android:layout_marginEnd="400dp"
        android:layout_marginBottom="400dp"
        android:text="@string/follow_me_on_my_social_media"
        android:textColor="#020202" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="250dp"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="535dp"
        android:layout_marginTop="506dp"
        android:layout_marginEnd="535dp"
        android:layout_marginBottom="535dp"
        android:contentDescription="@string/nama_picture"
        app:srcCompat="@drawable/nama_picture" />
</RelativeLayout>

MainActivity.Java


import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //menghilangkan action bar
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        getSupportActionBar().hide();

        //menampilkan layout activity_main.xml
        setContentView(R.layout.activity_main);
    }
}

8. Jangan lupa untuk menambahkan gambar sesuai dengan kebutuhan kamu di dalam folder gradle.

Caranya yaitu dengan mengcopy gambar pada folder di pc kamu, kemudian klik paste pada aplikasi android studio.
tutorial android studio
Nantinya akan seperti ini jadinya, silahkan tambahkan gambar gambar yang kamu butuhkan!

tutorial android studio


Lalu tahap berikut nya adalah membuat foto menjadi bulat. Atau istilahnya Circle Image View

Circle Image View

Buka Gradle Scripts ->build.gradle (Module: app)

Pada dependencies masukan script

implementation 'de.hdodenhof:circleimageview:2.2.0'

Maka kode lengkap pada module:app gradle akan menjadi seperti berikut:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.lukmannudin.assosiate.circleimage"
        minSdkVersion 19
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'de.hdodenhof:circleimageview:2.2.0'
}

Berikutnya silahkan klik sycn now pada sebelah kiri

Maka hasil dari coding diatas akan menjadi sebagai berikut:





Share This :
SUBSCRIBE TO OUR NEWSLETTER

Add Your Comments

bold <b>b</b>
italic <i>i</i>
underline <u>u</u>
HTML<code></code> use Parser

Emoticon
Parser
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻