Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS



Selamat Siang kali ini kita akan membuat Div bubble dengan menggabungkan bentuk persegi panjang dan segitiga kemudian pinggiranya diberi border dan hasilnya seolah-olah hanya satu bentuk. div buble ini bisa digunakan untuk menampilkan komentar, untuk chat bubble dll.
langsung saja, ini scriptnya:

<!DOCTYPE html>
<html>
<head>
                <title>Div Bubble Box</title>
                <style type="text/css">
                                body {
                                                background-color: #de302f;
                                                font-family: sans-serif;
                                                font-size: 14px;
                                                line-height: 1.4;
                                                color: #fff;
                                                font-weight: 100;
                                }
                                .container {
                                                position: relative;
                                                margin: 50px auto;
                                                max-width: 600px;
                                                height: auto;
                                                border: 2px solid #fff;
                                                padding: 30px;
                                                box-sizing: border-box;
                                }
                                .container:after {
                                                position: absolute;
                                                width: 50px; height: 50px;
                                                content: '';
                                                transform: rotate(45deg);
                                                margin-top: -25px;
                                                background-color: #de302f;
                                }
                                .satu:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 100%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                                .dua:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: 50%;
                                                left: 0%;
                                                margin-left: -27px;
                                                content: '';
                                }
                                .tiga:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 50%;
                                                right: 0%;
                                                margin-right: -27px;
                                                content: '';
                                }
                                .empat:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: -2%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                </style>
</head>
<body>
                <div class="container satu">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container dua">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor      sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container tiga">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container empat">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
</body>
</html>


Sekianlah tutorial kali, selamat mencoba, semoga bermanfaat. jika ada yang kurang jelas silakan ditanyakan pada komentar dibawah.

Cara Membuat Launcher Sendiri di Android Studio (updated)

Bagi anda yang bosan dengan launcher bawaan android anda yang itu-itu saja mungkin tutorial kali ini akan membantu, selain untuk dipakai sendiri launcher ini bisa anda jual di play store. pada kesempatan ini admin akan membahas cara pembuatan launcher sederhana di android studio



untuk membuatnya seperti biasa buatlah projek baru beri nama MyLauncher klik next sampe selesai
kemudian rubah style bawaan menjadi seperti ini:
<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>

   
<!--this is the main theme-->
   
<style name="AppTheme.Wallpaper" parent="Theme.AppCompat.Light.NoActionBar">
        <
item name="android:windowBackground">@android:color/transparent</item>
        <
item name="android:windowShowWallpaper">true</item>
        <
item name="android:navigationBarColor">@android:color/transparent</item>
        <
item name="colorPrimaryDark">@android:color/transparent</item>
    </
style>

</
resources>

kemudian di activity_main.xml buat sebuah button untuk mengakses halaman menu aplikasi
<?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="com.giviews.mylauncger.MainActivity">



    <TextView

        android:layout_marginTop="40dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="NEVER SETTLE"

        android:gravity="center"

        android:textColor="#fff"

        android:textSize="70sp"

        android:id="@+id/textView" />







    <ImageButton

        android:id="@+id/menu"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_alignParentBottom="true"

        android:layout_marginBottom="10dp"

        android:backgroundTint="#fff"

        android:scaleType="centerCrop"

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



    <TextClock

        android:id="@+id/textClock"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignEnd="@+id/menu"

        android:layout_alignRight="@+id/menu"

        android:layout_below="@+id/textView"

        android:layout_marginTop="46dp"

        android:fontFamily="sans-serif-condensed" />





</RelativeLayout>

kemudian buat item.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:padding="10dp">



    <ImageView

        android:id="@+id/icon"

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:scaleType="centerInside"/>



    <TextView

        android:id="@+id/name"

        android:layout_gravity="center"

        android:maxLines="1"

        android:maxLength="9"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="10dp" />



</LinearLayout>


kemudian buatlah activity_apps_list.xml kodenya seperti berikut:
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="#fff"    tools:context="com.giviews.mylauncger.AppsListActivity">

    <ListView        android:id="@+id/list"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_margin="10dp">

    </ListView>

</LinearLayout>

langkah selanjutnya buat activity_apps_grid nantinya activity ini akan menjadi halaman menu aplikasi
<?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="com.giviews.mylauncger.AppsGridActivity">



    <GridView

        android:id="@+id/grid"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:numColumns="4"

        android:columnWidth="100dp"

        android:gravity="center"

        android:horizontalSpacing="10dp"

        android:stretchMode="spacingWidth"

        android:verticalSpacing="10dp"

        android:dividerHeight="0dp">



    </GridView>



</RelativeLayout>

sekarang bagian java nya, masukan kode ini untuk item.java
package com.giviews.mylauncger;



import android.graphics.drawable.Drawable;



/**

 * Created by asus on 14/10/2017.

 */



public class Item {

    CharSequence label; //package name

    CharSequence name; //app name

    Drawable icon; //app icon

}

untuk MainActivity.java masukan kode berikut
package com.giviews.mylauncger;



import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.ImageButton;



public class MainActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        ImageButton menu = (ImageButton) findViewById(R.id.menu);

        menu.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Intent intent = new Intent(getApplicationContext(), AppsGridActivity.class);

                startActivity(intent);

            }

        });

    }

}

untuk AppsListActivity.java masukan kode berikut ini:
import android.content.Intent;
import android.content.pm.PackageManager;
import android.content.pm.ResolveInfo;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import org.w3c.dom.Text;

import java.util.ArrayList;
import java.util.List;

public class AppsListActivity extends AppCompatActivity {

    private PackageManager manager;
    private List apps;

    private ListView list;

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

        loadApps();
        loadListView();
        addClickListener();
    }

    private void loadApps(){
        manager = getPackageManager();
        apps = new ArrayList<>();

        Intent i = new Intent(Intent.ACTION_MAIN, null);
        i.addCategory(Intent.CATEGORY_LAUNCHER);

        List availableActivities = manager.queryIntentActivities(i, 0);
        for (ResolveInfo ri : availableActivities) {
            Item app = new Item();
            app.label = ri.activityInfo.packageName; //get app package            app.name = ri.loadLabel(manager); //get app name            app.icon = ri.loadIcon(manager); //get app icon            apps.add(app);
        }
    }

    private void loadListView(){
        list = (ListView) findViewById(R.id.list);

        ArrayAdapter adapter = new ArrayAdapter(this, R.layout.item, apps) {

            @NonNull            @Override            public View getView(int position, @Nullable View convertView, @Nullable ViewGroup parent) {
                if (convertView == null) {
                    convertView = getLayoutInflater().inflate(R.layout.item, null);
                }

                ImageView appIcon = (ImageView) convertView.findViewById(R.id.icon);
                appIcon.setImageDrawable(apps.get(position).icon);

                TextView appName = (TextView) convertView.findViewById(R.id.name);
                appName.setText(apps.get(position).name);

                return convertView;
            }
        };
        list.setAdapter(adapter);
    }

    private void addClickListener(){
        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override            public void onItemClick(AdapterView adapterView, View view, int position, long id) {
                Intent i = manager.getLaunchIntentForPackage(apps.get(position).label.toString());
                startActivity(i);
            }
        });
    }
}

kemudian untuk AppsGridActivity.java masukan kode ini
package com.giviews.mylauncger;



import android.content.Intent;

import android.content.pm.PackageManager;

import android.content.pm.ResolveInfo;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.ListView;

import android.widget.TextView;



import java.util.ArrayList;

import java.util.List;



public class AppsGridActivity extends AppCompatActivity {

    private PackageManager manager;

    private List<Item> apps;



    private GridView grid;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_apps_grid);



        loadApps();

        loadGridView();

        addClickListener();

    }



    private void loadApps(){

        manager = getPackageManager();

        apps = new ArrayList<>();



        Intent i = new Intent(Intent.ACTION_MAIN, null);

        i.addCategory(Intent.CATEGORY_LAUNCHER);



        List<ResolveInfo> availableActivities = manager.queryIntentActivities(i, 0);

        for (ResolveInfo ri : availableActivities) {

            Item app = new Item();

            app.label = ri.activityInfo.packageName; //get app package

            app.name = ri.loadLabel(manager); //get app name

            app.icon = ri.loadIcon(manager); //get app icon

            apps.add(app);

        }

    }



    private void loadGridView(){

        grid = (GridView) findViewById(R.id.grid);



        ArrayAdapter<Item> adapter = new ArrayAdapter<Item>(this, R.layout.item, apps) {



            @NonNull

            @Override

            public View getView(int position, @Nullable View convertView, @Nullable ViewGroup parent) {

                if (convertView == null) {

                    convertView = getLayoutInflater().inflate(R.layout.item, null);

                }



                ImageView appIcon = (ImageView) convertView.findViewById(R.id.icon);

                appIcon.setImageDrawable(apps.get(position).icon);



                TextView appName = (TextView) convertView.findViewById(R.id.name);

                appName.setText(apps.get(position).name);



                return convertView;

            }

        };

        grid.setAdapter(adapter);

    }



    private void addClickListener(){

        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {

                Intent i = manager.getLaunchIntentForPackage(apps.get(position).label.toString());

                startActivity(i);

            }

        });

    }

}

terakhir untuk AndroidManifest sesuaikan seperti ini
<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.giviews.mylauncger">



    <application

        android:allowBackup="true"

        android:icon="@mipmap/ic_launcher"

        android:label="@string/app_name"

        android:roundIcon="@mipmap/ic_launcher_round"

        android:supportsRtl="true"

        android:theme="@style/AppTheme">

        <activity

            android:name=".MainActivity"

            android:launchMode="singleTask"

            android:stateNotNeeded="true"

            android:theme="@style/AppTheme.Wallpaper">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />



                <category android:name="android.intent.category.HOME" />

                <category android:name="android.intent.category.DEFAULT" />

            </intent-filter>

        </activity>

        <activity

            android:name=".AppsListActivity"

            android:theme="@style/AppTheme.Wallpaper" />

        <activity android:name=".AppsGridActivity"></activity>

    </application>



</manifest>

Bila app ada tanda silang klik app -> edit configuration -> launch pilih Nothing


Selanjutnya jalankan pada hp android kesayangan anda jika launchernya bisa digunakan maka selamat anda telah berhasil membuat launcher sendiri, sekianlah tutorial kali ini selamat mencoba semoga bermanfaat jika ada yang kurang jelas silakan ditanyakan pada komentar, happy coding jika artikel ini bermanfaat silakan di share ke teman anda.


Membuat Background Particle dots yang atraktif dengan particles.js

Assalamualaikum. Wr. Wb, kali ini admin masih membahas tentang background, dan pada postingan kali ini admin mau berbagi tutorial membuat background titik particle yang atraktif dengan menggunakan particles.js, background ini sangat bagus karena memiliki animasi yang menarik dan interaktif ketika di hover atau di klik dengan mouse menampilkan feedback yang interaktif. sehingga backgroundnya tidak membosankan dan bisa dimainkan.




ok langsung saja untuk membuatnya masukan kode berikut:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Particle JS</title>
    <style media="screen">
    #particles-js{
      background: #0e0483;
      height: 100vh;
    }
    body {
      width: 100%;
      font: normal 16px Arial, Helvetica, sans-serif;
      color: #333;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #login {
      background: #fff;
      opacity: 0.9;
      padding: 2em;
      position: absolute;
      top: 200px;
      left: 150px;
    }
    #login h3 {
      color: #555555;
    }
    #login input[type="text"], #login input[type="password"] {
      padding: 7px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
    }
    #login input[type="submit"] {
      padding: 7px;
      background: rgb(5, 200, 118);
      color: #fff;
      border: none;
      opacity: 1;
      display: block;
      float: right;
    }
    </style>
  </head>
  <body>
    <div id="particles-js">
      <div id="login">
        <h3>Login</h3>
        <form action="#" method="post">
          <div>
            <label for="username">Username</label><br>
            <input type="text" name="" placeholder="Username">
          </div>
 
          <div>
            <label for="password">Password</label><br>
            <input type="password" name="" placeholder="Password">
          </div>
          <input type="checkbox" name=""> Ingat Saya
 
          <input type="submit" name="" value="Login">
        </form>
      </div>
    </div>
 
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      particlesJS.load('particles-js','particles.json', function() {
        console.log('particles.json loaded...');
      })
    </script>
  </body>
</html>

Kemudian buat lagi file dengan nama particles.json dengan isi sebagai berikut :
{
  "particles":{
    "number":{
      "value":300
    },
    "size":{
      "value":3
    }
  },
  "interactivity":{
    "events":{
      "onhover":{
        "enable":true,
        "mode": "repulse"
      }
    },
    "modes":{
      "repulse":{
        "distance":50,
        "duration":0.4
      }
    }
  }
}


Selanjutnya cek hasilnya di browser kesayangan anda, untuk demonya bisa kalian lihat pada tautan dibawah. sekianlah tutorial kali ini selamat mencoba salam koding otak pusing jari keriting. jangan lupa share  tutorial ini ke teman anda semoga bermanfaat, Wasalamualaikum Wr. Wb.