I am going through the tutorials at developer.android.com and they do not cover something I want to try.
In my XML file (LinearLayout) I have 3 elements, a textblock and 2 buttons.
I would like to have the TextBlock taking up all available width. IN HTML terms I would like it to be block.
Then underneath I would like the 2 buttons to be on the same line. In HTML terms I would like it to be inline.
My XML:
<LinearLayout android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Another option:
Create a linearlayout and add textview and another linearlayout with orientation horizontal within that the 2 buttons.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
you can sort of do it in one linear layout, but it's not going to be very flexible. You'd either want to use a relative layout and position the button below the text view or you can use two linear layouts (first is vertical orientation containing the textview and the second linear layout, that one is a horizontal linear layout containing the two buttons)
Simple fixes:
<TextView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<Button android:id = "#+id/thisbutton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="thisbutton"
/>
That's the basic idea.
Look up all the features that are available in the layouts. Because there are a lot, and they are quite flexible.
Related
In Android Studio I am try to make a scrollable section where there is two buttons and some text on each row. The scrollable is only letting me put one element per row. What am I doing wrong?
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline8"
app:layout_constraintEnd_toStartOf="#+id/guideline6"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toTopOf="#+id/guideline5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</ScrollView>
You are using a Linear Layout. It only allows one element per row/column.
To have multiple elements in a row or column, you would use a Constraint Layout or GridView.
However, if you are making a list, I would recommend you to use a RecyclerView.
I'm trying to create a layout (which I could include in other layouts), which contains 3 Image buttons (back, menu, forward).
Those 3 Image buttons should be on the same line (because later I would include this layout to other layouts in the bottom of each layout)
I don't understand what I'm doing wrong, I can't see the all 3 Buttons, and they are not in the same row (same horizontal line)
<?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">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
it won't fit because it looks like some of your images are way too big, but we can proportionally weight it so it'll fit.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
using weightSum and layout_weight, 3 and 1, we ensure they all each take 1/3 of the space in your linearlayout (oh, and layout_width is 0 because layout_weight overrides it)
You can use LinearLayout with orientation as "horizontal". This will make all the views appear in a row. This LinearLayout can reside as a nested layout inside a another layout, like for example RelativeLayout. You can use this layout design by importing it in other XMLlayouts too.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
Looks like different sized images.
Assuming you have these in a horizontal linear layout; Try changing the height to a fixed dp and put the weight to 1 for all three imagebuttons
Example:
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="35dp"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
If you do this for all three imagebuttons, they will fill the screen and all be the same height, right beside each other.
I want to create a layout of the list item as shown in the image.I divided it into three parts taking whole layout as Linear(orientation-horizontal).Three parts are
1) Image
2) Paragraph
3) three edit text in a linear layout.
I have problem in the second part as the length of paragraph (Text View) it disturbs the next part.I also try by putting weight in relative layout but it does not work.What is the solution for this problem?
How to do something like this.
Code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/item_icon"
android:src="#drawable/hammer"
android:layout_weight="1"
android:layout_width="100dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/item_name"
android:layout_toRightOf="#id/item_icon"
android:layout_weight="1"
android:text="skvnksjdjbkjbkjb"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/item_detail"
android:layout_toRightOf="#id/item_name"
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detail1"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/detail2"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/detail3"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
if you use layout_weight, the layout_width (for horizontal LinearLayouts) should be set to 0dp
I was thinking it would be something like android:layout_startOf"centerHoriztonal" or something like that but I have searched and couldn't find anything. If it helps I am trying to make a soundboard app where all the buttons can be the same size across multiple device screens.
try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:text="Here is button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button2"
android:text="Here is button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
You can wrap the button(s) inside a horizontal LinearLayout and use layout_weight to divide the screen in half and then layout_alignParentLeft/layout_alignParentRight to align the buttons inside a RelativeLayout that takes up exactly half the screen width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button Text"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
Another way to do it is to create a dummy view object that is centered horizontally in the parent view, and align your buttons to the left or right of it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/dummyview"
android:layout_width="0px"
android:layout_height="0px"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dummyview"
android:text="Button Text"/>
</RelativeLayout>
Are you sure you want the same size of buttons in all devices? People try to avoid it and make make view elements flexible.
Anyways if you want to set same size just directly write in layout
android:layout_width = "#dimen/valueForButton"; //some absolute value
For starting at same point, just add all buttons inside LinearLayout and make some operations there, such as
android:layout_gravity = "center_horizontal";
Your layout must be something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
I've created a custom listview. All works fine though I struggle with the layout of the listitem.
The idea is to have a textview which can have a variable length (multilines is possible) and two buttons next to the textview all on one line.
This is what I have:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight=".80" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_weight=".10"
android:layout_toRightOf="#id/textView1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_weight=".10"
android:layout_toRightOf="#id/button1" />
This works fine though my problem is that the textview fills out the parent and pushes the buttons of the screen. (when I have a short text the buttons are vissible)
So basically, what I need is a 80% wide textview aligned to the left and two 10% wide buttons aligned to the right. Can anyone guide me in the right direction?
Thanks
You can't use layout_weight with RelativeLayout. Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
</LinearLayout>
Change to LinearLayout. You cannot use layout_weight with RelativeLayout.
Good Luck