So, I am trying to use a linear layout to hold three different buttons, each should take up 33% of the width on one line. This linear layout will be below all the other content in my relative layout, which holds all the other widgets on this activity. Unfortunately, when I add the third button into the layout, the other two have a white bar along the bottom of them and the third button (in this case the home button) is positioned higher than the others.
Can someone explain this behavior and how to rectify it? Thanks.
This is the XML file for the linear layout, I've removed all the text for the other widgets. If that would be helpful, I can post it as well.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">
<Button
android:layout_width="0dp"
android:layout_weight=".33"
android:layout_height="wrap_content"
android:text="#string/adfazsdfasdfadfsagjlfkdlgjklfsadgfjgps"
android:onClick="resetDates"
android:background="#drawable/sumbitstyleing"
android:id="#+id/resetDatesButton" />
<Button
android:layout_width="0dp"
android:layout_weight=".33"
android:layout_height="wrap_content"
android:text="#string/home"
android:onClick="home"
android:id="#+id/homeButtonSearch"
android:background="#drawable/generalbutton" />
<Button
android:layout_weight=".33"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/submitchanges"
android:onClick="submitChanges"
android:background="#drawable/sumbitstyleing"
android:id="#+id/submitchanges" />
</LinearLayout>
The first picture is WITHOUT the third button, the second picture is WITH the third button.
Try this, I have removed Properties you should use with RelativeLayout and unnecessary with LinearLayout, and buttons aligned horizontally,
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
and assigned Weightsum to LinearLayout along with button height to match parents
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="1">
<Button
android:id="#+id/resetDatesButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".33"
android:onClick="resetDates"
android:text="Rese check dates" />
<Button
android:id="#+id/homeButtonSearch"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".33"
android:onClick="home"
android:text="home" />
<Button
android:id="#+id/submitchanges"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".33"
android:onClick="submitChanges"
android:text="submit changes" />
</LinearLayout>
</RelativeLayout>
Result
Here you can go this way :
<?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:background="#color/white"
>
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerHorizontal="true"/>
<!--Buttons -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
>
<android.support.v7.widget.AppCompatButton
android:id="#+id/motor_team_send_sms_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/send_sms"
/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/motor_team_sleep_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/sleep"
/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/motor_team_rise_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/rise"
/>
</LinearLayout>
Output is:
This might help you.
Try this, in your LinearLayout add android:gravity="center"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center">
...
</LinearLayout>
Related
I have a game layout in my app that has four buttons that should display at the top of my view and then I have two FrameLayouts that are also in this linear layout. The first FrameLayout just makes the top 1/4 of the view so my imageButtons that implement the Drag and drop API are not allowed at the top. The second FrameLayout is for the bottom 3/4 of the view which has 4 imagebuttons in it.
My issue is that when the game layout is displayed, the buttons in the linear layout are displayed just how i want them to, but the two FrameLayouts are squished to the top right corner.
Here is the code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/game_layout" >
<Button
android:id="#+id/doneButton"
android:layout_width="170dp"
android:layout_height="wrap_content"
android:onClick="onDoneClicked"
android:text="#string/done" />
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCancelClicked"
android:text="#string/cancel" />
<Button
android:id="#+id/leaveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onLeaveClicked"
android:text="#string/leave" />
<Button
android:id="#+id/finishButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onFinishClicked"
android:text="#string/finish" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.75"
android:orientation="horizontal"
android:id="#+id/topHalf" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:orientation="horizontal"
android:id="#+id/bottomHalf" >
<ImageButton
android:id="#+id/polarCapButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/polarCapButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:background="#drawable/polarcap" />
</FrameLayout>
<TextView
android:id="#+id/scores"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="#+id/spaceRockButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:background="#drawable/spacerock" />
<ImageButton
android:id="#+id/spaceRockButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:background="#drawable/spacerock" />
</LinearLayout>
Any help would be appreciated guys. Thanks.
I see several things that can be a potential problem.
Your linear layout contains several widgets and only 2 of those contain layout_weight values. To solve this issue, you want to wrap your two frame layouts in another LinerLayout container, where you specify the distribution of your 2 frame layouts inside your new linear layout.
In your new linerLayout, you want to specify the total weight of the layout, such as: android:weightSum="1".
Depending of your linear layout orientation, (if unspecified, it will be horizontal) If your LinearLayout orientation is horizontal, specify: android:layout_width="0dp". If the orientation is vertical, specify: android:layout_height="0dp" for the child elements.
Also, it seems to me that you want your buttons to align horizontally next to each other (horizontal orientation), and your two frames to align underneath the buttons, but right underneath each other (vertical orientation).
So in this case, the code would look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/top_layout" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/game_layout" >
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCancelClicked"
android:text="#string/cancel" />
<Button
android:id="#+id/leaveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onLeaveClicked"
android:text="#string/leave" />
<Button
android:id="#+id/finishButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onFinishClicked"
android:text="#string/finish" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/ll_layout_frames" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.75"
android:orientation="horizontal"
android:id="#+id/topHalf" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal"
android:id="#+id/bottomHalf" >
<ImageButton
android:id="#+id/polarCapButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/polarCapButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:background="#drawable/polarcap" />
</FrameLayout>
</LinearLayout>
<!-- you can insert more widgets here, they will be placed in the vertical linear layout -->
</LinearLayout>
I'm trying to create a menu on my home screen but I cannot see the second button that I created. I tried android:layout_below="#+id/score_button" but it gives warning "invalid layout parameter"
Here is my xml file
<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:orientation="horizontal" >
<Button
android:id="#+id/score_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="scoreGame"
android:text="#string/score_button" />
<Button
android:id="#+id/settings_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/action_settings" />
</LinearLayout>
Something that I've noticed is that whichever button is placed first in the xml file is the one that is displayed when I run the app on my device.
Thanks in advance for any help, much appreciated.
use RelativeLayout instead of LinearLayout
then you can use android:layout_below="#+id/score_button"
and remove android:orientation="horizontal" when using RelativeLayout
Change the layout_width to wrap_content:
<Button
android:id="#+id/score_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="scoreGame"
android:text="#string/score_button" />
<Button
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/action_settings" />
Also if you want equal width buttons, give layout_weight:
android:layout_weight="1"
to both the buttons.
try below code:-
<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:orientation="horizontal" >
<Button
android:id="#+id/score_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:onClick="scoreGame"
android:text="#string/score_button" />
<Button
android:id="#+id/settings_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="#string/action_settings" />
</LinearLayout>
Repace your xml code by this code...
<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:orientation="horizontal" >
<Button
android:id="#+id/score_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="scoreGame"
android:text="#string/score_button" />
<Button
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/action_settings" />
</LinearLayout>
User orientation as Vertical. In linear layout there is no layout_below attribute. Use Relative layout instead.
To force same width for both buttons:
<Button
android:layout_width="0dp"
android:layout_weight="1"
... />
<Button
android:layout_width="0dp"
android:layout_weight="1"
... />
To use natural buttons width:
<Button
android:layout_width="wrap_content"
... />
<Button
android:layout_width="wrap_content"
... />
Instead of "match_parent" for width, put weight
<Button
android:id="#+id/score_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="scoreGame"
android:text="#string/score_button" />
<Button
android:id="#+id/settings_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/action_settings" />
IF you want to show the menu in horizontal
<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:orientation="horizontal" >
<Button
android:id="#+id/score_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="scoreGame"
android:layout_weight="1"
android:text="#string/score_button" />
<Button
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/action_settings" />
</LinearLayout>
And if you want to show one blow the other change orientation to Vertical
Try this..
Change this orientation horizontal to vertical like below
android:orientation="horizontal"
to
android:orientation="vertical"
Adjust the button width and height appropriately and check again .. All the best
The android:layout_below="" attribute can only be used with a Relative Layout. You have chosen a Linear Layout.
Also both the buttons choose the "match_parent" for the android:layout_width attribute.
Either change "match_parent" to "wrap_content", otherwise change the android:orientation tag of the linear layout to "vertical".
Also if you change the layout to relative, it will work.
I have a list of elements and a layout at the bottom of the screen. This layout contains some ImageButtons. It looks in such a way:
Here is my markup:
<?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" >
<ListView
android:id="#+id/cloudListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/cloud_list_layout"
android:layout_alignParentTop="true" >
</ListView>
<LinearLayout
android:id="#+id/cloud_list_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="3dp"
android:paddingTop="3dp"
android:visibility="visible" >
<ImageButton
android:id="#+id/btn_cloud_copy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cloud_copy_selector" />
<ImageButton
android:id="#+id/btn_cloud_paste"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cloud_paste_selector" />
<ImageButton
android:id="#+id/btn_cloud_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cloud_delete_selector" />
</LinearLayout>
</RelativeLayout>
I want to align my ImageButtons uniformly across the entire width. I now have three buttons but they may be more or less. Is it possible to apply some universal markup to the bottom layout that provides uniform aligning across the with for any number of buttons? For three buttons it must look like this:
Thanks!
Apply android:layout_weight="1" to all the ImageButton and change
android:layout_width="wrap_content"
to
android:layout_width="match_parent"
take a look at the weight property.
<ImageButton
android:id="#+id/btn_cloud_copy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/cloud_copy_selector"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/btn_cloud_paste"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/cloud_paste_selector"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/btn_cloud_delete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/cloud_delete_selector"
android:layout_weight="1"
/>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lyt_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/plain_bg"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/lyt_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/header" />
</LinearLayout>
<LinearLayout
android:id="#+id/lyt_body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/lyt_Buttons"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imgfrontlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imgcenterlogo"
android:layout_alignParentTop="true"
android:layout_marginTop="61dp"
android:background="#drawable/front_logo"
/>
<ImageView
android:id="#+id/imgcenterlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnPersonaltrainer"
android:layout_centerHorizontal="true"
android:layout_marginBottom="29dp"
android:background="#drawable/center_logo" />
<Button
android:id="#+id/btnMyProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="21dp"
android:layout_marginLeft="32dp"
android:background="#drawable/myprofile" />
<Button
android:id="#+id/btnTaracker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgcenterlogo"
android:layout_alignParentRight="true"
android:layout_marginBottom="49dp"
android:background="#drawable/track" />
<Button
android:id="#+id/btnPersonaltrainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnMyProfile"
android:layout_alignLeft="#+id/btnAllExercises"
android:background="#drawable/personaltrainer" />
<Button
android:id="#+id/btnRandomworkouts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnPersonaltrainer"
android:layout_alignParentLeft="true"
android:background="#drawable/randomworkout" />
<Button
android:id="#+id/btnAllworkouts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnAllExercises"
android:layout_alignBottom="#+id/btnAllExercises"
android:layout_alignLeft="#+id/btnMyProfile"
android:background="#drawable/allworkouts" />
<Button
android:id="#+id/btnAllExercises"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnTaracker"
android:layout_alignParentRight="true"
android:layout_marginRight="40dp"
android:background="#drawable/allexercises" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>`
I need to create layout compatible for all screen sizes,created separte layout for xlarge sizes(800x1280,720x1280 etc). Here I cant upload image due to reputation,need to place one main button on center of the layout ,place 3 buttons on curvely on left and right side of middle button.please can anyone help me to create the layout compatible for all screen sizes without using dp or fixed points.
you can use android:layout_weight attribute. It will allow you to use percentages to define your buttons.
For EX:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0" >
<Button
android:text="left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50" />
<Button
android:text="right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50" />
</LinearLayout>
Now you have given percentages values to buttons so they will be displayed on any size of screen to their percent value of the whole screen.
This can be done in LinearLayout for RelativeLayout check second answer on this link
As mentioned in the question you want the buttons to be placed curvely at left and right of a center button, you can have a look at the link to get some idea to how to accomplish this: https://github.com/daCapricorn/ArcMenu
This is an open source project which I referred to create a Path like menu.
I have a TextView and 3 Buttons centered in a RelativeLayout, and the text in all three of them is left-justified with the parent center as the leftmost line.
I've tried changing the gravity of the TextView, Buttons, and layout but nothing is working and I'm baffled because I've never seen Android align text like this before.
I want the Button text to be centered within each Button and the top text to be center-justified.
An image of what it looks like is here: http://i.stack.imgur.com/9lHEd.png
Here's my 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" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:gravity="center_horizontal"
android:text="#string/greeting"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/startQuizButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:onClick="#string/startQuiz"
android:text="#string/start_quiz" />
<Button
android:id="#+id/lessonsButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/startQuizButton"
android:layout_centerHorizontal="true"
android:onClick="#string/startLesson"
android:text="#string/lessonsString" />
<Button
android:id="#+id/viewAllButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/lessonsButton"
android:layout_centerHorizontal="true"
android:onClick="#string/showAll"
android:text="#string/view_all" />
I included a RelativeLayout because you have it as your parent layout. However, i am not sure that it is needed. See if the following code is what you are looking for.
<?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="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Greetings" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Quiz" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lessons" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="View all questions" />
</LinearLayout>
</RelativeLayout>
add in button tab android:gravity="center"...see if it works..
u need to set layout width and height to fill_parent and everything will work fine
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="your text" />
if you want to centre some text, then you could also do it this way:
<TextView
android:text="Quantity"
android:textSize="34sp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_centerHorizontal="true"
android:paddingTop="10dp"/>
here i have changed made it horozontal by using android:layout_centerHorizontal="true"which takes a boolean value of true or false, by making it true, it will automatically be centred on all devices
hope that helps