So I have an ExpandableListView and basically I have some text (person's name), and then I want a button on the same row (towards the right side if possible). Currently, this code in my XML file it has the text on one line, and then the button on the next line, I've played around with it but can't figure out how to get it both on one line.
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:id="#+id/lblListItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="0.8"
android:textSize="11dp"
android:text="Checkout"
android:id="#+id/checkout" />
</LinearLayout>
This will do the trick.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="horizontal" // Edited here
android:weightSum="1" > // here
<TextView
android:id="#+id/lblListItem"
android:layout_width="match_parent" //and here
android:layout_height="35dp"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center_vertical"
android:layout_weight="0.2" // here
android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent" // and here
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="0.8" // and here
android:textSize="12dp"
android:text="Checkout"
android:id="#+id/checkout" />
</LinearLayout>
Make sure of 2 things when using weightsum:
if orientation is horizontal, width of all child views to be displayed in a row will need to have "match_parent" and some value for layout_weight.
0.2 will give 80% of horizontal width of parent and 0.8 will give 20%.
You have
android:orientation="vertical"
in your parent LinearLayout which stacks elements from top to bottom (naturally). Remove that line (since horizontal is the default orientation for LinearLayout). Then you would need to use weight or margin to get it positioned where you want.
Another option would be to replace your LinearLayout with a RelativeLayout. This will allow you to use android:alignParentRight="true" on your Button to put it on the right side of the screen (RelativeLayout puts Views at the top-left by default).
Related
What I want is that I can have 1 ImageView on the left and next to the imageview 2 textviews under each other. I can't get the second textview under the textview.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:layout_gravity="left"
android:layout_weight="1" />
<TextView
android:id="#+id/textview_name"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="2"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="2"
android:gravity="left"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textSize="20sp" />
</LinearLayout>
The result looks now:
Result
Expected result
You can use something like below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:src="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textview_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Left text"
android:textColor="#color/colorPrimaryDark"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Right text" />
</LinearLayout>
</LinearLayout>
You can nest containers like LinearLayout,RelativeLayout, FrameLayout, etc inside each other to create complex Layouts.
Also, I'd advise knowing what each tags do by Googling them before using them inappropriately anywhere inside your layout. It needed me solid 5 minutes to fix your layout because you added layout_weight basically anywhere you pleased!
Your linear layout orientation is horizontal, so you can't get textviews vertically aligned unless you take one more linear layout for the 2 textviews with vertical orientation. Otherwise, you can do this with a single Relative layout.
Here is the structure
<LinearLayout> - horizontal orientation
<Imageview/>
<LinearLayout> - vertical orientation
<Textview/>
<Textview/>
</LinearLayout> - vertical orientation
</LinearLayout> - horizontal orientation.
You have set the orientation of the Linear Layout as horizontal. This will make all the children (in your case, ImageView, TextView name and TextView description) to be horizontally laid out next to each other.
There are many ways to do this.
1 way to achieve this is by using RelativeLayout and then you can use
android:layout_toBottomOf="#id/textview_name"
to get the description textview to be below the name text view.
For the image view, you can use the property
android:layout_alignParentLeft="true"
to make the image view to stick to the left border. Please experiment with RelativeLayout to get the desired result.
Please use this codelab from Google to use ContraintLayout. https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
I need to set two buttons side by side... I have used linearlayout for it... I have given each button to 0.5 layout_weight as i want each one to take equal space..I also make button to take equal height. The problem i am facing that left button will slide down if i give right button to match its height.
<LinearLayout
android:id="#+id/buttonLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/botomMarginTextView"
android:orientation="horizontal" >
<Button
android:id="#+id/id1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginLeft="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name1" />
<Button
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name2" />
</LinearLayout>
Edit :
Please give left button longer text and right button smaller
text..otherwise it is producing right layout
I am using #android:style/Theme.Black.NoTitleBar.Fullscreen . If i am going with normal theme then it is working fine
Now how to make this button keep side by side and also to make them of equal height?
To android:layout_height attribute of LinearLayout, give value of 60dp
android:layout_height="60dp"
and to android:layout_height attribute of both Button, give value of match_parent
android:layout_height="match_parent"
So, updated XML snippet will be
<LinearLayout
android:id="#+id/buttonLayout"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_below="#id/botomMarginTextView"
android:orientation="horizontal" >
<Button
android:id="#+id/id1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name1" />
<Button
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name2" />
</LinearLayout>
I have couple textfields and button a the bottom inside LinearLayout and it looks ok. I want to add around ScrollView so when keyboard shows that I can scroll. When I add ScrollView my button from bottom and shows up on center screen. (If there is no ScrollView it is a the bottom of screen, where it should be). What to change to make this works and button be inside scroll but on the bottom of screen.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:layout_width="269px"
android:layout_height="161px"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/show" />
<com.example.widgets.CustomTextView
android:id="#+id/txt_message"
style="#style/paragraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80px"
android:text="#string/pin/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="150px"
android:layout_weight="1"
android:gravity="top|center_horizontal"
android:orientation="vertical" >
<com.example.widgets.CustomTextView
style="#style/caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:text="#string/pin_enter" />
<com.example.widgets.CustomEditText
android:id="#+id/txt_code"
style="#style/pin"
android:layout_width="310px"
android:layout_height="110px"
android:layout_gravity="center_vertical|center_horizontal"
android:background="#drawable/selector_edit_text"
android:gravity="center_vertical|center_horizontal"
android:maxLength="4"
android:numeric="integer"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:textAlignment="center" />
</LinearLayout>
<Button
android:id="#+id/btn_save"
style="#style/button"
android:layout_width="625px"
android:layout_height="110px"
android:layout_gravity="center_horizontal"
android:background="#drawable/button"
android:enabled="false"
android:text="#string/login" />
</LinearLayout>
</ScrollView>
You basically can not.
ScrollView's child is per definition measured as wrap_content. That's the reason, why your inner Views is shrinked to the minimum size fitting the content.
Move the Buttons out of the ScrollView (on the same level of hierarchy), if you want to have them fixed on the bottom.
I have a TextView inside a LinearLayout and i want to align it in center of the page but its not happening, i have tried the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
Change the TextView layout_width to "match_parent", the issue is that "gravity" works only for the child of the View in this case the "text" it self, hence if you specify the object width as just to wrap its content, it means there's no space to center to, filling the whole parent and using "gravity" center would do the trick.
The other thing you can do is changing the "android:gravity" property to "android:layout_gravity" and center horizontal, this way you are telling the TextView itself to move to the center...
As best practice always try to use RelativeLayouts and avoid LinearLayouts, they provide a better way to manipulate Views position and are "device size fragmentation" friendly, RelativeLayout have plenty of methods to position views on the most common positions including center, top, bottom etc...
Hope this Helps.
Regards!
Try changing the layout. Linear Layout is meant for displaying ui components in rows. If you want to center your textview using you layout, I suggest changing the layout to Relative Layout.
First of all you cant set the property android:layout_centerHorizontal="true" for a LinearLayout. To make it centered you need to make layout height and width to match_parent like below,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
Try using:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
I have a TextView and Button in my program and I cannot get the size of the Button and the TextView to be the same. How can I do this?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:background="#999999"
android:gravity="center"
>
<Button
android:id="#+id/button1"
android:layout_width="130dp"
android:layout_height="60dp"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="130dp"
android:layout_height="60dp"
android:background="#ffffff" android:textColor="#000000"
android:textSize="24dp" android:textStyle="bold"
android:gravity="center"
android:text="0.0" />
</LinearLayout>
Actually, they both have the same size, but the Button uses an image as a background and it seems it has some margins.
To test this, override the background of button with a color and see they are the same size:
android:background="#0F0"
So, the solution would be to provide a custom background for your button, or adapt the TextView to match the Buttons' width and height, minus the margins of Button, which personnaly I don't think is the best approach.
When I want multiple controls to have the same size what i generally do is put them in a TableLayout.
In your case, i'd put a TableLayout inside the linear layout and put the button and textview inside a TableRow, set the weightsum for the TableRow to 2 and set the weights of the individual controls to 1.
This would make the controls take up the same amount of space on the screen. A sample xml is shown below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/hello_world">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>