एंड्रॉइड - ImageView ओवरले एक और छवि दृश्य

Question

मैं ImageView एक और ImageView ओवरले करना चाहता हूं; वृत्त हरी का केवल आधा छवि डालने जाता है:

मैं RelativeLayout उपयोग करने की कोशिश की है और दोनों ImageView अंदर डाल दिया। फिर मैं android:layout_alignBottom का उपयोग करके छवि पर सर्कल को ओवरले करता हूं। इसने ओवरले किया लेकिन मुझे पता नहीं है कि ऑफ़सेट कैसे सेट करें ताकि सर्कल का केवल आधा आधार छवि को ओवरले कर रहा हो।

संपादित करें:

क्षमा करें, यहाँ मेरी लेआउट एक्सएमएल कोड

<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:layout_marginBottom="32sp" > 
     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:src="@drawable/ic_person_black" 
      android:adjustViewBounds="true" 
      android:id="@+id/image_view_product" /> 

     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignBottom="@id/image_view_product" 
      android:layout_centerHorizontal="true" 
      android:background="@drawable/image_view_circle" 
      android:src="@drawable/ic_circle" /> 

</RelativeLayout> 

Answer 1

उपयोग layout_marginTop = -20dp (अपनी छवि का आकार का आधा) है। यह ऊपर जाएगा।

android:layout_marginTop="-20dp"

Answer 2

मैं आप इन दो छवियों के साथ एक framelayout उपयोग करने के लिए सलाह देते हैं।

नीचे ताज़ा छविदृश्य और शीर्ष पर तालिका प्रशंसक के साथ।

नोट: जैसा कि framelayout एक ढेर की तरह व्यवहार करता है, नीचे की वस्तु शीर्ष पर दिखाई देगी।

और सेट को रीफ्रेश आइकन की गुरुत्वाकर्षण नीचे सेट करने के लिए सेट करें। इसे इस तरह से देखने के लिए केंद्र। की तुलना में

android:layout_alignBottom="@+id/Image1" 

हरे वृत्त को परिभाषित करने के लिए से मार्जिन देकर स्थिति को समायोजित

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <ImageView 
     android:src="@drawable/ic_fan" 
     android:scaleType="centerCrop" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent"/> 

    <ImageView 
      android:src="@drawable/ic_refresh" 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:gravity="center|bottom"/> 
</FrameLayout> 

Answer 3

डाल सापेक्ष लेआउट में दोनों छवि पहली छवि आप हरे रंग का गोला पीछे रखना चाहते हैं परिभाषित हरा सर्कल छवि।

Answer 4

इस तरह से प्रयास करें: बस अपनी आवश्यकता के अनुसार layout_width और layout_height बदलें।

<?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/viewOne" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="#126989" /> 

    <View 
     android:id="@+id/viewTwo" 
     android:layout_width="match_parent" 
     android:layout_height="70dp" 
     android:layout_below="@+id/viewOne" 
     android:background="#547866" /> 

    <View 
     android:layout_width="70dp" 
     android:layout_height="70dp" 
     android:layout_alignBottom="@+id/viewTwo" 
     android:layout_centerHorizontal="true" 
     android:background="#ff7800" 
     android:layout_marginBottom="35dp" /> 

</RelativeLayout> 

यह इस तरह दिखेगा:

Answer 5

मैं इस answer.So मैं है कि इसका जवाब सुधार करने की कोशिश के लिए वोट दें के बहुत मिलता है। हो सकता है कि यह दो अन्य की तुलना में करने का बेहतर तरीका हो, क्योंकि इस समाधान को लेआउट को ठीक करने या समान भाग में स्क्रीन को विभाजित करने की आवश्यकता नहीं है, इसलिए ऐसा करना बेहतर होगा।

<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="wrap_content" 
     android:background="@color/colorPrimary" 
     android:orientation="horizontal"> 

     <TextView 
      android:id="@+id/subject" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:padding="20dp" 
      android:text="Thi" 
      android:textColor="@android:color/white" 
      android:textSize="17sp" 
      /> 

    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/viewB" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/white" 
     android:orientation="horizontal"> 

     <TextView 
      android:id="@+id/description" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="20dp" 
      android:text="Thi" 
      android:textColor="@android:color/black" 
      android:textSize="17sp" 
      /> 
    </LinearLayout> 

</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/plus" 
    app:layout_anchor="@+id/viewA" 
    app:layout_anchorGravity="bottom|right|end"/> 

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

वैकल्पिक तरीका यह

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

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

    // this is your first layout to put the big image 
    // use src or backgroud image as per requirement 

    <LinearLayout 
     android:background="@color/red_error" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"> 

    </LinearLayout> 

    // this is your bottom layout 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"> 

    </LinearLayout> 
</LinearLayout> 

// This is the imageview which overlay the first LinearLayout 
<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/success" 
    android:adjustViewBounds="true" 
    android:layout_gravity="center"/> 
</FrameLayout> 

की तरह इस

कि (संपादित करें) के लिए एक और समाधान पाया अपने रूप का प्रयास करें यदि अपने बड़े छवि का आकार ऊंचाई आप तय हो गई है इस

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" > 

<RelativeLayout 
    android:id="@+id/layoutTop" 
    android:background="@color/red_error" 
    android:layout_width="match_parent" 
    android:layout_height="200dp" > 
</RelativeLayout> 

<RelativeLayout 
    android:id="@+id/layoutBottom" 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_alignParentBottom="true" 
    android:layout_below="@id/layoutTop" > 
</RelativeLayout> 

<ImageView 
    android:id="@+id/overlapImage" 
    android:layout_width="wrap_content" 
    android:layout_height="40dp" 
    android:layout_above="@id/layoutBottom" 
    android:layout_centerHorizontal="true" 
    android:layout_marginBottom="-20dp" 
    android:adjustViewBounds="true" 
    android:src="@drawable/testimage" /> 

</RelativeLayout> 

आज़मा सकते हैं

refernce: - Android: Placing ImageView on overlap between layouts

आशा इस होगा help.Good लक

Answer 6

<RelativeLayout 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:layout_marginBottom="32sp" > 

<ImageView 
android:id="@+id/ivBackground" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:src="@drawable/ic_person_black" 
android:adjustViewBounds="true" 
android:id="@+id/image_view_product" /> 

<ImageView 
android:layout_width="wrap_content" 
android:layout_height="40dp" 
android:layout_marginTop="-20dp" 
android:layout_below="@+id/ivBackground" 
android:layout_centerHorizontal="true" 
android:background="@drawable/image_view_circle" 
android:src="@drawable/ic_circle" /> 

मुझे लगता है यह आप की मदद करनी चाहिए मैं अपने कोड को संपादित किया है और
नीचे के रूप में परिवर्तन किए - मैं बदल सर्कल इमेजव्यू ऊंचाई 40 डीपी तक और फिर मैं मार्जिन टॉप -20 डीपी देता हूं ताकि छवि पृष्ठभूमि की आवश्यकता के अनुसार आधे ओवरले हो जाए।

मैं इस कोड ..

Answer 7

स्क्रीनशॉट नहीं चला, इसलिए यदि आप किसी भी मुद्दे का सामना सिर्फ मुझे पता है मैं तो यह आपके लिए अच्छी तरह से काम आशा करते हैं:

activity_main.xml :

<RelativeLayout 
      android:id="@+id/rl_image" 
      android:layout_width="match_parent" 
      android:layout_height="200dp"> 

      <ImageView 
       android:id="@+id/thumbnail" 
       android:layout_width="match_parent" 
       android:layout_height="160dp" 
       android:background="?attr/selectableItemBackgroundBorderless" 
       android:clickable="true" 
       android:contentDescription="null" 
       android:scaleType="fitXY" 
       android:src="@drawable/album9" /> 


      <ImageView 
       android:id="@+id/imageView_round" 
       android:layout_width="70dp" 
       android:layout_height="70dp" 
       android:layout_alignParentBottom="true" 
       android:layout_centerHorizontal="true" 
       android:src="@drawable/user_profile" /> 

     </RelativeLayout> 

Answer 8

मैं recommen डी Constraintlayout क्योंकि यह व्यक्तिगत दृश्य वस्तुओं की स्थिति पर उत्कृष्ट नियंत्रण देता है।

नीचे अपना उदाहरण के आधार पर नमूना

<android.support.constraint.ConstraintLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:id="@+id/parentLayout"> 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@drawable/ic_person_black" 
     android:adjustViewBounds="true" 
     android:id="@+id/image_view_product"/> 

    <View 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     app:layout_constraintTop_toBottomOf="@+id/image_view_product"/> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_alignBottom="@id/image_view_product" 
     android:layout_centerHorizontal="true" 
     android:background="@drawable/circle" 
     android:src="@drawable/ic_add_circle_green_24dp" 

     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent"/> 

</android.support.constraint.ConstraintLayout>