मैं दो विजेट / लेआउट के बीच नया "फ्लोटिंग एक्शन बटन" कैसे जोड़ सकता हूं

Question

मुझे लगता है कि आपने नए "फ्लोटिंग एक्शन बटन" उर्फ ​​"एफएबी" के साथ नए एंड्रॉइड डिज़ाइन दिशानिर्देश देखे हैं।

उदाहरण के लिए यह गुलाबी बटन:

मेरा सवाल बेवकूफी भरा लगता है, और मैंने पहले ही बहुत सी चीजों की कोशिश की है, लेकिन दो लेआउट के चौराहे पर इस बटन को लगाने का सबसे अच्छा तरीका क्या है?

उपरोक्त छूट में, यह बटन पूरी तरह से उस चीज़ के बीच रखा गया है जिसे हम एक इमेज व्यू और एक रिश्तेदार लाइटआउट होने की कल्पना कर सकते हैं।

मैंने पहले ही बहुत सारे ट्वीक किए हैं, लेकिन मुझे यकीन है कि इसे करने का एक उचित तरीका है।

Comments

आप लेआउट के अंदर लेआउट रख सकते हैं और उस लेआउट पर बटन को स्थिति में ला सकते हैं

— क्रोम पेंगुइन स्टूडियोज

मुझे लगता है कि यह लाइब्रेरी बहुत मदद कर सकती है: github.com/ksoichiro/Android-ObservableScrollView

— Android डेवलपर

स्क्रॉल करते समय इसे कैसे छिपाएं? मैं एक समस्या का सामना कर रहा हूं, जहां अगर मैं पृष्ठ को स्क्रॉल करता हूं, तो फैब शीर्ष पर रहता है और छिपता नहीं है! कृपया मदद करें

— अनीश कुमार

Answer 1

सर्वश्रेष्ठ प्रणालियां:

• compile 'com.android.support:design:25.0.1'फ़ाइल को वर्गीकृत करने के लिए जोड़ें
• CoordinatorLayoutरूट दृश्य के रूप में उपयोग करें ।
• layout_anchorFAB में जोड़ें और इसे शीर्ष दृश्य पर सेट करें
• layout_anchorGravityFAB में जोड़ें और इसे इसके लिए सेट करें:bottom|right|end

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:background="@android:color/holo_orange_light"
            android:orientation="horizontal"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

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

Comments

@ अप्रेंटिस मैं भी एक प्रशस्ति पत्र चाहूंगा लेकिन मैं देख सकता हूं कि ह्यूज जेफनर की तुलना में यह बेहतर जवाब क्यों है। मुझे यह सरल, अधिक लचीला, कम हैकिश लगता है। आप किसी भी लेआउट_हाइट या मार्जिन मान को हार्डकोड नहीं करते हैं, जो समय में भिन्न हो सकते हैं या गतिशील रूप से परिभाषित हो सकते हैं। ह्यूग का जवाब कुछ सरल मामलों में काम कर सकता है, और शायद कि पूरी तरह से समर्थन नहीं करते कुछ तीसरे पक्ष के पुस्तकालयों के लिए एक समाधान हो सकता है CoordinatorLayoutऔर layout_anchorऔर layout_anchorGravityसुविधाओं, एक की तरह वह उपयोग कर रहा है, futuresimples ।

— 13:00 पर acrespo

Btw फ्यूचर्सिमेंट्स एक AWESOME लाइब्रेरी है, और अगर कोई सोच रहा है कि एक कांटा है जो इस CoordinatorLayoutदृष्टिकोण को उस लाइब्रेरी के साथ जोड़ देता है, तो देखें । और पुराने संस्करणों के लिए एक कांटा भी है।

— acrespo

मैं वास्तव में इस के लिए देख रहा था। सादगी के लिए +1।

— एमिलियानो डी सैंटिस

Android के दस्तावेज़ में यह सब क्यों नहीं है?

— मुस्तफा

एप्लिकेशन का उपयोग करते हुए: Layout_anchor मुझे एक रेंडरिंग समस्या का कारण बना रहा है (लेनरलेआउट लेआउटपरैम को समन्वयकलेआउट के लिए नहीं डाला जा सकता है ।:(

— DAVIDBALAS1

Answer 2

इस उदाहरण में सबसे साफ तरीका है:

• किसी RelativeLayout का उपयोग करें
• 2 आसन्न विचारों को एक दूसरे के नीचे रखें
• FAB को माता-पिता के दाहिने / छोर पर संरेखित करें और एक सही / अंत मार्जिन जोड़ें
• शीर्ष लेख दृश्य के नीचे FAB को संरेखित करें और छाया सहित FAB के आधे आकार को एक नकारात्मक मार्जिन जोड़ें

उदाहरण के लिए shamanland कार्यान्वयन से अनुकूलित, जो भी FAB आप चाहते हैं का उपयोग करें। मान लें कि FAB छाया सहित 64dp उच्च है:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>

Comments

इस लेआउट ने मेरे लिए चाल चली! मैं वायदाFAB द्वारा उपयोग कर रहा हूँ - यह जोड़ना और उपयोग करना, आनंद लेना बहुत आसान है!

— रोमन

जैसे आपने कहा "2 आसन्न विचारों को एक दूसरे से नीचे रखें" -> यह वह समस्या थी जो मुझे मिली थी, मैंने अभी अनदेखी की है कि मेरे "कंटेनर-लेआउट" को कोष्ठक से मेल नहीं खाते हुए गड़बड़ किया गया था: डी धन्यवाद: पी

— मार्टिन फ़ेफ़र्ट

यह एक अच्छा उपाय नहीं है। नकारात्मक मार्जिन बटन के स्पर्श लक्ष्य के निचले आधे हिस्से को खत्म करने के लिए लगता है। अगर मैं फैब के निचले आधे हिस्से को दबाता हूं तो क्लिक पंजीकृत नहीं होती हैं।

— डोरोंज़

@ डोरोंज़ हम्म, मुझे वह समस्या नहीं लगती। क्या आपके विचार सही क्रम में हैं अर्थात FAB शीर्ष परत है?

— ह्यूग जेफनर

Android: Layout_marginBottom = "- 32dp" बटन के रैप_कंट के साथ हार्डकोड मूल्य खराब समाधान है

— लेस्टर

Answer 3

आप फ़ाइल> आयात नमूना ... पर क्लिक करके एंड्रॉइड स्टूडियो में Google की नमूना परियोजना को आयात कर सकते हैं ...

इस नमूने में एक फ़्लोटिंगएशनबटन दृश्य होता है जो फ्रेमलेयूट से विरासत में मिला है।

नई सहायता डिज़ाइन लाइब्रेरी के साथ संपादित करें जिसे आप इस उदाहरण में लागू कर सकते हैं: https://github.com/chrisbanes/cheesquare

Comments

इसे चलाने के लिए आपके पास android-21 होना चाहिए।

— यूलिया एशोमोक

यदि आप फ़्लोटिंगएशनबटन का उपयोग करना चाहते हैं तो आपको सपोर्ट डिज़ाइन लाइब्रेरी का उपयोग करना चाहिए। Google के चीज़केक को देखें।

— Roel

Answer 4

AppCompat 22 के साथ, पुराने उपकरणों के लिए FAB समर्थित है।

अपने build.gradle (ऐप) में नई सहायता लाइब्रेरी जोड़ें:

compile 'com.android.support:design:22.2.0'

तो आप इसे अपने xml में उपयोग कर सकते हैं:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

उपयोग elevationऔर pressedTranslationZगुणों के लिए, नामस्थान appकी आवश्यकता है, इसलिए इस नाम स्थान को अपने लेआउट में जोड़ें: xmlns:app="http://schemas.android.com/apk/res-auto"

Comments

appनामस्थान के बारे में जानकारी जोड़ें

— लुकाज़ 'सेवेरियन' ग्रीला

Answer 5

अब यह आधिकारिक डिज़ाइन सपोर्ट लाइब्रेरी का हिस्सा है।

आपकी श्रेणी में:

compile 'com.android.support:design:22.2.0'

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Comments

आपका उत्तर थोड़ा अस्पष्ट और अस्पष्ट है, क्या आप आगे बता सकते हैं कि डीएसएल का हिस्सा क्या है और शायद उस पृष्ठ से संबंधित जानकारी को उद्धृत करें।

— सुपरबीसमैन

क्षमा करें, मैंने बाहरी पुस्तकालयों के लिए बहुत सारे संदर्भ देखे हैं, इसलिए मैं आधिकारिक पुस्तकालय को इंगित करना चाहता था। पुस्तकालय केवल एक बटन बना सकता है, लेकिन स्थिति डेवलपर्स पर है। इसलिए मेरी पोस्ट बहुत प्रासंगिक नहीं है, क्षमा करें।

— वेरोनी

Answer 6

इस लाइब्रेरी को आज़माएँ ( javadoc यहाँ है ), न्यूनतम API स्तर 7 है:

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

यह थीम, xml या जावा-कोड के माध्यम से इसे अनुकूलित करने की क्षमता वाला एकल विजेट प्रदान करता है।

यह उपयोग करने के लिए बहुत सरल है। प्रचारित पैटर्न के अनुसार उपलब्ध normalऔर miniकार्यान्वयन हैं ।

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

डेमो ऐप को संकलित करने का प्रयास करें । प्रकाश और अंधेरे विषयों, के साथ प्रयोग: वहाँ संपूर्ण उदाहरण है ListView, दो दृश्य के बीच संरेखित ।

Comments

बस इस उत्तर को जोड़ने के लिए ^ आप अन्य उपलब्ध बैकपोर्ट पुस्तकालयों का उपयोग भी कर सकते हैं जैसे: github.com/FaizMalkani/FloatingActionButton , और github.com/makovkastar/FloatingAutButton । दोनों को लग सकता है कि वे अधिक समर्थन करेंगे। लेकिन इस उत्तर में सूचीबद्ध स्रोत से विस्तार से देखें। बहुत अच्छा काम करता है।

— जॉन शेली

क्या यह आधिकारिक पुस्तकालय है?

— Cocorico

कोई आधिकारिक पुस्तकालय नहीं है। यह एक खुला स्रोतों के साथ मेरा काम है।

— ओलेक्सी के।

यह फ्लोटिंग एक्शन बटन एक बुरा उदाहरण है कि इसे कैसे लागू किया जाए। यह वास्तविक सामग्री डिज़ाइन दिशानिर्देशों का पालन नहीं करता है।

— माइकल

@ माइक मिल्खा, इस काम में क्या खराबी है? कौन सी आवश्यकताएँ संतुष्ट नहीं हैं?

— ओलेक्सी के।

Answer 7

यहां Android के लिए एक एडिशनल फ्री फ्लोटिंग एक्शन बटन लाइब्रेरी है । इसके कई अनुकूलन हैं और इसके लिए SDK संस्करण 9 और उच्चतर की आवश्यकता है

फुल डेमो वीडियो

dependencies {
    compile 'com.scalified:fab:1.1.2'
}

Comments

सवाल है नहीं कैसे आप एक फैब का उपयोग करते हैं , लेकिन आप कैसे करते हैं स्थिति यह इतना है कि यह फैला दो दृश्य। आह।

— स्कॉट बिग्स

Answer 8

राउंडेड xml बैकग्राउंड देकर TextView का उपयोग करके इसे सरल जोड़ना फ्लोटिंग एक्शन बटन रखें। - com.android.support:design:23.1.1फ़ाइल को संकलित करने के लिए संकलन जोड़ें

• रूट व्यू के रूप में समन्वयकलेयआउट का उपयोग करें।
• समन्वयक समाप्त करने से पहले एक टेक्स्ट दृश्य प्रस्तुत करें।
• ड्रॉबल के अंदर एक सर्कल बनाएं।

सर्कल Xml है

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/colorPrimary"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

लेआउट 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

    <RelativeLayout
        android:id="@+id/viewA"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1.6"
        android:background="@drawable/contact_bg"
        android:gravity="center_horizontal|center_vertical"
        >
        </RelativeLayout>

    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="3.4"
        android:orientation="vertical"
        android:padding="16dp"
        android:weightSum="10"
        >

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            >
            </LinearLayout>

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Name"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/name"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Ritesh Kumar Singh"
                android:singleLine="true"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Phone"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/number"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="8283001122"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Email"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="[e-mail]"
                android:textSize="22dp"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

        </LinearLayout>


        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="City"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Panchkula"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>


    <TextView
        android:id="@+id/floating"
        android:transitionName="@string/transition_name_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="16dp"
        android:clickable="false"
        android:background="@drawable/circle"
        android:elevation="10dp"
        android:text="R"
        android:textSize="40dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom"/>

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

यह कैसे दिखेगा के लिए यहाँ क्लिक करें

Answer 9

इसे अपनी ग्रेडल फ़ाइल में जोड़ें

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

यह आपकी गतिविधि_मैं। Xml

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

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

आप http://www.ahotbrew.com/android-floating-action-button/ पर डाउनलोड करने के लिए एंड्रॉइड स्टूडियो प्रोजेक्ट के साथ पूरा उदाहरण पा सकते हैं

Answer 10

यहां वर्किंग कोड है।

मैं अपने चल एटनबटन को लंगर देने के लिए appBarLayout का उपयोग करता हूं।आशा है कि यह उपयोगी हो सकता है।

XML CODE

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="192dp"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                android:id="@+id/toolbarItemDetailsView"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                android:orientation="vertical"
                android:focusableInTouchMode="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    android:visibility="gone"
                    android:layout_marginTop="56dp"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/third" />


                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:orientation="vertical">

                        <android.support.v7.widget.CardView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_margin="8dp"
                                android:padding="3dp">


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


                                    <TextView
                                        android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:text="Title" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:layout_marginTop="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Shope Name" />

                                        <TextView
                                            android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:gravity="right"
                                            android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        android:layout_width="match_parent"
                                        android:minLines="5"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:layout_marginTop="16dp"
                                        android:text="description" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginBottom="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Qunatity" />

                                        <TextView
                                            android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:layout_weight="1"
                                            android:gravity="right"
                                            android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginRight="4dp"
                                        android:layout_weight="1"
                                        android:gravity="right"
                                        android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginEnd="@dimen/_6sdp"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_height="wrap_content" />

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

अब यदि आप कोड से ऊपर पेस्ट करते हैं। आप अपने डिवाइस पर निम्नलिखित परिणाम देखेंगे।