I have added an ImageView and two TextFields to my Layout but when I look in the preview it just stays blank. It gives me the error "Rendering error". What can I do?
I will add my Layout file in the following:
<?xml version="1.0" encoding="utf-8"?>
<RealtiveLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorSlide_1" >
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/wireless"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:layout_marginTop="150dp"
android:id="#+id/img"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/slide_1_title"
android:textColor="android:color/white"
android:textSize="30sp"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_below="#+id/img"
android:layout_marginTop="12dp"
android:id="#+id/slide_title"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/slide_1_desc"
android:textColor="android:color/white"
android:textSize="18sp"
android:gravity="center_horizontal"
android:layout_below="#id/slide_title"
android:layout_marginTop="12dp"
android:id="#+id/slide_desc"
android:layout_marginRight="40sp"
android:layout_marginLeft="40sp"
/>
</RealtiveLayout>
Check this below changes:
<?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:background="#color/colorSlide_1"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/wireless"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:layout_marginTop="150dp"
android:id="#+id/img"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="45dp"//or you use wrap_content
android:text="#string/slide_1_title"
android:textColor="android:color/white"
android:textSize="30sp"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_below="#+id/img"
android:layout_marginTop="12dp"
android:id="#+id/slide_title"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/slide_1_desc"
android:textColor="android:color/white"
android:textSize="18sp"
android:gravity="center_horizontal"
android:layout_below="#id/slide_title"
android:layout_marginTop="12dp"
android:id="#+id/slide_desc"
android:layout_marginRight="40sp"
android:layout_marginLeft="40sp"
/>
</RelativeLayout>
Change RealtiveLayout to RelativeLayout in your root Layout.
Related
Hi, I'm trying to make something like this
And this is what I get
This is the xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_marginHorizontal="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/category_item_background"
android:clickable="true"
android:focusable="true"
android:layout_marginTop="50dp"
android:orientation="vertical"
android:paddingBottom="20dp">
<ImageView
android:id="#+id/planetImage"
android:layout_marginTop="-50dp"
android:layout_gravity="center_horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/earth_transparent"
/>
<TextView
android:id="#+id/planetName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"
android:textColor="#color/white"
android:text="Mars"
android:fontFamily="#font/assistant_extrabold"
android:textSize="30dp"/>
<TextView
android:id="#+id/planetViews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:fontFamily="#font/assistant_extrabold"
android:text="155 views"/>
</LinearLayout>
</LinearLayout>
The image is cropped and I can't figure out how to predict that.
I don't care about colour difference right now, I just want to set something, so it doesn't crop the image.
just put imageview outside
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#drawable/category_item_background"
android:clickable="true"
android:focusable="true"
android:orientation="vertical"
android:paddingBottom="20dp">
<TextView
android:id="#+id/planetName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="70dp"
android:fontFamily="#font/assistant_extrabold"
android:gravity="center_horizontal"
android:text="Mars"
android:textColor="#color/white"
android:textSize="30dp" />
<TextView
android:id="#+id/planetViews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/assistant_extrabold"
android:gravity="center_horizontal"
android:text="155 views" />
</LinearLayout>
<ImageView
android:id="#+id/planetImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:background="#color/black"
android:src="#drawable/earth_transparent" />
</RelativeLayout>
I am trying to build a layout with a right arrow and a vertical line with 2 textviews to right of it.
This layout will be used in a RecyclerView
This is the code that I am using,
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:clickable="true"
android:id="#+id/rootLayout"
>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_margin="#dimen/app_margin"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="4dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<android.support.v7.widget.AppCompatImageView
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="#drawable/right_arrow"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:id="#+id/right_arrow"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the result of the above layout
The blue line is not visible when I run the output on my device but is visible in XML as shown
My Questions
How do I make it visible in my device ?
The blue line is very big I tried wrap_content but still did not work
You can simply align your lineView upto the height of text views. otherwise it will grow upto the device height. Refer this sample.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
android:layout_margin="10dp"
app:cardBackgroundColor="#FFFFFF"
app:contentPadding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<View
android:id="#+id/view"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/linearLayout"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/view"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
<TextView
android:id="#+id/value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
</LinearLayout>
<ImageView
android:id="#+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/ic_keyboard_arrow_right_black_24px" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Screenshot of above example:
To fit the line according to content use this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<LinearLayout />
I'm trying to get the LinearLayout to be aligned at the bottom of this RelativeLayout. I tried setting alignParentBottom="true", but then I can't even see the contents of the LinearLayout. Is there another way to accomplish what I need?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="90dp"
android:layout_height="200dp"
android:minHeight="200dp"
android:background="#color/colorPrimaryDark"
android:elevation="2dp"
android:gravity="center">
<TextView
android:id="#+id/textView_bookName"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:padding="10dp"
android:textSize="20dp"
android:textColor="#color/white"
/>
<TextView
android:id="#+id/textView_bookAuthor"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="1dp"
android:text="Author"
android:textSize="10dp"
android:textColor="#color/white"
android:layout_below="#+id/textView_bookName"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/textView_bookAuthor"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_download_book"
android:text="#string/download"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_read_book"
android:text="Read"
android:visibility="gone"/>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/progressbar_book_download"
style="#android:style/Widget.ProgressBar.Horizontal"
android:progress="0"
android:visibility="gone"
/>
</LinearLayout>
</RelativeLayout>
Add to LinearLayout: android:layout_alignParentBottom="true"
eg.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_below="#+id/textView_bookAuthor">
[...]
<LinearLayout
android:layout_alignParentBottom="true"
android:layout_height="100dp"
android:layout_width="wrap_content">
</LineaLayout>
Try using a LinearLayout that contains both layouts and setting them an android:layout_weight and android:layout_height="0dp".
Don't forget to set the ratio between the weights to one you'd like and setting the container's android:orientation to vertical.
BTW, for textSize you better use sp and not dp...
Please try below xml which I have modified. It will solve the issue. I have removed the android:layout_below="#+id/textView_bookAuthor" and added android:layout_alignParentBottom="true".
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="90dp"
android:layout_height="200dp"
android:minHeight="200dp"
android:background="#color/colorPrimaryDark"
android:elevation="2dp"
android:gravity="center">
<TextView
android:id="#+id/textView_bookName"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:padding="10dp"
android:textSize="20dp"
/>
<TextView
android:id="#+id/textView_bookAuthor"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="1dp"
android:text="Author"
android:textSize="10dp"
android:layout_below="#+id/textView_bookName"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_download_book"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_read_book"
android:text="Read"
android:visibility="gone"/>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/progressbar_book_download"
style="#android:style/Widget.ProgressBar.Horizontal"
android:progress="0"
android:visibility="gone"
/>
</LinearLayout>
</RelativeLayout>
I am trying to obtain this:
but I was only able to obtaing this:
using this layout:
<?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" >
<!--android:background="#mipmap/background_poly"-->
<RelativeLayout android:id="#+id/headerL"
android:layout_width="match_parent" android:layout_height="100dp"
android:background="#color/account_grey_200">
</RelativeLayout>
<RelativeLayout android:id="#+id/account_det"
android:layout_width="match_parent" android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/usrAvatar"
android:layout_width="90dp" android:layout_height="90dp"
android:src="#mipmap/aka"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="38dp"/>
<TextView android:id="#+id/usrName"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:text="CrisRe"
android:textColor="#000000" android:textSize="14sp" android:textStyle="normal"
android:layout_toEndOf="#id/usrAvatar"
android:layout_toRightOf="#id/usrAvatar"
android:layout_alignTop="#id/usrAvatar" />
<!--android:layout_alignBaseline="#id/usrAvatar"-->
<TextView android:id="#+id/usrEmail"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="normal"
android:text="crisRe#mymail.com"
android:layout_alignLeft="#id/usrName"
android:layout_alignStart="#id/usrName"
android:layout_below="#id/usrName" />
</RelativeLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent"
android:layout_below="#+id/headerL"
android:background="#color/account_grey_400"/>
what's the matter? How can I overlap my CircleView on top of the two layouts?
I've also considered using a drawable layer-list but I wasn't able to make it work. This one seemed to be the easiest solution, though I am also considering other alternatives.
A slight modification in your xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- android:background="#mipmap/background_poly" -->
<RelativeLayout
android:id="#+id/headerL"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/account_grey_200" >
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/headerL"
android:background="#color/account_grey_400" />
<RelativeLayout
android:id="#+id/account_det"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/usrAvatar"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="38dp"
android:src="#mipmap/aka" />
<TextView
android:id="#+id/usrName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/usrAvatar"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:layout_toEndOf="#id/usrAvatar"
android:layout_toRightOf="#id/usrAvatar"
android:text="CrisRe"
android:textColor="#000000"
android:textSize="14sp"
android:textStyle="normal" />
<!-- android:layout_alignBaseline="#id/usrAvatar" -->
<TextView
android:id="#+id/usrEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/usrName"
android:layout_alignStart="#id/usrName"
android:layout_below="#id/usrName"
android:layout_marginTop="6dp"
android:text="crisRe#mymail.com"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="normal" />
</RelativeLayout>
Change the below code according to your requirements
<RelativeLayout
android:id="#+id/top_layout"
android:layout_width="match_parent"
android:background="#FFFF0000"
android:layout_height="100dp"></RelativeLayout>
<RelativeLayout
android:id="#+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_below="#+id/top_layout"
android:layout_marginTop="-45dp" //It should be half of the height
android:src="#drawable/ic_launcher" />
I have two image in layout .I want to show second image in bottom edge curve of first image .Can anybody tell how to do like overlay image
Thanks
Use FrameLayout :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageView
android:id="#+id/imgSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:src="#drawable/ic_launcher"/>
</FrameLayout>
Use a RelativeLayout, simple put the second ImageView below the first ImageView. Then what you have to do is to set the marginTop attribute of the second image to a negative value, and this value is the overlaying size, like this android:layout_marginTop="-1dp".
A sample code right below:
<?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"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/firstImage"
android:src="#drawable/myimage1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="-1dp"
android:layout_height="wrap_content"
android:id="#+id/secondImage"
android:layout_below="#+id/firstImage"
android:src="#drawable/myimage2"
/>
</RelativeLayout>
You can do it without Frames, only using RelativeLayout, if you make use of the alignParentalXXX tags as in the following example
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E4E3CE"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="75">
<ImageView
android:id="#+id/backgroundImageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#ffffff" />
<ImageView
android:id="#+id/imageView"
android:layout_width="66dp"
android:layout_height="66dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:background="#40000000"
android:gravity="center_vertical"
android:paddingHorizontal="3dp"
android:paddingVertical="1dp"
android:text="Header Text"
android:textColor="#ffffff"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
You can see how this layout looks like in the following image:
Use Frame Layout like sample below :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#android:color/black"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/ic_drawer"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="14dp"
android:src="#drawable/menu" />
<ImageView
android:id="#+id/ic_drawer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/textView1_detail"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:src="#drawable/ic_drawer" />
<TextView
android:id="#+id/textView1_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/imageView1"
android:text="Reports"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/overlay_favorite"
android:layout_width="215dp"
android:layout_height="134dp"
android:layout_gravity="right"
android:background="#drawable/overlay_favorite"
android:visibility="gone" />
</FrameLayout>
</LinearLayout>