Android: put element below another element and align at bottom of screen - android

I am trying to define a layout where an ImageView is aligned at the bottom of the screen and also under a GridView, to avoid overlapping.
This however results in the ImageView being set just under the GridView but not aligned with the bottom of the screen.
Can this be solved using a different kind of 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/background"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/gs_top_text_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingBottom="30dp">
<RelativeLayout
android:id="#+id/gs_top_sub_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:paddingBottom="30dp">
<TextView
android:id="#+id/text_l"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/text_t"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/gs_top_sub_container"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/text1"/>
</RelativeLayout>
</RelativeLayout>
<GridView
android:id="#+id/gs_grid_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/gs_top_text_container"
android:descendantFocusability="blocksDescendants"
android:horizontalSpacing="2dp"
android:verticalSpacing="2dp"
android:numColumns="3"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
<ImageView
android:id="#+id/gs_bottom_logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/gs_grid_view"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"/>
</RelativeLayout>

This is how I would do that:
1 - Put the ImageView on the Bottom
2 - Put the GridView ABOVE it.
<!-- First anchor this View to the bottom -->
<ImageView
android:id="#+id/gs_bottom_logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
/>
<!-- Then put this View ABOVE the ImageView -->
<GridView
android:id="#+id/gs_grid_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/gs_top_text_container"
android:layout_above="#id/gs_bottom_logo"
android:descendantFocusability="blocksDescendants"
android:horizontalSpacing="2dp"
android:verticalSpacing="2dp"
android:numColumns="3"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
/>
This way I used the relativity of elements in a RelativeLayout
[EDIT]
Just for fun... I optimized your WHOLE LAYOUT.
Please note how the same design is achieved by using many layouts less.
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/background"
>
<TextView
android:id="#+id/text_l"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:paddingBottom="30dp"
/>
<TextView
android:id="#+id/text_t"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:paddingBottom="30dp"
/>
<!--
This container is (unfortunately) still needed, to make these two
textViews horizontally centered... :(
-->
<RelativeLayout
android:id="#+id/rlCentering"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/text_l"
android:layout_centerHorizontal="true"
android:paddingBottom="30dp"
>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/text1"
/>
</RelativeLayout>
<!-- First, anchor this View to the bottom -->
<ImageView
android:id="#+id/gs_bottom_logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
/>
<!-- Then put this View ABOVE the ImageView -->
<GridView
android:id="#+id/gs_grid_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rlCentering"
android:layout_above="#id/gs_bottom_logo"
android:descendantFocusability="blocksDescendants"
android:horizontalSpacing="2dp"
android:verticalSpacing="2dp"
android:numColumns="3"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
/>
</RelativeLayout>
And this is what I got in the Graphical Editor (I put some images I had and some texts to identify the TextViews):

Solved it by putting the ImageView in a RelativeLayout, setting the layout_below item in the RelativeLayout and the alignParentBottom item of ImageView:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/gs_grid_view">
<ImageView
android:id="#+id/gs_bottom_logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"/>
</RelativeLayout>

Related

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>

(Eclipse) move item to top of listveiw

i create custom listveiw but item of list go bottom of list
my activity 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="ir.sheikhoo.sis.ListuniActivity"
android:background="#drawable/bg2" >
<LinearLayout
android:id="#+id/linearLayoutBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="14dp" >
<Button
android:id="#+id/btnCancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="#string/list_activity_btn_cancel" />
<Button
android:id="#+id/btnReload"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="#string/list_activity_btn_ok" />
</LinearLayout>
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayoutBottom"
android:dividerHeight="0dp" />
</RelativeLayout>
and this is list_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_university_white" />
<TextView
android:id="#+id/uniName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/imageView1"
android:textColor="#color/white_color"
android:text="#string/list_title" />
<ImageView
android:id="#+id/next_ic"
android:layout_width="15dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/next_ic"
android:layout_centerVertical="true" />
</RelativeLayout>
The issue is that you have android:layout_above="#+id/linearLayoutBottom" on your ListView. Since it is wrapping content, it only wraps the vertical content that is inside of it, and since you have it constrained above the button linear layout, it's staying there. You probably want to remove the above constraint and try adding android:alignParentTop="true" on your ListView

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 Layout with images and text

I am trying to make a layout with an image on the left side, then a text, and two images on the right side. I show you how it likes now:
I want to put the two right icons on the right side, next to the limit of the screen. Then, if you see, when the text has more than one line, the two icons disappear and when the text is too long the icons are very small. I want a static space for every one of the icons.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_marginRight="6dip"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:focusable="false"
android:focusableInTouchMode="false"
android:contentDescription="#string/cdLogo" />
<LinearLayout
android:id="#+id/lista2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:paddingRight="20dip"
android:layout_toRightOf="#id/icon"
android:layout_marginRight="30dip">
<TextView
android:id="#+id/tituloevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textStyle="bold" />
<TextView
android:id="#+id/distritoevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textSize="12sp"/>
<TextView
android:id="#+id/coorp0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/coorp1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/esgratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:id="#+id/caracteristicas"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_toRightOf="#id/lista2"
android:layout_alignParentRight="true">
<ImageView
android:id="#+id/iconoMapa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdTieneCoor"
android:layout_weight="0.5"/>
<ImageView
android:id="#+id/iconoGratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdGratisPago"
android:layout_weight="0.5"/>
</LinearLayout>
</RelativeLayout>
I suggest you to use a LinearLayout as the top container, and distribute the space of the child elements with weight attributes. When using weight, you must set layout_width to 0dp for horizontal layouts or layout_heigth to 0dp for vertical layouts.
For example:
<?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:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" >
</LinearLayout>
</LinearLayout>

RelativeLayout : different result when change relative between view

I have this layout : first, is a spinner, after that is a listview, after that is a linearlayout include EditText and Button, and at the bottom of the screen is a Button.
Here is my first layout file:
<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"
android:orientation="vertical">
<Spinner
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textColor="#0e0e0e"
android:layout_above="#+id/list_view"
android:id="#+id/spinner"/>
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/list_view"
android:layout_alignParentLeft="true"
android:layout_above="#+id/linear_layout" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear_layout"
android:layout_above="#+id/search_btn"
android:weightSum="3"
android:layout_alignParentLeft="true">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/insert_chord_edit_text"
android:layout_weight="2"
android:text=""/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/add_chord_button"
android:layout_weight="1"
android:text="Add"/>
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/search_btn"
android:text="Search"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="32dp" />
</RelativeLayout>
Everything works fine, except that I cannot see Spinner. (and I have tested on real device). after that, I change layout above. Instead of say : spinner is above listview and listview is above of linearlayout. I change to : listview is below of spinner and listview is above of linearlayout. I have change as below layout:
<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"
android:orientation="vertical">
<Spinner
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textColor="#0e0e0e"
android:id="#+id/spinner"/>
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/list_view"
android:layout_alignParentLeft="true"
android:layout_below="#+id/spinner" // ADD THIS LINE
android:layout_above="#+id/linear_layout" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear_layout"
android:layout_above="#+id/search_btn"
android:weightSum="3"
android:layout_alignParentLeft="true">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/insert_chord_edit_text"
android:layout_weight="2"
android:text=""/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/add_chord_button"
android:layout_weight="1"
android:text="Add"/>
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/search_btn"
android:text="Search"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="32dp" />
</RelativeLayout>
And it works as I want, but I cannot explain why. Please tell me.
Thanks :)
In first case, your listview was mentioned as height fill parent and it has layout_above attribute but no layout_below attribute. So the listview occupied all height above the linear_layout element. Thats why you cant see the spinner.as the spinner visibility is overridden by listview.
// try this
<?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="wrap_content"
android:padding="5dp"
android:orientation="vertical" >
<Spinner
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#0e0e0e"
android:id="#+id/spinner"/>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/list_view"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:id="#+id/linear_layout">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/insert_chord_edit_text"
android:layout_weight="2"
android:text=""/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/add_chord_button"
android:layout_weight="1"
android:text="Add"/>
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/search_btn"
android:text="Search"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"/>
</LinearLayout>
set layout_weight="1" for your Spinner may solve your problem.

Categories

Resources