Mahdi Hraybi Mahdi Hraybi - 3 years ago 199
Android Question

Dividing my cardview design issue

I am developing an app which i have to divide the cardview to 2 parts.

I have done this :

enter image description here

But i want to move my blue button to top as this image shows below and change the background color to grey :

enter image description here

This my custom layout code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:background="@color/Grey_300"
android:layout_width="match_parent"
android:layout_height="wrap_content">

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

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/Grey_50"
app:cardCornerRadius="3dp"
card_view:cardCornerRadius="0dp">



<RelativeLayout
android:layoutDirection="ltr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<ImageView
android:id="@+id/imageview_video"
android:layout_width="150dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_height="100dp" />

<TextView
android:id="@+id/txt_overimage"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="2dp"
android:paddingTop="2dp"
android:background="@color/myred"
android:textColor="@color/white"
android:textStyle="bold"
android:textSize="14sp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />



<TextView
android:id="@+id/txt_amazon_title"
android:layout_toRightOf="@+id/imageview_video"
android:layout_toEndOf="@+id/imageview_video"
android:layout_width="wrap_content"
android:textSize="15sp"
android:maxLength="100"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/txt_datetimevideo"
android:layout_toRightOf="@+id/imageview_video"
android:layout_toEndOf="@+id/imageview_video"
android:textColor="@color/Grey_500"
android:layout_below="@+id/txt_amazon_title"
android:textSize="14sp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<Button
android:id="@+id/bt_deal"
android:text="Voir le deal"
android:backgroundTint="@drawable/back_amazon"
android:textColor="@color/white"
android:textSize="14sp"
android:layout_below="@+id/txt_datetimevideo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<View
android:id="@+id/view_video"
android:layout_below="@+id/bt_deal"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider"
android:layout_marginTop="10dp"
/>

<ImageView
android:id="@+id/favorite"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:layout_below="@+id/view_video"
android:background="@drawable/favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>

</ScrollView>

</LinearLayout>


How can i do that ? Should i create another linearLayout and add the button inside the linearlayout ?

My updated code and image after adding linearlayout inside cardview :

enter image description here

updated code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:background="@color/Grey_300"
android:layout_width="match_parent"
android:layout_height="wrap_content">

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

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/Grey_50"
app:cardCornerRadius="3dp"
card_view:cardCornerRadius="0dp">

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

<RelativeLayout
android:id="@+id/rela1"
android:background="@color/Grey_300"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
android:id="@+id/bt_deal2"
android:text="Voir le deal"
android:backgroundTint="@drawable/back_amazon"
android:textColor="@color/white"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />

</RelativeLayout>


</LinearLayout>
<RelativeLayout
android:layoutDirection="ltr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<ImageView
android:id="@+id/imageview_video"
android:layout_width="150dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_height="100dp" />

<TextView
android:id="@+id/txt_overimage"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="2dp"
android:paddingTop="2dp"
android:background="@color/myred"
android:textColor="@color/white"
android:textStyle="bold"
android:textSize="14sp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />



<TextView
android:id="@+id/txt_amazon_title"
android:layout_toRightOf="@+id/imageview_video"
android:layout_toEndOf="@+id/imageview_video"
android:layout_width="wrap_content"
android:textSize="15sp"
android:maxLength="100"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/txt_datetimevideo"
android:layout_toRightOf="@+id/imageview_video"
android:layout_toEndOf="@+id/imageview_video"
android:textColor="@color/Grey_500"
android:layout_below="@+id/txt_amazon_title"
android:textSize="14sp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<Button
android:id="@+id/bt_deal"
android:text="I HIDE BUTTON FOR REMOVING AFTER"
android:backgroundTint="@drawable/back_amazon"
android:textColor="@color/white"
android:textSize="14sp"
android:visibility="gone"
android:layout_below="@+id/txt_datetimevideo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<View
android:id="@+id/view_video"
android:layout_below="@+id/bt_deal"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider"
android:layout_marginTop="10dp"
/>

<ImageView
android:id="@+id/favorite"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:layout_below="@+id/view_video"
android:background="@drawable/favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>

</ScrollView>

</LinearLayout>

Answer Source

Try adding both your linearlayouts inside a parent linearlayout with orientation vertical.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download