Проблема с выравниванием изображения

Question

Я хочу достичь своего макета с изображением и относительной компоновкой, как показано на рисунке.

Я пытался с этим кодом, но не работает.

<RelativeLayout 
    android:id="@+id/image" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/textview_ratting" 
    android:layout_margin="5dp"> 

    <de.hdodenhof.circleimageview.CircleImageView 
     android:id="@+id/imageView" 
     android:layout_width="70dp" 
     android:layout_height="70dp" 
     android:layout_centerHorizontal="true" 
     android:src="@drawable/icon"/> 
</RelativeLayout> 

Answer 1

Это сработало для меня ... Предоставьте отрицательный paddingTop равным половине размера изображения.

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center"> 
     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="200dp" 
      android:layout_marginTop="70dp" 
      android:background="@color/colorAccent" /> 
     <ImageView 
      android:id="@+id/widget_title_icon" 
      android:paddingTop="-70dp" 
      android:layout_width="140dp" 
      android:layout_height="140dp" 
      android:layout_gravity="top|center_horizontal" 
      android:adjustViewBounds="true" 
      android:contentDescription="@string/action_settings" 
      android:scaleType="fitStart" 
      android:src="@mipmap/ic_launcher" /> 
</FrameLayout> 

Answer 2

Мы обычно используем FrameLayout для этого случая:

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginTop="100dp" 
     android:background="@color/colorAccent"/> 

    <ImageView 
     android:id="@+id/widget_title_icon" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_gravity="top|center_horizontal" 
     android:adjustViewBounds="true" 
     android:scaleType="fitStart" 
     android:src="@mipmap/ic_launcher"/> 
</FrameLayout> 

Мы также можем играть с андроида: paddingTop = "- 10dp", как вам нравится.

См FrameLayout определения:

просмотры за детьми рисуются в стеке, с последним добавленным ребенком на вершине.

Надеется, что это поможет ....

Answer 3

Попробуйте этот код,

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/relCustomerEditProfile" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_centerVertical="true" 
    android:layout_marginTop="100dp"> 

    <LinearLayout 
     android:id="@+id/linRoot" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginLeft="30dp" 
     android:layout_marginRight="30dp" 
     android:layout_marginTop="50dp" 
     android:orientation="vertical"> 

     <RelativeLayout 
      android:id="@+id/relHeader" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

      <RelativeLayout 
       android:id="@+id/imgBackground" 
       android:layout_width="wrap_content" 
       android:layout_height="90dp" 
       android:layout_alignBottom="@+id/relProfile" 
       android:layout_centerHorizontal="true" 
       android:background="@drawable/bg_black"></RelativeLayout> 

      <RelativeLayout 
       android:id="@+id/relProfile" 
       android:layout_width="110dp" 
       android:layout_height="110dp" 
       android:layout_centerHorizontal="true"> 

       <de.hdodenhof.circleimageview.CircleImageView 
        android:id="@+id/imgViewProfilePhoto" 
        android:layout_width="90dp" 
        android:layout_height="100dp" 
        android:layout_centerHorizontal="true" 
        android:layout_marginBottom="40dp" 
        android:background="@drawable/red"></de.hdodenhof.circleimageview.CircleImageView> 

      </RelativeLayout> 
     </RelativeLayout> 

    </LinearLayout> 
</RelativeLayout> 

Настоящим я прилагаю скриншот,

Надеюсь, это поможет вам!

Answer 4

android:layout_marginTop="-35dp" -35dp - половина вашего размера изображения (70dp/2), но маржа в обратном направлении, поэтому используйте знак «-».

<RelativeLayout 
    android:id="@+id/image" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/textview_ratting" 
    android:layout_margin="5dp"> 

    <de.hdodenhof.circleimageview.CircleImageView 
     android:id="@+id/imageView" 
     android:layout_width="70dp" 
     android:layout_height="70dp" 
     android:layout_centerHorizontal="true" 
     android:layout_marginTop="-35dp" 
     android:src="@drawable/icon"/> 
</RelativeLayout> 

Answer 5

использовали FrameLayout, используя frameLayout вы можете это сделать.

Answer 6

Для этого вы должны использовать FrameLayout. FrameLayout обеспечивает многоуровневую компоновку для перекрытия элементов в пользовательском интерфейсе. Пример:

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

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:layout_gravity="center|center_horizontal" 
     android:background="@color/colorAccent" /> 
    <ImageView 
     android:id="@+id/widget_title_icon" 
     android:layout_width="140dp" 
     android:layout_height="140dp" 
     android:layout_marginBottom="100dp" 
     android:layout_gravity="center|center_horizontal" 
     android:src="@mipmap/ic_launcher" /> 
</FrameLayout> 

Arpan уже предложил аналогичный ответ. Он использует отступы и края обоих элементов, тогда как в этом используется плотность размещения и относительный запас ImageView. Это всегда будет размещать содержимое в центре экрана на всех устройствах.

ImageView(android:layout_marginBottom) = 0.5 * RelativeLayout(android:layout_height) 

Answer 7

circleimageview Пожалуйста, используйте и relativelayout как ребенок framelayout.

<FrameLayout 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="wrap_content"> 
<RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="100dp" 
       android:layout_marginBottom="0dp" 
       android:paddingBottom="0dp" 
       android:paddingTop="0dp"> 
</RelativeLayout> 

<de.hdodenhof.circleimageview.CircleImageView 
       xmlns:app="http://schemas.android.com/apk/res-auto" 
       android:id="@+id/cir_img_ptv" 
       android:layout_width="@dimen/cir_img_diameter_ptv" 
       android:layout_height="@dimen/cir_img_diameter_ptv" 
       android:layout_gravity="center|top" 
       android:layout_marginTop="@dimen/cir_img_top_margin_ptv" 
       android:scaleType="centerCrop" 
       android:src="@drawable/profile_user" 
       app:civ_border_color="@color/white" 
       app:civ_border_width="@dimen/cir_img_stroke_ptv" 
       app:civ_fill_color="@color/white" 
       app:civ_border_overlay="true"/> 

</FrameLayout>