I have a list view design for a recipes app. Each item consists of a image, title, description and number of calories. My problem is that it doesnt fill the entire screen, but instead it gives a scrollbar on the right.
How can I make it fill the screen?
Also, is there a better way of showing the list items without using tables?
list.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadingEdgeLength="0dp"
android:fillViewport="true"
android:overScrollMode="never"
android:scrollbars="none">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/listViewRecipes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dividerHeight="1dp"
android:padding="10dp"></ListView>
</RelativeLayout>
</ScrollView>
</FrameLayout>
list_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="8dp"
android:fadingEdgeLength="0dp"
android:fillViewport="true"
android:overScrollMode="never"
android:scrollbars="none">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow
android:id="#+id/tableRow1">
<!-- Image -->
<ImageView
android:id="#+id/listViewRecipeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:overScrollMode="never"
app:srcCompat="#drawable/img_pixel" />
<!-- //Image -->
<!-- Title, Introduction -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="6dp"
android:fadingEdgeLength="0dp"
android:fillViewport="true"
android:overScrollMode="never"
android:scrollbars="none">
<TextView
android:id="#+id/listViewRecipeTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/colorBlack"/>
<TextView
android:id="#+id/listViewRecipeIntroduction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorBlack"
android:text="Introduction"/>
</LinearLayout>
<!-- //Title, Introduction -->
<!-- Numbers -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="6dp">
<TableRow>
<TextView
android:id="#+id/textViewServingCalories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorDarkGray"
android:text="xx" />
<TextView
android:id="#+id/textViewServingCaloriesKcal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorDarkGray"
android:layout_marginLeft="6dp"
android:text="#string/kcal_lowercase" />
</TableRow>
</TableLayout>
<TextView
android:id="#+id/textViewServingCaloriesKcalPerServing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorDarkGray"
android:text="#string/per_serving_lowercase" />
</LinearLayout>
<!-- //Numbers -->
</TableRow>
</TableLayout>
</LinearLayout>
This is a modify version of your code. You need to remove the outer scrollView since ListView is scrollable
<FrameLayout 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">
<ListView
android:id="#+id/listViewRecipes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dividerHeight="1dp"
android:padding="10dp">
</ListView>
</FrameLayout>
I have also remove the table layout and replace it with LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="3">
<ImageView
android:id="#+id/listViewRecipeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:overScrollMode="never"
app:srcCompat="#drawable/add" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical">
<TextView
android:id="#+id/listViewRecipeTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/colorBlack"/>
<TextView
android:id="#+id/listViewRecipeIntroduction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorBlack"
android:text="Introduction"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="8dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewServingCalories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorPrimary"
android:text="xx" />
<TextView
android:id="#+id/textViewServingCaloriesKcal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorPrimary"
android:layout_marginLeft="6dp"
android:text="Carolies" />
</LinearLayout>
<TextView
android:id="#+id/textViewServingCaloriesKcalPerServing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/colorPrimary"
android:text="Per Server" />
</LinearLayout>
Listview contains an inner scrollview. Just remove the scrollview.
either use that RelativeLayout or just the Listview on your frame. And match parent it.
Related
I have one fragment but its not vertically scrolling . My XML code is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#E6E6E6">
<!-- Top Sliding Banners -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="220dip" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom|left"
android:padding="10dip"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:text="Trending"
android:textColor="#000"
android:textSize="20sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textview"
android:scrollbars="none" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/popular_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:text="Popular"
android:textColor="#000"
android:textSize="20sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/popular_recycler_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/popular_textview"
android:scrollbars="none" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/featured_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:text="Featured"
android:textColor="#000"
android:textSize="20sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/featured_recycler_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/featured_textview"
android:scrollbars="none" />
</LinearLayout>
I have tried all solution of stackoverflow.My code have three recyclerview and they work fine .Only problem is than page is not vertically scrollable.
try using NestedScrollView as parent tag for this layout.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
remember to keep only one direct child for nestedScroll view.
I am getting this error java.lang.IllegalArgumentException: DrawerLayout must be measured with MeasureSpec.EXACTLY.
I need to ask why i need to give a specific width and height while using scroll view?
This is my xml :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/lin_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_professonal_detail_info"
android:tag="image_tag"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tv_name_detail_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<TextView
android:id="#+id/tv_designation_detail_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/tv_experience_detail_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_marginTop="10dp"
android:text="Specialization: "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="#+id/list_specialization"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_marginTop="10dp"
android:text="Education:"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="#+id/list_education"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_marginTop="10dp"
android:text="Experiences:"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="#+id/list_experience"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
/>
</LinearLayout>
<TextView
android:layout_marginTop="10dp"
android:id="#+id/tv_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View User Feedback"
android:textStyle="bold"
android:clickable="true"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<!-- The navigation drawer -->
<ListView android:id="#+id/left_drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#e5e5e5"
android:dividerHeight="1dp"
android:background="#android:color/black"
/>
</android.support.v4.widget.DrawerLayout>
</ScrollView>
I actually need a scroll view. Its working if i give a specific width and height but i donot want to use that because it may varies with phone dimensions. Please help
I am using Expandable GridView which doesn't scroll the whole content if grid items are changed dynamically.
Below is the xml code for main gridview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="135dp">
<android.support.v4.view.ViewPager
android:id="#+id/pager1"
android:layout_width="match_parent"
android:layout_height="135dp"
android:layout_above="#+id/titles"
android:overScrollMode="never">
</android.support.v4.view.ViewPager>
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/titles"
style="#style/CustomCirclePageIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:padding="5dp" />
</RelativeLayout>
<fone.adipoli.shopping.ExpandableHeightGridView
android:id="#+id/gridView_shopping"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center"
android:horizontalSpacing="0dp"
android:listSelector="#android:color/transparent"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp" />
</LinearLayout>
Xml for each Grid item
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardrow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
card_view:cardCornerRadius="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:id="#+id/img_grid_row1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
/>
</LinearLayout>
<TextView
android:id="#+id/grid_row1_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text=""
/>
<TextView
android:id="#+id/grid_row1_model"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="gone" />
<TextView
android:id="#+id/grid_row1_price_offr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall"
/>
<TextView
android:id="#+id/grid_row1_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text=""
android:textSize="10sp"
/>
<TextView
android:id="#+id/grid_row1_product"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text=""
android:textSize="10sp"
android:visibility="gone"
/>
<TextView
android:id="#+id/buy_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="2dp"
android:text="BUY"
android:padding="10dp"
android:gravity="center"
android:textColor="#color/white"
android:background="#color/blue"
android:textAppearance="? android:attr/textAppearanceSmall"/>
</LinearLayout>
</android.support.v7.widget.CardView>
I tried adding a view in the bottom after GridView ,but it doesn't work out.
Any help would be really thankfull.
Use android.support.v4.widget.NestedScrollView
or
ScrollView
Put your whole Grid items in NestedScrollView, or ScrollView seems to solve your problem.
I am trying to show four direct children on a Relative Layout where first one is a EdiText (in 'gone' visibility) and second one is LinearLayout with a TextView and ImageView and third is a ListView and fourth is another LinearLayout.
ListView gets over all children. I am posting below the code.
<?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/scrollview"
android:background="#drawable/bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.antoinecampbell.gcmdemo.GcmActivity$PlaceholderFragment">
<EditText
android:id="#+id/recepient"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:hint="Number"
android:imeOptions="actionSend"
android:inputType="phone"
android:visibility="invisible">
<requestFocus />
</EditText>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/recepient" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/padding_small"
android:text="Preview"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="gone"/>
<ImageView android:id="#+id/imageShow"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/abs__ic_go"
android:layout_gravity="center_horizontal"
android:visibility="gone"/>
</LinearLayout>
<ListView android:id="#+id/listMessages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/LinearLayout1"
android:cacheColorHint="#00000000"
android:divider="#00000000"
android:listSelector="#00000000"
/>
<LinearLayout
android:id="#+id/bottomview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_below="#+id/listMessages"
android:layout_alignParentBottom="true"
android:visibility="gone"
android:background="#FFFFFF">
<com.rockerhieu.emojicon.EmojiconEditText
android:id="#+id/name_edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/padding_small"
android:layout_weight="1"
android:hint="#string/enter_message_text"
android:imeOptions="actionSend"
android:inputType="text"
android:layout_gravity="center_vertical"
android:visibility="visible"/>
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/frameView"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone">
<fragment
android:id="#+id/emojicons"
android:layout_width="match_parent"
android:layout_height="220dp"
class="com.rockerhieu.emojicon.EmojiconsFragment"/>
</LinearLayout>
<ImageButton
android:id="#+id/send_message_button"
android:background="#drawable/angry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:visibility="visible"/>
</LinearLayout>
</RelativeLayout>
Now I tried using LinearLayout with scrollview inside it, it's now not scrolling the listview
<?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="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/recepient"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:hint="Number"
android:imeOptions="actionSend"
android:inputType="phone"
android:visibility="invisible">
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/padding_small"
android:text="Preview"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="gone"/>
<ImageView android:id="#+id/imageShow"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/abs__ic_go"
android:layout_gravity="center_horizontal"
android:visibility="gone"/>
<ListView android:id="#+id/listMessages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/LinearLayout1"
android:cacheColorHint="#00000000"
android:divider="#00000000"
android:listSelector="#00000000"
/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/bottomview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_below="#+id/listMessages"
android:layout_alignParentBottom="true"
android:visibility="visible"
android:background="#FFFFFF">
<com.rockerhieu.emojicon.EmojiconEditText
android:id="#+id/name_edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/padding_small"
android:layout_weight="1"
android:hint="#string/enter_message_text"
android:imeOptions="actionSend"
android:inputType="text"
android:layout_gravity="center_vertical"
android:visibility="visible"/>
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/frameView"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone">
<fragment
android:id="#+id/emojicons"
android:layout_width="match_parent"
android:layout_height="220dp"
class="com.rockerhieu.emojicon.EmojiconsFragment"/>
</LinearLayout>
<ImageButton
android:id="#+id/send_message_button"
android:background="#drawable/angry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:visibility="visible"/>
</LinearLayout>
</LinearLayout>
The ListView will go over other elements because you've not given it any relative positions. In a relative layout, every element will be default appear at (0,0) (ie the top left corner of the view) unless it's given a layout_below, layout_alignBottom etc parameter to determine where it's drawn.
So in this case, you 'resumably want the ListView to have android:layout_below="#id/LinearLayout1 and the bottomview similarly android:layout_below="#id/listMessages.
Here is the xml as per your requirement.
<?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:layout_gravity="center"
android:gravity="center" >
<EditText
android:id="#+id/edNumber"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:hint="Number"
android:inputType="phone"
android:visibility="gone" />
<LinearLayout
android:id="#+id/llLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/edNumber"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="linear layout text" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<ListView
android:id="#+id/lvList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/llBottom"
android:layout_below="#id/llLayout" >
</ListView>
<LinearLayout
android:id="#+id/llBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#ababab"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Bottom Bar text" />
</LinearLayout>
</RelativeLayout>
I'm trying to implement a relative layout, similar to below picture.
But when trying to bottom align the bottom-right text view, it goes out of the screen.
What is the best/minimal way to design below layout?
Code, currently I'm trying:
<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:id="#+id/dash1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top" >
<RelativeLayout
android:id="#+id/view_subdash_top_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/tv_name" >
<TextView
android:id="#+id/tv_instrument_change"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tv_text2"
android:gravity="right"
android:text="text1" />
<TextView
android:id="#+id/tv_text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="right"
android:text="text2" />
</RelativeLayout>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignBottom="#id/view_subdash_top_right"
android:gravity="bottom|center"
android:text="name" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dash1"
android:gravity="top" >
<!-- Here to enter bottom left -->
<TextView
android:id="#+id/tv_bottom_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="right|bottom"
android:text="bottom right" />
</RelativeLayout>
</RelativeLayout>
// try this
<?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:id="#+id/rel_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/rel_top_right"
android:text="Top Left Text" />
<RelativeLayout
android:id="#+id/rel_top_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:layout_toRightOf="#id/tv_top_left" >
<TextView
android:id="#+id/tv_top_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Text1" />
<TextView
android:id="#+id/tv_top_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_top_text1"
android:text="Top Text2" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rel_top"
android:gravity="top" >
<TextView
android:id="#+id/tv_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/rel_bottom_left"
android:text="Bottom Right Text" />
<RelativeLayout
android:id="#+id/rel_bottom_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/tv_bottom_right" >
<TextView
android:id="#+id/tv_bottom_text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Bottom Text1" />
<TextView
android:id="#+id/tv_bottom_text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tv_bottom_text1"
android:text="Bottom Text2" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
If you want to fill up the whole screen with those views, I'd use weighted LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="4"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="4"/>
</LinearLayout>
</LinearLayout>