Как сверстать подобный макет?

Question

[Alex Rubera]

Со всем справился, кроме изображения. Нужно, чтобы оно:

• занимало фиксированный размер, а то, что выходит за него, скрывалось (аналог background cover в html),
  
• выступало за края основного блока (аналог отрицательного marging в html).
  

Буду благодарен за подсказки.

Уточнение: сверстать нужно нативно в приложении под Android.

Comments

[automatik]

эээ, это изображение приподнято просто так или поднимается вверх при клике? если просто так, то нафиг такое делать, вводит пользователя в ступор.

[dhat]

automatik: что вы понимаете в материальном дизайне)))

Answer 1

[doctorcat]

codepen.io/anon/pen/VKazBQ

Comments

[aol-nnov]

угу, только ТС-у надо под андроид верстать, а не хтмл. тема ***** не раскрыта!

Answer 2

[bot8]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#D4D7DC"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="30dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="dark"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="20dp"
            android:text="Какой-то текст..."
            android:textSize="17dp"/>
    </android.support.v7.widget.CardView>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:weightSum="100">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:layout_marginBottom="-6dp"
            android:layout_marginTop="-6dp"
            android:src="@drawable/Desert" />
    </LinearLayout>
    <android.support.v7.widget.CardView
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="dark"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="20dp"
            android:text="Какой-то Другой текст..."
            android:textSize="17dp"/>
    </android.support.v7.widget.CardView>
</LinearLayout>

Comments

[Alex Rubera]

Логику понял. Проверю и отпишусь.

[xotta6bl4]

Только я бы сделал 1 кард вью.

[bot8]

xotta6bl4: Как?

Answer 3

[mitaichik]

Посмтори в сторону android:scaleType, там вроде что-то было подобное

Comments

[Alex Rubera]

Да, это свойство помогает растянуть картинку по ширине пропорционально. А вот как сделать так, чтобы она выходила за пределы родительского блока, пока загадка.

Answer 4

[Владимир]

у тебя должно быть так

<android.support.v7.widget.CardView
   <LinearLayout>
       <TextView/>
       <ImageView/>
       <TextView/>
   </LinearLayout>
</android.support.v7.widget.CardView>

Comments

[bot8]

В это случае картинка будет внутри карточки, и за ее рамки выходить не будет.

[Alex Rubera]

Именно. Такой вариант я уже проверял ранее.

Answer 5

[Alex Rubera]

От решения с двумя CardView, предложенного выше, пришлось отказаться, т.к. на мой взгляд это противоречит самой концепции CardView ("одна карточка - один CardView"). Поэтому заменил их на RelativeLayout и задал отступы примерно следующим образом:

<LinearLayout>
    <RelativeLayout
        ...
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp">
        <TextView />
        <TextView />
    </RelativeLayout>
    <ImageView />
    <RelativeLayout
        ...
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp">
        <TextView />
        <TextView />
    </RelativeLayout>
</LinearLayout>

Теперь думаю, как правильно приподнять картинку и отбросить тень. Пробую так:

<ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:elevation="2dp"
        android:background="@drawable/image_bg"/>

где

<!-- res/drawable/image_bg.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="2dip" android:color="#4e4e4e" />
</shape>

Но результат не тот.

Comments

[bot8]

Но что делать, если по другому сделать нельзя. Возможно что в примере который вы привели верстали при помощи двух CardView, однако я все же надеюсь что есть способ сверстать подобный макет не используя двух CardView.