Assalamualaikum...

Hai...sahabat blogger developer ... Maaf sebelumnya Lama gak post di blog ini, dari kemaren banyak kesibukan pribadi jadi lama tidak update blog ini,...

Pada Kesempatan kali ini saya mau post cara buat Daraw Layout UI Android studio  dengan simple dan insyaallah mudah dipahamin ....

Layout Daraw ini adalah layout kesukaan saya dan pada saat ini saya ngelayout ini yang mana contennya biasa saya kasih tentang sejarah, dan ebook dll, all open source content....

Baiklah langsung saja tampa basa basi lagi mari kita langsung ikuti cara buat layout  darawernya ok :D



Langkah pertama buat  project baru seperti biasa New Project_Next

Langkah ke dua kasih Name project, terserah teman teman mau ngasih nama aplikasi apa saja ...:D

Langkah ke tiga  Pilih device minimal  Device API 15 , Recomended kalau saya pakek API 15, jadi untuk teman teman terserah mau pilih device API apa saja, sesuai kebutuhan  teman teman.

Langkah ke empat Create Layout navigation_Drawer_Activity _Next_Finish 

 
Selanjutnya buat Butoon Di dalam conten_main.xml  dan didalamnya buat bungkus buttonnya dengan menggunakan  linearLayout_di tambah ScrollView didalamnya linearlayout  dan didalamnya scrollview tambah Linearlayout;

Langkah ke lima buat 3 drawable dengan nama style2,stayle3,stayleme dengan Klik kanan folder Drawable_Pilih New_Drawable resource file_dan name kasih, styleme,stayle2,stayle3_Finish.


Action Source Code style Drawableteman teman bisa tiru codingan dibawah dengan name yang sudah teman teman buat tadi....

 Stayleme.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color=" #81d4fa"/>
            <stroke android:color="#AFEEEE" android:width="2dp" />
            <!--corners allow us to make the rounded corners button-->
            <corners android:radius="15dp" />
        </shape>
    </item>
</selector>

Style2.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#e0f7fa"/>
        <stroke android:color="#AFEEEE" android:width="2dp" />
        <!--corners allow us to make the rounded corners button-->
        <corners android:radius="5dp" />
    </shape>
</item>
</selector>

Style3.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color=" #eceff1 "/>
            <stroke android:color="#AFEEEE" android:width="2dp" />
            <!--corners allow us to make the rounded corners button-->
            <corners android:radius="15dp" />
        </shape>
    </item>
</selector>


Action Source Code Conten, teman teman bisa ikuti codingan ini dan tinggal teman teman coding di androidnya dengan name.xml yang sudah ada di androidnya ....

Conten_main.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="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:background="@drawable/style2"
        tools:showIn="@layout/app_bar_main">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="@dimen/activity_vertical_margin"
        android:background="@drawable/style3"
        android:layout_margin="@dimen/activity_vertical_margin">

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



    <Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button1"
        android:background="@drawable/styleme"
        android:padding="@dimen/activity_horizontal_margin"
        android:layout_margin="@dimen/activity_horizontal_margin"/>

    <Button
        android:id="@+id/bt_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button2"
        android:background="@drawable/styleme"
        android:layout_margin="@dimen/activity_vertical_margin"/>

    <Button
        android:id="@+id/btn_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:background="@drawable/styleme"
        android:layout_margin="@dimen/activity_vertical_margin"/>
        <Button
            android:id="@+id/btn_4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:background="@drawable/styleme"
            android:layout_margin="@dimen/activity_vertical_margin"/>
        <Button
            android:id="@+id/btn_5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:background="@drawable/styleme"
            android:layout_margin="@dimen/activity_vertical_margin"/>
        <Button
            android:id="@+id/btn_6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:background="@drawable/styleme"
            android:layout_margin="@dimen/activity_vertical_margin"/>

        <Button
            android:id="@+id/btn_7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:background="@drawable/styleme"
            android:layout_margin="@dimen/activity_vertical_margin"/>
            <Button
                android:id="@+id/btn_8"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:background="@drawable/styleme"
                android:layout_margin="@dimen/activity_vertical_margin"/>

            <Button
                android:id="@+id/btn_9"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:background="@drawable/styleme"
                android:layout_margin="@dimen/activity_vertical_margin"/>
            <Button
                android:id="@+id/btn_10"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:background="@drawable/styleme"
                android:layout_margin="@dimen/activity_vertical_margin"/>
            </LinearLayout>
        </ScrollView>

    </LinearLayout>
</LinearLayout>

app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include
        android:id="@+id/include"
        layout="@layout/content_main"
        app:layout_anchor="@+id/fab"
        app:layout_anchorGravity="top|center" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="400dp"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        app:layout_anchor="@+id/include"
        app:layout_anchorGravity="bottom|center"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>


Demo:


Download aplikasi disini!!
Wa SourceCode :08230106779
Selamat mencoba... semoga bermanfaat Wassalam.....



Tags

Info Loker

Post a Comment

Post a Comment

Previous Post Next Post