Card View disappearing when image added - android

I am currently making a band app for some work I have and have made a card view which will show the band members along with an image this works fine but after I created it I wanted to add stuff outside the card view and once I add for example an image view the card view and its contents disappears. Any ideas?
<?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"
tools:context="com.package.test.band.MainActivity"
tools:showIn="#layout/app_bar_main"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/menu_bg_banner" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="150dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
>
<TextView
android:id="#+id/member1_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Member 1"
android:layout_alignParentTop="true"
android:textSize="30sp"
/>
<TextView
android:id="#+id/member1_job"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Guitar and Vocals"
android:layout_marginTop="40dp"
android:layout_below="#+id/member1_name"
android:layout_alignParentTop="true"
android:textSize="20sp"
/>
<ImageView
android:id="#+id/content_memeber1"
android:layout_toRightOf="#+id/member1_name"
android:scaleType="centerInside"
android:src="#drawable/content_member1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_marginTop="115dp"
>
<TextView
android:id="#+id/member2_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="member2"
android:layout_alignParentTop="true"
android:textSize="30sp"
/>
<TextView
android:id="#+id/member2_job"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bass"
android:layout_marginTop="40dp"
android:layout_below="#+id/member2_name"
android:layout_alignParentTop="true"
android:textSize="20sp"
/>
<ImageView
android:id="#+id/content_member2"
android:layout_toRightOf="#+id/member2_name"
android:scaleType="centerInside"
android:src="#drawable/content_member2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_marginTop="225dp"
>
<TextView
android:id="#+id/member3_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="member3"
android:layout_alignParentTop="true"
android:textSize="30sp"
/>
<TextView
android:id="#+id/member3_job"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Drummer"
android:layout_marginTop="40dp"
android:layout_below="#+id/member3_name"
android:layout_alignParentTop="true"
android:textSize="20sp"
/>
<ImageView
android:id="#+id/content_member3"
android:layout_toRightOf="#+id/member3_name"
android:scaleType="centerInside"
android:src="#drawable/content_member3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>

your linearlayout orientation is horizontal and you make your image match parent width so automatically the cardview will be outside the screen

Related

View not visible in device but visible in XML

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 />

Relative Layout Image View lapping over scroll view android

I have tried placing image(imageBottom) below scroll view(scrollView) but it is overlapping left bottom corner of scroll view.
I have also tried attribute layout_below in imageview but this trick dint worked.
<?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:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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.rohitkumar.androidtutorial.MainActivity">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/TextString"
android:textSize="32sp" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView1"
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/longText"
android:textSize="20sp" />
</ScrollView>
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:contentDescription=""
app:srcCompat="#drawable/course1" />
<ImageView
android:id="#+id/imageBottom"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:contentDescription="#string/course_image"
android:src="#drawable/image_1" />
</RelativeLayout>
Create a relative layout and place the textview and image icon within it:
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/TextString"
android:textSize="32sp" />
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:contentDescription=""
app:srcCompat="#drawable/course1" />
</RelativeLayout
Add android:layout_above="#+id/imageBottom" and android:layout_below="#+id/rl1"in your scrollview
You want to scroll only textview than you dont need any scroll view,you can make textview scroll like this:
Just set the
android:maxLines = "AN_INTEGER"
android:scrollbars = "vertical"
properties of your TextView in your layout's xml file.
Then use:
yourTextView.setMovementMethod(new ScrollingMovementMethod());
in your code.
And Add android:layout_above="#+id/imageBottom" to your textView and android:layout_below="#+id/textView1" remove scroll view layout
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_above="#+id/imageBottom"
android:gravity="center"
android:text="#string/TextString"
android:textSize="32sp" />
Try this out.
<?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:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="hi"
android:textSize="32sp" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/imageBottom"
android:layout_below="#+id/textView1"
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="20sp" />
</ScrollView>
<ImageView
android:id="#+id/imageBottom"
android:layout_alignParentBottom="true"
android:layout_width="100dp"
android:layout_height="100dp"
/>
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:contentDescription=""
/>
</RelativeLayout>
#Rohit Kumar you just add this line in scroll view android:layout_above="#+id/imageBottom"and android:layout_below="#+id/textView1"
<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:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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.rohitkumar.androidtutorial.MainActivity">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Title"
android:textSize="32sp" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageBottom"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView1"
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="this is a simple paragraph that is meant to be nice and easy to type which is why there will be mommas no periods or any capital letters so i guess this means that it cannot really be considered a paragraph but just a series of run on sentences this should help you get faster at typing as im trying not to use too many difficult words in it although i think that i might start making it hard by including some more difficult letters I'm typing pretty quickly so forgive me for any mistakes i think that i will not just tell you a story about the time i went to the zoo and found"
android:textSize="20sp" />
</ScrollView>
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:contentDescription="test"
app:srcCompat="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/imageBottom"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>

How to change andorid layout as per image given below

Currently my listview design looks like
But I want to make it look like below image
Where image will be on right hand side, title in Bold and Subtitle just below it. What changes do I need to make in my layout, Below is my code. Thanks in
advance.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tom Cruise"
android:textColor="#166CED"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tvDescriptionn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#009A57"
android:text="Description" />
</LinearLayout>
For better result to manage your view use relativelayout.
You can manage your layout as example give below-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
card_view:cardBackgroundColor="#color/grey">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:src="#drawable/arrow"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:orientation="vertical" >
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Murdochs needed counselling after hacking scandle says magazine"
android:textColor="#166CED"
android:padding="5dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tvSubtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/ivImage"
android:padding="5dp"
android:text="NEW YORK:The British phone hacking scandle"
android:textColor="#000"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I would suggest you to use relative layout . this will make your layout more flexible to edit. I have suggested a layout below , give it a try .
<?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">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="Tom Cruse"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#166CED" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/tvName"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvDescriptionn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvName"
android:layout_margin="10dp"
android:layout_toLeftOf="#+id/ivImage"
android:text="Description"
android:textColor="#009A57" />
</RelativeLayout>
Please do accept this answer if it worked for you.
You have to use flowTextView jar to your project. Here you can find the jar:
https://github.com/deano2390/FlowTextView
Inside LinearLayout, place textview at the top to show the title. Make height wrap_content and width match_parent.
Below this, add linearlayout which contains textview and image. set orientation horizontal to inner liner layout.
For better placing you can always used relative layout. for example
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"
tools:context="com.example.testlayout.MainActivity" >
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<TextView
android:id="#+id/descriptionText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:text="description"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:layout_toLeftOf="#+id/rightArrow"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/rightArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:src="#drawable/ic_launcher"
android:layout_alignParentEnd="true" />
</RelativeLayout>

Android XML ScrollView not scrolling

I am trying to implement a scrollview in one of my XML files but it doesnt seem to be working. It is cutting out the bottom 3 spinners and the last button in the XML. I guessed this is because I needed to scroll down to see them but I am unable to scroll?
Can anyone seem the issue?
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<TextView
android:id="#+id/title"
android:text="New Recipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<EditText
android:id="#+id/recipeName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:hint="Enter Recipe Name"/>
<ListView
android:id="#+id/ingredientsList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:textColor="#000000"
android:layout_above="#+id/showIngredientDialog"
android:minHeight="150px">
</ListView>
<Button
android:id="#+id/showIngredientDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Ingredient"
android:layout_above="#+id/showDirectionDialog"
android:layout_alignParentStart="true"
android:layout_marginBottom="145dp" />
<ListView
android:id="#+id/directionsList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_above="#+id/showDirectionDialog"
android:layout_alignParentStart="true"
android:layout_marginBottom="37dp">
</ListView>
<Button
android:id="#+id/showDirectionDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Direction"
android:layout_marginBottom="79dp"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/showIngredientDialog" />
<Spinner
android:id="#+id/timeSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/showDirectionDialog"
android:entries="#array/time"/>
<Spinner
android:id="#+id/dietarySpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="#array/dietary"
android:layout_below="#+id/showDirectionDialog"
android:layout_toRightOf="#+id/timeSpinner" />
<Spinner
android:id="#+id/heatSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="#array/heat"
android:layout_below="#+id/showDirectionDialog"
android:layout_toRightOf="#+id/dietarySpinner" />
<Button
android:id="#+id/saveRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save Recipe"
android:layout_below="#+id/timeSpinner"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/showDirectionDialog"
android:layout_marginBottom="25dp" />
</RelativeLayout>
</ScrollView>
Your facing this issue because you are using ScrollView in which having ListView. Both having default scroll property which conflicting the issue. Check this SO post for resolving the issue.
Set the relativeLayout height to "wrap_content".
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:text="New Recipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<EditText
android:id="#+id/recipeName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:hint="Enter Recipe Name"/>
<ListView
android:id="#+id/ingredientsList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:textColor="#000000"
android:layout_above="#+id/showIngredientDialog"
android:minHeight="150px">
</ListView>
<Button
android:id="#+id/showIngredientDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Ingredient"
android:layout_above="#+id/showDirectionDialog"
android:layout_alignParentStart="true"
android:layout_marginBottom="145dp" />
<ListView
android:id="#+id/directionsList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_above="#+id/showDirectionDialog"
android:layout_alignParentStart="true"
android:layout_marginBottom="37dp">
</ListView>
<Button
android:id="#+id/showDirectionDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Direction"
android:layout_marginBottom="79dp"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/showIngredientDialog" />
<Spinner
android:id="#+id/timeSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/showDirectionDialog"
android:entries="#array/time"/>
<Spinner
android:id="#+id/dietarySpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="#array/dietary"
android:layout_below="#+id/showDirectionDialog"
android:layout_toRightOf="#+id/timeSpinner" />
<Spinner
android:id="#+id/heatSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="#array/heat"
android:layout_below="#+id/showDirectionDialog"
android:layout_toRightOf="#+id/dietarySpinner" />
<Button
android:id="#+id/saveRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save Recipe"
android:layout_below="#+id/timeSpinner"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/showDirectionDialog"
android:layout_marginBottom="25dp" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
you can't put two scrolling widgets inside one another the will cause major issues even with normal scrolling
if there is no way to change this layout design please force a height to each listview but still the scroll will be buggy and you have to set extra margin on the side of list for the user to be able to scroll the parent scroll view
or try to break down the design if you can maybe tabs one for normal data and a tab for each list
Because views of total heigt not bigger than screen height.
You can see with coding custom height. I hope below code help you.
I just change listview height.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<TextView
android:id="#+id/title"
android:text="New Recipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<EditText
android:id="#+id/recipeName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:hint="Enter Recipe Name"/>
<ListView
android:id="#+id/ingredientsList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/recipeName"
android:textColor="#000000"
android:layout_above="#+id/showIngredientDialog"
android:minHeight="150px">
</ListView>
<Button
android:id="#+id/showIngredientDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Ingredient"
android:layout_above="#+id/showDirectionDialog"
android:layout_alignParentStart="true"
android:layout_marginBottom="145dp" />
<ListView
android:id="#+id/directionsList"
android:layout_width="fill_parent"
android:layout_height="1000dp"
android:textColor="#000000"
android:layout_above="#+id/showDirectionDialog"
android:layout_alignParentStart="true"
android:layout_marginBottom="37dp">
</ListView>
<Button
android:id="#+id/showDirectionDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Direction"
android:layout_marginBottom="79dp"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/showIngredientDialog" />
<Spinner
android:id="#+id/timeSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/showDirectionDialog"
/>
<Spinner
android:id="#+id/dietarySpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/showDirectionDialog"
android:layout_toRightOf="#+id/timeSpinner" />
<Spinner
android:id="#+id/heatSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/showDirectionDialog"
android:layout_toRightOf="#+id/dietarySpinner" />
<Button
android:id="#+id/saveRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save Recipe"
android:layout_below="#+id/timeSpinner"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/showDirectionDialog"
android:layout_marginBottom="25dp" />
</RelativeLayout>

Set Position of Seekbar below an Image View

Im quite new to android I have an Image view and a seekbar,the user is allowed to load image which is displayed in the image view,the seek bar should be just below the image view.I have the following code in Main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="148dp"
android:src="#drawable/ic_launcher" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginTop="95dp"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/imageView1"
android:layout_marginRight="30dp"
android:layout_marginTop="78dp"
android:text="TextView" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="31dp"
android:text="Button"
android:onClick="clickme"
/>
</RelativeLayout>
The problems is when i load an Image of different size the seekbar is covered by the image view.I think i should resize the image or set some property of the imageview like 'Strech' in C# so that a proper layout is maintained.Can some one show me the right path
android:layout_width="wrap_content"
android:layout_height="wrap_content"
These properties in your imageview is causing the imageview to enlarge.
use android:adjustViewBounds
Change the alignment of the image view as above the seekbar, something like this:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="148dp"
android:layout_above="#+id/seekBar1"
android:src="#drawable/ic_launcher" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_above="#+id/textView1"
android:layout_marginTop="95dp"
/>
In this way you force the image view to be always above the seek bar.
Simple solution using LinearLayout:
<?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="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"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:layout_gravity="center"
android:text="TextView"/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="256dp"
android:layout_height="256dp"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_gravity="center"
/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="31dp"
android:layout_gravity="center"
android:text="Button"
android:onClick="clickme"
/>
</LinearLayout>
Note the android:layout_gravity="center", and that I added a dummy View with a layout_weight so that it fills up the space above the Button; so the Button stays at the bottom.
UPDATE: updated the individual margins
the easiest way will be:
<Seekbar android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_below="#+id/YouImageViewID"/>
Jus try RelativeLayout, here is partial code
<RelativeLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:src="#drawable/androidbiancheng"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/icon"
/>
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>

Categories

Resources