first, I want to say sorry but i have my problems with designing android app :D
I want that the button is below the listview. Actually the button is over the listview and hide the lower region. How can I fix it?
screenshot
My layout file:
<FrameLayout 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:layout_marginTop="?android:attr/actionBarSize"
android:background="#color/white"
tools:context="de.app.me.de.MyFragment">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/listview_ticket"
android:layout_gravity="center"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="3dp"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/btn_reply"
android:text="Antworten"
android:layout_gravity="center_horizontal|bottom"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#color/orange"
android:textColor="#color/white"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"/>
</FrameLayout>
use this:
<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:orientation="vertical"
android:layout_marginTop="?android:attr/actionBarSize"
android:background="#color/white"
tools:context="de.app.me.de.MyFragment">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_above="#+id/btn_reply"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listview_ticket"
android:layout_gravity="center"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="3dp"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/btn_reply"
android:text="Antworten"
android:layout_gravity="center_horizontal|bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#color/orange"
android:textColor="#color/white"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"/>
basically, just change FrameLayout to RelativeLayout and align button at bottom and make listview above buttons by adding layout_above to swipeRefreshLayout
Add this to your FrameLayout:
android:orientation="vertical"
And remove from your ListView:
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
EDIT
Try this with your button:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/btn_reply"
android:text="Antworten"
android:layout_gravity="center_horizontal|bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#color/orange"
android:textColor="#color/white"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"/>
</RelativeLayout>
You can change the parent class to RelativeLayout. and in the ListView set the following attribute
android:layout_above="#+id/button"
and for the button set the following attribute
android:layout_alignParentBottom="true"
RelativeLayout is meant for these kinds of rendering.
Related
I have a problem with layout of my Application.
I'm trying to do a layout like Trello (screen of trello layout for example get from google)
But I have a problem with the Button at the Bottom of ScrollView:
Now my app is something like:
So How you can see, the button I always at the bottom of display.
I would like create a Header section, body section with Scrollview and recycler view and Footer with action button.
For now my xml app is:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/card_view"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/header_title"
style="#style/card_header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:text="title"
/>
<TextView
android:id="#+id/header_subtitle"
style="#style/card_header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/header_title"
android:text="subtitle" />
<ImageButton
android:id="#+id/context_menu"
android:layout_width="80dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="right"
android:background="#android:color/transparent"
android:clickable="true"
android:src="#drawable/ic_more_vert_black_16dp"
/>
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:layout_below="#+id/header"
android:layout_above="#+id/button_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/header"
/>
</android.support.v4.widget.NestedScrollView>
<Button
android:id="#+id/button_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/button_action"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
The parent Layout that contain a "list of block" is
<HorizontalScrollView
android:id="#+id/horizontalScrollFather"
android:orientation="horizontal"
android:fillViewport="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="horizontal"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/list_blocks"
android:layout_width="wrap_content"
android:layout_height="match_parent"
/>
</RelativeLayout>
</HorizontalScrollView>
EDIT
I have tried to make a modify to my xml with:
<android.support.v4.widget.NestedScrollView
android:id="#+id/myNestedScrollView"
android:layout_below="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.v4.widget.NestedScrollView>
<Button
android:id="#+id/button_action"
android:layout_below="#+id/myNestedScrollView" <!-- as suggested -->
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_action"
/>
But the problem now is the scrollview with recycler hides the Button:
How Can I replicate the layout ?
Use this code
<android.support.v4.widget.NestedScrollView
android:id="#+id/myNestedScrollView"
android:layout_below="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v4.widget.NestedScrollView>
<Button
android:id="#+id/button_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/myNestedScrollView"
android:text="#string/button_action"/>
Changes
Don't do alignParentBottom on Button and don't put NestedScrollView above Button instead put Button below NestedScrollView
And there is no need to use android:layout_below="#id/header" in RecyclerView
I have an ImagePickerButton, EditText and Send Button on my UI as shown below:
The problem is with the Send Button which doesn't fix to the bottom
of my Linear Layout. Can anyone say how to make the position of the
button fixed to the bottom when I type multi line text.
This is my Layout code:
<?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/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxWidth="#android:dimen/notification_large_icon_height"
tools:context="com.pc.wecare.MainActivity">
<ListView
android:id="#+id/messageListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayout"
android:divider="#color/cardview_dark_background"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
tools:listitem="#layout/item_message" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<ImageButton
android:id="#+id/photoPickerButton"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="bottom"
android:background="#android:drawable/ic_menu_gallery" />
<EditText
android:id="#+id/messageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"/>
<Button
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND" />
</LinearLayout>
</RelativeLayout>
Try to use
android:baselineAligned="false"
In your LinearLayout. Let me know if it works for you. That's how I solved a similar issue, but it didn't include an editText
You can wrap the button inside another linear layout to make that happen.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND"
/>
</LinearLayout>
Just add attribute android:baselineAligned="false" to your LinearLayout.
Update your XML as below:
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal"
android:baselineAligned="false">
.................
.........................
</LinearLayout>
Here is an alternative solution using RelativeLayout:
<?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/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxWidth="#android:dimen/notification_large_icon_height">
<ListView
android:id="#+id/messageListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayout"
android:divider="#color/cardview_dark_background"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
tools:listitem="#layout/item_message" />
<RelativeLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<ImageButton
android:id="#+id/photoPickerButton"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:drawable/ic_menu_gallery" />
<Button
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:enabled="false"
android:text="SEND" />
<EditText
android:id="#+id/messageEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/photoPickerButton"
android:layout_toLeftOf="#id/sendButton"
android:layout_weight="1"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~
I want my inner RelativeLayout to wrap it's content and stay below the View element. Why isn't it behaving like the pic below?
My layout.xml
<?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">
<View
android:id="#+id/linearLayout"
android:layout_above="#+id/input_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#ebebeb">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/imageView13"
android:layout_toStartOf="#+id/imageView13"
android:background="#android:color/white"
android:padding="8dp" />
<ImageView
android:id="#+id/imageView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_m_send" />
</RelativeLayout>
</RelativeLayout>
remove android:layout_alignParentBottom="true" from both your EditText and ImageView will solve your proble.
Your RelativeLayout already have android:layout_alignParentBottom="true" and if you will set same for it's child also it will set layout height to full screen.
Note that you cannot have a circular dependency between the size of
the RelativeLayout and the position of its children. For example, you
cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a
child set to ALIGN_PARENT_BOTTOM
Class Document
use this way
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/relChart"
android:layout_above="#+id/input_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/relChart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/background"
>
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toLeftOf="#+id/ivSend"
android:background="#drawable/border_round_white3"
android:gravity="right|center_vertical"
android:paddingRight="10dp"
android:textColor="#android:color/black"
android:textCursorDrawable="#null"
android:maxLength="140"
/>
<ImageView
android:id="#+id/ivSend"
android:layout_width="40dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:contentDescription="#null"
android:padding="5dp"
android:src="#mipmap/send_icon" />
</RelativeLayout>
</RelativeLayout>
I have three RelativeLauouts in a LinearLayout and I can't make it fill the whole screen on my emulator?? What is the problem?
Here is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/letteord"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/letteord"
android:scaleType="centerCrop"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Let"
android:id="#+id/letteOrdbutton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textSize="50dp"
android:background="#a4000000"
android:textColor="#FFFFFF" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/normaleord"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/normaleord"
android:scaleType="centerCrop"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Normal"
android:id="#+id/normaleOrdbutton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textColor="#FFFFFF"
android:background="#a4000000"
android:textSize="50dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/svaereord"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/svaereord"
android:scaleType="centerCrop"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Svær"
android:id="#+id/svaereOrdbutton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textSize="50dp"
android:textColor="#FFFFFF"
android:background="#a4000000" />
</RelativeLayout>
</LinearLayout>
I have tried changing the layout with and height but it still won't fill the whole screen as you can see on this screenshot:
Well, I see no paddings or margins in the code above. Is this just a portion of your code in your xml file? Check your main activity layout to see if there is any padding or margins. Delete them if there is and it should work fine.
I am using a webview to load html data.
I want to place two buttons on the bottom for some functionality.
I have put teh webview and the bottom layout in a frame layout.
Web view shows html data only when i give it some specific height e.g 500dp.
Also the bottom layout also scrolls along with webview.
Please help how i can do this.
<?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:padding="10dp" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/newsHeading"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="5dp"
android:text="Heading"
android:textColor="#000000"
android:textSize="18sp" />
<WebView
android:id="#+id/webviewNews"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/black"
android:padding="10dp" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back1"
android:padding="20dp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/share11"
android:padding="20dp" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>
I had the same problem and I have fixed it by changing the LinearLayout by a RelativeLayout and setting all the "parent aligments" to the WebView, but this fill the screen.
For your layout, try align your button's LinearLayout to the parent's bottom, and replace the alignParentBottom of the WebView by a layout_above anchored to it. I have tested it and works fine.
Here is the code, try it:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_above="#+id/linlyt_buttons"/>
<LinearLayout
android:id="#+id/linlyt_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/rellyt_imagebuttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/black"
android:padding="10dp">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/ic_menu_close_clear_cancel"
android:padding="20dp"
android:contentDescription="Back/Cancel"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#android:drawable/ic_menu_share"
android:padding="20dp"
android:contentDescription="Share"/>
</RelativeLayout>
</RelativeLayout>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"/>
</LinearLayout>
</LinearLayout>