How to position this in a coordinator layout? - android

I'm struggling with making a coordinator layout work. Can someone help me with this?
I just want a simple layout of :
NameLabel, AgeLabel
(Below) Profile pic
(Below)
TextLabel
(Below)
ImageView
instead I get this: and my ageLabel and nameLabel are god knows where.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeActivity">
<include
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/home_fb_pic_thumbnail"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="top|center"
/>
<TextView
android:id="#+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="name" />
<TextView
android:id="#+id/ageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="age" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="248dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="bottom"
android:onClick="startRecording"
app:srcCompat="#drawable/intro_camera_2" />
<TextView
android:id="#+id/introductionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:text="Introduce Yourself! Video Introductions Last 24 Hours"
android:textAppearance="#android:style/TextAppearance.Material.Medium" />

Those two text views will appear in the design tab if you can notice. But the problem is you haven't specified any constraints as to their placement like you have done for your other views. Place constraints to position them on screen where you want it to for example set left, right,top and bottom margins or align it below some images you already have.Hope that helps.

Related

How to center fit image in linear layout?

I have an xml screen with three children linear layouts in a parent linear layout of vertical orientation. First child contains an image view and when running the application I can not view any image. Why? is the image size too big?? If so.. how to scale it? However Image is view able in my design tab. of android stdudio. Below is my complete code for xml file.
<?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:id="#+id/activity_sign_up"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.root.my_laoder.SignUp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/ty"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
/>
</LinearLayout>
</LinearLayout>
1. Add attribute android:gravity="center_horizontal" to LinearLayout, to show ImageView in center.
2. Update ImageView width to android:layout_width="wrap_content" and remove attribute android:layout_gravity="center".
3. Use android:scaleType="fitXY" instead of android:scaleType="centerInside"
Try this:
<?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:id="#+id/activity_sign_up"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
</LinearLayout>
</LinearLayout>
OUTPUT:
what are the dimens values for these parameters?
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
and why you are using separate linearlayout for imageView even with parent layout as linear?
kindly remove that
have you checked the size of image you are using as a background in ImageView? if size is large than probably image is pushing your rest of your views out of the screen.try to give fixed width and height let's say 100dp for both and see if you are able to see anything.
If you wanna make imageView centre horizontally use in ImagView view
android:layout_gravity="center_horizontal"
above line of code will not work with separate linear layout for ImageView. If you are gonna use separate layout for ImageView anyway, use below line of code inside that linearlayout
android:gravity="center_horizontal"
Note: sorry I'm not able to leave a comment.
Try this for your ImageView:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#android:drawable/btn_minus" />
I think you missed scaleType of ImageView, Follow the steps to make your image center
1. Add attribute android:layout_gravity="center_horizontal" to show ImageView in center.
2. Set ImageView layout_width="match_parent" and
layout_height="#dimen/fixed_height"
==> height will be fixed but width will automatically adjust
according to device size
3. and set scaleType="fitEnd" or scaleType="fitCenter"
==> fitEnd is ( Scale the image from the end of the container ) and
possible to have space on top
if image is different each time.
==> fitCenter is (Scale the image from center) and possibility to
have space in top and bottom
Example:
<ImageView
android:id="#+id/cover_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fixed_height"
android:layout_gravity="center_horizontal"
android:scaleType="fitEnd" />

RelativeLayout or LinearLayout?

I am new to Android development, and I am unable to understand why it is not working as per desired output.
The desired output and the output I am getting are shown below as well as the ml layout.
Desired output
Achieved output
Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.caringhumans.rds.caringhumans.MainActivity">
<ImageView
android:id="#+id/logo"
android:src="#drawable/logo"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_toLeftOf="#+id/caring"/>
<TextView
android:id="#+id/caring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Caring Humans"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="25sp"
android:textColor="#f70f59"/>
<ImageView
android:id="#+id/child"
android:src="#drawable/child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/caring"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Campaign"
android:textColor="#f70f59"
android:textSize="22sp"
android:layout_below="#+id/child"/>
</RelativeLayout>
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawableLeft="#drawable/logo"
android:gravity="center"
android:text="Caring Humans"
android:textColor="#f70f59"
android:textSize="25sp" />
<ImageView
android:id="#+id/child"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/logo"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/child" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/child"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Campaign"
android:textColor="#f70f59"
android:textSize="22sp" />
</RelativeLayout>
The problem is with image trying fixing that and your problem can be resolved.
LinearLayouts are used for placing your Views in a linear shape, either in a row or in a column.
The latter seems to be what you are after.
RelativeLayouts are used when you want to place the positions of your Views in a non linear way, rather using a relation between them (toRightOf, above, or similar).
In order for the Imageview to really "wrap" around the image you are displaying you need to add these two attributes
android:scaleType="fitXY"
android:adjustViewBounds="true"
documentation: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
as for the parent layout here you should probably use LinearLayouts (you will need to add to them android:orientation="vertical" as the default one is horizontal)
Change your code to this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.caringhumans.rds.caringhumans.MainActivity">
<ImageView
android:id="#+id/logo"
android:src="#drawable/logo"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_toLeftOf="#+id/caring"/>
<TextView
android:id="#+id/caring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Caring Humans"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="25sp"
android:textColor="#f70f59"/>
<ImageView
android:id="#+id/child"
android:src="#drawable/child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/text"
android:layout_below="#+id/caring"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Campaign"
android:textColor="#f70f59"
android:textSize="22sp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Adding following two tag into ImageView with id 'child' can resolve your problem.
android:scaleType="fitXY"
android:adjustViewBounds="true"
FitXY scale the image using fill
and you need to set adjustViewBounds to true to adjust its bounds to preserve the aspect ratio of its drawable.
<ImageView
android:id="#+id/child"
android:src="#drawable/child"
android:layout_width="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_height="256dp"
android:layout_below="#+id/caring"/>
This would help you to achieve desired layout. Increase height of image according to your needs. :)

Android design : a scrollview 3 button below

I'm trying to create a design (and i'm pretty bad at this -__- ) where I will have a scrollview and a set of 3 buttons, horizontally aligned ALWAYS at the bottom of the screen (I mean the scrollview should be ABOVE my layout with my button and may scroll, but the button have to ALWAYS be displayed/visible)
I have already tried several solution, the last one I used is this , but it doesn't succeeded :(
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:id="#+id/header"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scroll"
android:layout_above="#+id/footer"
android:layout_below="#+id/header">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Chargement en cours"
android:id="#+id/TNom"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="#+id/Bplus"
android:onClick="onClickSuivant"
android:layout_toLeftOf="#+id/Begale"
android:layout_toStartOf="#+id/Begale" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/Begale"
android:onClick="onClickSuivant"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="#+id/Bmoins"
android:onClick="onClickSuivant"
android:layout_toRightOf="#+id/Begale"
android:layout_toEndOf="#+id/Begale" />
</RelativeLayout>
NB : I have no need of the "header" part ... but the last code I found have it and it seems to be exactly I need.... seemed only -__- :(
And I have 2 questions on this design (while i'm asking, I ask everything :p )
1/ How may I force the size of the Image I will be downloading into ImageView1 to a "maximum" height (I mean my picture will be portrait OR landscape... let say 10*15 and 15*10 ... how may i forced them to be 10*6.666 instead of 15*10 <= It's an example... I don't know the image size I will have, but I know I want them at the same height every time, width may change according to the ratio)
2/why Lint is writing this part in red....
android:textAppearance="?android:attr/textAppearanceLarge"
Thx in advance to everyone who stops here and give me hints :)
(and sorry for my english)
EDIT : I have found some answer !! I used RELATIVELayout instead of LINEARLayout, which is recommended to do what I wanted ...
Si here is the "new" template (for reference if anyone is interested), where I still have problem
<?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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:id="#+id/scroll"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Chargement en cours"
android:id="#+id/TNom"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="#+id/Bplus"
android:onClick="onClickSuivant"
android:layout_toLeftOf="#+id/Begale"
android:layout_toStartOf="#+id/Begale" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/Begale"
android:onClick="onClickSuivant"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="#+id/Bmoins"
android:onClick="onClickSuivant"
android:layout_toRightOf="#+id/Begale"
android:layout_toEndOf="#+id/Begale" />
</LinearLayout>
With the previous design, button were well aligned and take all the screen (match_parent) ... with this one, they are located at the bottom left ... As android:layout_centerHorizontal="true" is made for RelativeLayout, problem come from this... how may i change it ?
Try using android:gravity="center" in your LinearLayout (which encapsulates the buttons) or android:layout_gravity="center" in Button elements. I believe the first option will be enough.
EDIT: regarding Lint warning message, I believe it's related to this line:
android:text="Chargement en cours"
It's discouraged to use hard-coded strings. Try replacing it by android:text="#string/my_string_id" and define such string in your strings.xml file.

Image under another image not shown Android

Hi I wanna implement following picture
When I go to XML-design of android studio it's exactly what I want but when I run app the straight line under the circle not shown Can any body give me some hint to solve this issue ? ( I also use FrameLayout instead of RelativeLayout but not worked )
Edit : In fact my problem is RelativeLayout which contains straight line not as height as other RelativeLayout. Does anyone knows how to solve this ?!
Edit 2: I change relativeLayout of parent to LinearLayout and it's worked ! I dont know why but it's work !
Here is my row of list after some changes :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="#dimen/circle_area_radius"
android:layout_height="match_parent">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/half_circle_area_radius"
android:background="#color/orange" />
<ImageView
android:id="#+id/circle"
android:layout_width="#dimen/circle_area_radius"
android:layout_height="#dimen/circle_area_radius"
android:src="#drawable/circle" />
<com.mycompany.ui.customui.PersianTextView
android:id="#+id/araNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="22dp"
android:text="1299"
android:textColor="#color/abc_secondary_text_material_dark"
android:textSize="12sp" />
</RelativeLayout>
<!-- our content -->
<LinearLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/pager_margin"
android:layout_marginTop="#dimen/global_padding_large"
android:background="#drawable/balloon_incoming_normal"
android:orientation="vertical">
<com.mycompany.ui.customui.PersianTextView
android:id="#+id/itemText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="#dimen/global_padding_large"
android:layout_marginRight="#dimen/global_padding"
android:layout_marginTop="#dimen/global_padding"
android:ellipsize="end"
android:gravity="right"
android:textColor="#color/dark_gray"
android:textSize="#dimen/textsize_medium" />
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="#dimen/global_padding_large"
android:layout_marginRight="#dimen/global_padding_large"
android:layout_marginTop="#dimen/global_padding"
android:background="#color/gray_20" />
<com.mycompany.ui.customui.IconTextView
android:id="#+id/favoriteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:padding="#dimen/global_padding"
android:layout_marginRight="#dimen/global_padding"
android:text="#string/icon_star_empty"
android:textColor="#color/black_light"
android:textSize="#dimen/textsize_smaller" />
</LinearLayout>
</LinearLayout>
The thing is line might actually form, but you are not able to see it, because it's behind the circle. If I'm right, test it by adding this to the circle android:alpha="20". The line could be seen behind the circle. If that works the solution below should work.
Change the fill_parent to match_parent, fill_parent is deprecated.
Since you use match_parent in the first layout.
The solution could be this
Better Implementation would be using this:
| Circle(V1) | TextView with information(V2) |
Align V1 to left and top (with circle and line as center of the layout).
Align V2 to the right of V1.
EDIT
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<!-- this is my straight line -->
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginLeft="31dp"
android:src="#f6802e" />
Your line's height matches parent's height, change
android:layout_height="fill_parent">
to
android:layout_height="match_parent">
EDIT #2
<?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:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#00aaaaaa"
android:paddingLeft="65sp"
android:src="#drawable/ic_launcher" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="3sp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#aa00aa"
android:paddingLeft="65sp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="65sp"
android:layout_height="65sp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#aaaaaa"
android:paddingLeft="65sp"
android:layout_marginTop="65sp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
The above code runs and gives you the desired output as well, just replace the imageViews(Also the first RelativeLayout is unnecessary, inflating them takes memory). Here's the screenshot.
Try This.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginLeft="31dp"
android:src="#f6802e" />
<ImageView
android:id="#+id/circle"
android:layout_width="65dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
android:src="#drawable/circle" />

Android CalendarView slowing down layout

This is driving me crazy. I have a fragment in my Android app which is laid out using a RelativeLayout. Problem is that for some reason it takes ages to render, about 5 seconds just to load about 4 elements on screen.
One of the elements is a CalendarView and when I remove it it goes back to proper speeds (ie: instant). I'd imagine the problem is got to do with the way I'm asking Android to lay it out, must not make much sense or is inefficient or something.
Here's the XML file:
<?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:padding="20dp">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="TODAY"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/time" />
<TextView
android:id="#id/time"
android:gravity="right"
android:textStyle="bold"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="11:32"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/date_info"
android:layout_margin="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday, 15th August 2012"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_below="#id/title"
android:layout_alignParentLeft="true" />
<CalendarView
android:id="#+id/calendar_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/white_back_black_border"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
I've tried loads of different layout options but removing the Calendar seems to be the only thing that makes a difference.
Any insights would be greatly appreciated. Thanks
I've had this problem too, both with relative layouts and linear layouts. It doesn't seem to be layout-related.
Here is an example to see the error, just with a simple layout, no code at all:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".FechaHoraActivity" >
<TimePicker
android:id="#+id/timePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp" />
<CalendarView
android:id="#+id/calendarView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
And now just change the linear layout height to:
android:layout_height="match_parent"
With this change the problem is gone, at least in my Samsung Galaxy Tab 2
So it seems it is more "space" related, but I'm still not sure why this problem appears. And I haven't found any other interesting results on google searching "calendarview slow"...
EDIT Let's see if we can find an answer with a small bounty
I take some hours to find the answer, but not figure out why. Here is something strange, may it can help you to find the answer.
the cpu consumption when CalendarView slow
The getView in WeekAdapter has a param parent that was never used.
public View getView(int position, View convertView, ViewGroup parent) {
WeekView weekView = null;
if (convertView != null) {
weekView = (WeekView) convertView;
} else {
weekView = new WeekView(mContext);
android.widget.AbsListView.LayoutParams params =
new android.widget.AbsListView.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
weekView.setLayoutParams(params);
weekView.setClickable(true);
weekView.setOnTouchListener(this);
}
int selectedWeekDay = (mSelectedWeek == position) ? mSelectedDate.get(
Calendar.DAY_OF_WEEK) : -1;
weekView.init(position, selectedWeekDay, mFocusedMonth);
return weekView;
}
Looking forward the answer.
It seems like CalendarView directly inside a RelativeLayout really doesn't work that well. The following solution with the trick of using a FrameLayout is loading much faster in the emulator:
<?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:padding="20dp" >
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/time"
android:text="TODAY"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#id/time"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:text="11:32"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/date_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/title"
android:layout_margin="20dp"
android:text="Wednesday, 15th August 2012"
android:textAppearance="?android:attr/textAppearanceMedium" />
<FrameLayout
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<CalendarView
android:id="#+id/calendar_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/white_back_black_border" />
</FrameLayout>
</RelativeLayout>
Found that CalendarView widget needs height to be set to match_parent, then you can put it to any layout. For example in relative with height 200. This works fine on 4.0.3 emulator and on Samsung Galaxy Tab with 4.2.2.
<?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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" >
<CalendarView
android:id="#+id/cv_dialog_filter_date"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/relativeLayout2"
android:layout_centerHorizontal="true"
android:text="05.12.2013" />
</RelativeLayout>
Putting the CalendarView in a FrameLayout will solve the problem..
here is a XML code example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cc00b1cc">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="102dp"
android:layout_alignParentBottom="true">
<CalendarView
android:layout_width="425dp"
android:layout_height="374dp"
android:id="#+id/calendarView"
android:layout_gravity="left|top" />
</FrameLayout>
</RelativeLayout>
The above answers were right but, still hasn't solved one mystery.
That is, When i want to include calendarview inside layout with other layout. It's just disappears or i can see only Week letters. I tried the above match parent and everything and still i couldn't solve it.
If anyone struggling like me Here's the answer.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<CalendarView
android:id="#+id/calendarService"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayout"></CalendarView>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
///Your views
/>

Categories

Resources