Android - nakładka ImageView innego ImageView

Question

Chciałbym, aby nakładka ImageView następnej ImageView w ten sposób; tylko połowa okręgu zieleni jest nakładanie obrazu:

Próbowałem, używając RelativeLayout i umieścić zarówno ImageView wewnątrz. Następnie nakładam okrąg na obraz za pomocą android:layout_alignBottom. Nakładało się na niego, ale nie mam pojęcia, jak ustawić przesunięcie, aby tylko połowa okręgu pokryła obraz bazowy.

EDIT:

Niestety, tu jest mój układ kodu xml

<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

Zastosowanie layout_marginTop = -20dp (połowę swojego rozmiaru obrazu). To pójdzie w górę.

android:layout_marginTop="-20dp"

Answer 2

polecam użyć framelayout z tymi dwoma obrazami.

z odświeżonym obrazem u dołu i wentylatorem stołu u góry.

Uwaga: Ponieważ framelayout zachowuje się jak stos, element u dołu pojawi się u góry.

Ustaw i ustaw grawitacyjność ikony odświeżania na dolną | środkową, aby wyglądała w ten sposób.

<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

put zarówno obraz w układzie względna najpierw zdefiniować obraz, który chcesz umieścić za zielone kółko niż określają zielone kółko jak

android:layout_alignBottom="@+id/Image1" 

niż wyregulować pozycję dając margines do zielony okrąg obrazu.

Answer 4

Wypróbuj w następujący sposób: Po prostu zmień layout_width i layout_height zgodnie z potrzebami.

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

Będzie to wyglądać tak:

Answer 5

dostaję mnóstwo upvote tego answer.So staram się poprawić tę odpowiedź. Być może jest to lepszy sposób na porównanie z dwoma innymi, ponieważ to rozwiązanie nie wymaga poprawiania układu ani dzielenia ekranu w równej części, więc może to być lepsze.

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

Alternatywny sposób Spróbuj

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

jej wyglądać tak

znaleziono jeszcze rozwiązania tego (Edit) jeśli duży rozmiar obrazu jest stała wysokość cię można wypróbować ten

<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

nadzieję, że help.Good Luck

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

myślę, że to powinno pomóc mam edytować swój kod i dokonała zmian jak poniżej
- zmienić krąg imageview wysokość do 40pp, a następnie daję margines górny -20 dp, aby obraz nakładał się w połowie tak, jak potrzebujesz na obrazie tła.

nie uruchomić ten kod, więc jeśli napotkają żadnych problemów po prostu daj mi znać, mam nadzieję, że to działa dobrze dla ciebie ..

Answer 7

Screenshot:

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

Polecam d Constraintlayout zapewnia doskonałą kontrolę nad pozycjonowaniem poszczególnych elementów widoku. Próbka oparta na poniższym przykładzie

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