Style dan Theme di Android Studio

-

Hello temen2,
yuk kita lanjut, bagaimana kalo, kita memakai style di projek kita kemarin,
yuk kita buat...

1. langkah pertama, atur colors.xml di res > valeus > colors

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#607D8B</color>
    <color name="colorPrimaryDark">#455A64</color>
    <color name="colorAccent">#FF5722</color>
    <color name="colorSubTitle">#757575</color>
</resources>

2. langkah kedua, kita buat stylenya di res > values > style

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- 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="TextContent" parent="@style/TextAppearance.AppCompat">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">16dp</item>
        <item name="android:layout_marginRight">16dp</item>
    </style>

    <style name="TextContent.Small">
        <item name="android:textAppearance">@style/TextAppearance.AppCompat.Small</item>
    </style>

    <style name="TextContent.Subtitle">
        <item name="android:textColor">@color/colorSubTitle</item>
        <item name="android:textSize">12sp</item>
    </style>

    <style name="TextContent.Black">
        <item name="android:textColor">@android:color/black</item>
    </style>

    <style name="TextSpec">
        <item name="android:textSize">14sp</item>
    </style>

    <style name="TextSpec.Field">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginRight">16dp</item>
        <item name="android:textColor">@color/colorSubTitle</item>
    </style>

    <style name="TextSpec.Value">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textColor">@android:color/black</item>
    </style>

    <style name="ButtonGeneral" parent="@style/Widget.AppCompat.Button.Colored">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginRight">16dp</item>
        <item name="android:layout_marginLeft">16dp</item>
        <item name="android:layout_marginBottom">16dp</item>
    </style>

</resources>

3. langkah ketiga, kita masukan style yang kita buat ke dalam layout..

<?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
                style="@style/TextContent.Small"
                android:layout_gravity="bottom"
                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:textColor="@android:color/white"/>
        </FrameLayout>

        <TextView
            style="@style/TextContent.Black"
            android:text="@string/dummy_value"
            android:textSize="32sp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"/>

        <TextView
            style="@style/TextContent.Subtitle"
            android:text="@string/stock"
            android:layout_marginBottom="16dp"/>

        <TextView
            style="@style/TextContent"
            android:text="@string/content_text"
            android:layout_marginBottom="16dp"
            android:lineSpacingMultiplier="1"
            android:textColor="@android:color/black"/>

        <TextView
            style="@style/TextContent.Subtitle"
            android:text="@string/specification"
            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
                    style="@style/TextSpec.Field"
                    android:text="@string/display"/>

                <TextView
                    style="@style/TextSpec.Value"
                    android:text="@string/content_specs_display"/>
            </TableRow>

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

                <TextView
                    style="@style/TextSpec.Field"
                    android:text="@string/size"/>

                <TextView
                    style="@style/TextSpec.Value"
                    android:text="@string/content_specs_size"/>
            </TableRow>

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

                <TextView
                    style="@style/TextSpec.Field"
                    android:text="@string/battery"/>

                <TextView
                    style="@style/TextSpec.Value"
                    android:text="@string/content_specs_battery"/>
            </TableRow>

        </TableLayout>

        <TextView
            style="@style/TextContent.Subtitle"
            android:text="@string/seller"
            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
                style="@style/TextContent"
                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
            style="@style/ButtonGeneral"
            android:text="@string/buy"/>



    </LinearLayout>


</ScrollView>

dan bila sudah maka tampilannya akan menjadi seperti ini...
























Komentar

Posting Komentar

Postingan populer dari blog ini

Relay lampu menggunakan NodeMCU

-
Gambar
Relay lampu menggunakan NodeMCU lewat Blynk Hey temen2, kalo kemarin kita sudah bisa menyalakan lampu LED secara otomatis, nah pasti ada yang nanya, " kak kalo mau nyala matiin lampu beneran di rumah gimana kak?"  tenang guys! sekarang mimin mau ngasih tutorialnya yuk simak baik2 1. Komponen yang dibutuhkan NodeMCU Relay  Kabel Jumper Kabel USB Terminal Arduino  https://www.arduino.cc/en/main/software aplikasi Blynk  https://play.google.com/store/apps/details?id=cc.blynk&hl=en_US Terminal Kuningan Lampu 2. Ikuti langkah2 berikut ini sambungkan kabel jamper relay ke NodeMCU sambungkan jumper Relay GND                          dengan G di node MCU sambungkan jumper Relay VOC                          dengan 3V di node MCU sambungkan jumper Relay IN1                                dengan D1 di nodeMCU Siapkan terminal kuningan dan potong salah satu kabel terminal dan sambungkan ke relay K1           " potongan pertama
Baca selengkapnya

Kode program (sketch) DHT11 di Arduino Uno

-
Gambar
Buat kamu yang mau membuat script DHT11 dengan Arduino Uno bisa lihat script berikut... #include "DHT.h" //fungsi ini untuk memasukkan library DHT11 #define DHTPIN 1 // menunjukkan PINnya di 1 #define DHTTYPE DHT11 //type dhtnya DHT11 DHT dht(1, DHT11); void setup() {   Serial.begin(9600); //kecepatan masuknya data ke arduino 9600 bps   Serial.println(F("DHT11 test!")); //untuk mencetak di serial monitor   dht.begin(); // menjalankan sensor dht } void loop() {   delay(2000);//kok dikasih delay? biar siap menerima data   float h = dht.readHumidity();// membaca kelembapan disimpan di variabel h   float t = dht.readTemperature();//membaca temperatur disimpan di variabel t                                                    //kok pakefloat, karena bisa nerima data desimal   if (isnan(h) || isnan(t)) { //isnan itu is no a number     Serial.println(F("Failed to read from DHT sensor!")); //untuk mencetak di serial monitor menurun    
Baca selengkapnya

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

-
Gambar
Hello temen2 Buat kamu yang mau buat projek sensor jarak atau smart parking, bisa melihat tutorial di bawah ini... #define sensor 7 #define buzzer 2 void setup() {   Serial.begin(9600);   pinMode(sensor, INPUT);   pinMode(buzzer, OUTPUT); } void loop() {   int data = digitalRead(sensor);   if (data == 0) {     digitalWrite(buzzer,HIGH);     delay(500);   } else {     digitalWrite(buzzer,LOW);     delay(500);   } }
Baca selengkapnya