How to create this View(layout)

Question

Actually i am working on a layout in which i have to put CardView on a ImageView and it only covers the half portion of a ImageView and also add one TextView(Check Attach Image).

Note:

I tried using FrameLayout and also with Relative Layout... and i achieved it but i don't think its a correct way because i hardcoded mostly paramters.

xml code :

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    <ImageView
    android:layout_width="match_parent"
    android:layout_height="170dp"
    android:layout_gravity="center"
    android:background="@drawable/background"
    android:id="@+id/picture">
</ImageView>

    <TextView
        android:text="TEXT VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="149dp"
        android:layout_marginStart="149dp"
        android:layout_marginTop="24dp"
        android:id="@+id/textView" />
    </FrameLayout>
</LinearLayout>

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="120dp"
    app:cardBackgroundColor="@color/textViewBackground"
    card_view:cardUseCompatPadding="true"
    android:layout_centerHorizontal="true"
    card_view:cardElevation="15sp"
    android:layout_marginTop="153dp" />

tell me in detail how do you want it to get implemented il send you the code accordingly. I had post that code before your edit — Kunal Parikh, Feb 15 '17 at 11:06
actually my code works perfectly but in my code i added `android:layout_marginTop="153dp"` in cardview... so it create differnce margin when i check on different mobile... so is there any way to avoid this problem — Dhruv Tyagi, Feb 15 '17 at 11:09

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

try this :

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@android:color/white"
    android:layout_alignParentTop="true"/>

<TextView
    android:layout_width="250dp"
    android:layout_height="50dp"
    android:layout_margin="20dp"
    android:layout_centerHorizontal="true"
    android:background="@color/colorAccent"/>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginTop="100dp"
    card_view:cardCornerRadius="8dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    card_view:cardBackgroundColor="@color/colorPrimary">


</android.support.v7.widget.CardView>
</RelativeLayout>

if you don't want to hardcode parameters then refer this link to get device width height at runtime

Get screen dimensions in pixels

and then you can use LayoutParams to set margins dynamically.

edited May 23 '17 at 11:53

Community

1
1

answered Feb 15 '17 at 10:58

Kunal Parikh

463
4
15

actually i don't want to hardcode the parameters( android:layout_height="200dp") – Dhruv Tyagi Feb 15 '17 at 11:03
oky so i have doubt, is der any need to create multiple screen size xml? – Dhruv Tyagi Feb 15 '17 at 11:18
@DhruvTyagi what you can do is you can use two views one of which will be match_parent in its width and android:layout_centerVertical="true" so this will divide your height in two parts then into upper half use the same method to further divide the upper half into two parts. Then you can make your imageview to alignParentTop and above your view so you want need to harcode values – Kunal Parikh Feb 15 '17 at 11:20
@DhruvTyagi yes you have to create multiple xml files and if you want me to send you the xml with view then tell me i will. – Kunal Parikh Feb 15 '17 at 11:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135759/discussion-between-kunal-parikh-and-dhruv-tyagi). – Kunal Parikh Feb 15 '17 at 11:33

score 0 · Answer 2 · answered Feb 15 '17 at 11:02

Hi check this I have edited your code

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="170dp"
                android:layout_gravity="center"
                android:background="@color/colorPrimary"
                android:id="@+id/picture">
            </ImageView>

            <TextView
                android:text="TEXT VIEW"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="149dp"
                android:layout_marginStart="149dp"
                android:background="@color/colorBlueColor"
                android:layout_marginTop="24dp"
                android:id="@+id/textView" />
        </FrameLayout>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="120dp"
            app:cardBackgroundColor="@color/textViewBackground"
            card_view:cardUseCompatPadding="true"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="100dp"
            card_view:cardElevation="15sp"
            android:layout_marginTop="100dp" />

    </RelativeLayout>



</LinearLayout>

score 0 · Answer 3 · answered Feb 15 '17 at 11:08

Try this way it will work

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:arc="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center" >

    <ImageView
        android:id="@+id/imageView1s"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/done" />

    <android.support.v7.widget.CardView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="-65dp"
        android:layout_below="@+id/imageView1s"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/app_name"
        android:scaleType="center"
      />

</RelativeLayout>

How to create this View(layout)

3 Answers3