Membuat View dan ViewGroup


hello temen2,
yuk kita belajar membuat view dan view group di android studio

1. langkah pertama kita menambahkan library image circle di gradle script > build.gradle(Module App)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.example.myviewandviews"
        minSdkVersion 15
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    implementation 'de.hdodenhof:circleimageview:3.0.0'
}


2. langkah kedua kita akan membuat layoutnya di main activity.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/pixel_google"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginLeft="16dp"
                android:layout_marginBottom="16dp"
                android:background="#4D000000"
                android:drawableLeft="@drawable/ic_collections_white_18dp"
                android:drawablePadding="4dp"
                android:drawableStart="@drawable/ic_collections_white_18dp"
                android:gravity="center_vertical"
                android:padding="8dp"
                android:text="@string/dummy_photos"
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:textColor="@android:color/white"/>
        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="32sp"
            android:text="@string/dummy_value"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:textColor="@android:color/black"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/stock"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/content_text"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:lineSpacingMultiplier="1"
            android:textColor="@android:color/black"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/specification"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"/>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="16dp"
                    android:layout_marginEnd="16dp"
                    android:textSize="14sp"
                    android:text="@string/display"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/content_specs_display"
                    android:textColor="@android:color/black"/>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="16dp"
                    android:layout_marginEnd="16dp"
                    android:textSize="14sp"
                    android:text="@string/size"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/content_specs_size"
                    android:textColor="@android:color/black"/>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="16dp"
                    android:textSize="14sp"
                    android:layout_marginRight="16dp"
                    android:text="@string/battery"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/content_specs_battery"
                    android:textColor="@android:color/black"/>
            </TableRow>

        </TableLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/seller"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp">

            <de.hdodenhof.circleimageview.CircleImageView
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:src="@drawable/photo_2"
                android:layout_centerVertical="true"
                android:id="@+id/profile_image"
                android:layout_marginEnd="16dp"
                android:layout_marginRight="16dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/profile_image"
                android:layout_toEndOf="@+id/profile_image"
                android:text="@string/my_name"
                android:textColor="@android:color/black"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/buy"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"/>



    </LinearLayout>


</ScrollView>

3. langkah ketiga kita buat stringnya di res > value > strings

<resources>
    <string name="app_name">MyViewAndViews</string>
    <string name="content_text">Google officially announced its much-anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US, where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>
    <string name="content_specs_display">5.0 inches\n
    FHD AMOLED at 441ppi\n
    2.5D Corning® Gorilla® Glass 4</string>
    <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>
    <string name="content_specs_battery">2,770 mAh battery\n
    Standby time (LTE): up to 19 days\n
    Talk time (3g/WCDMA): up to 26 hours\n
    Internet use time (Wi-Fi): up to 13 hours\n
    Internet use time (LTE): up to 13 hours\n
    Video playback: up to 13 hours\n
    Audio playback (via headset): up to 110 hours\n
    Fast charging: up to 7 hours of use from only 15 minutes of charging</string>
    <string name="dummy_photos">6 Photos</string>
    <string name="dummy_value">$735</string>
    <string name="stock">Stock hanya 5 buah</string>
    <string name="specification">Spesifikasi</string>
    <string name="display">Display</string>
    <string name="battery">Battery</string>
    <string name="seller">Di jual oleh</string>
    <string name="my_name">Narendra Wicaksono</string>
    <string name="buy">Beli</string>
    <string name="size">Size</string>

</resources>

4. langkah terakhir , kita buat main activitynya seperti berikut..

package com.example.myviewandviews;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        if (getSupportActionBar() != null){
            getSupportActionBar().setTitle("Google Pixel");
        }
    }
}

dan bila sudah di run, maka akan tampil seperti berikut...







Komentar

Postingan populer dari blog ini

Relay lampu menggunakan NodeMCU

Kode program (sketch) DHT11 di Arduino Uno

Kode program ( sketch ) sensor infrared di Arduino Uno with buzzer