killer
Reputation: 602
how to align controls in android linear layout
I am using android studio to design a dashboard. Now I am facing the issue that I have a linear layout where I want 2 buttons in each row, with one button on the left and other at right of the screen. My xml is like this:
<LinearLayout style="@style/ActivityBody"
android:orientation="vertical"
>
<LinearLayout android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="60dip"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
>
<Button
android:id="@+id/btnMaterialIssue"
style="@style/DashboardButton"
android:drawableTop="@drawable/materialissue"
android:text="Material Issue"
android:onClick="onGol"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnWorkCompletion"
style="@style/DashboardButton"
android:drawableTop="@drawable/workcompletion"
android:text="Work Completion"
android:onClick="onGol"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
My style file is like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="Theme" parent="android:Theme"></style>
<style name="Theme.D1t" parent="android:style/Theme.Light">
<item name="android:windowNoTitle">false</item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="Theme.D1" parent="android:style/Theme.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="Theme.tranlucent" parent="android:style/Theme.Translucent">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="Home">
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">0</item>
<item name="android:background">#fff</item>
</style>
<style name="HomeText">
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">0</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:textSize"> 18sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/foreground</item>
</style>
<style name="TitleBar">
<item name="android:id">@id/title_container</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">45dip</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">@color/title_background</item>
</style>
<style name="TitleBarOperation">
<item name="android:layout_width">45dip</item>
<item name="android:layout_height">fill_parent</item>
</style>
<style name="TitleBarLogo">
<item name="android:id">@id/title_logo</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">fill_parent</item>
</style>
<style name="TitleBarText">
<item name="android:id">@id/title_text</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">18sp</item>
<item name="android:paddingLeft">12dip</item>
<item name="android:paddingRight">12dip</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/title_text</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
<style name="TextBody">
<item name="android:textSize">15sp</item>
<item name="android:lineSpacingMultiplier">1.1</item>
<item name="android:textColor">@color/textBody</item>
<item name="android:textStyle">bold</item>
</style>
<style name="ActivityBody">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="DashboardButton">
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:drawablePadding">2dp</item>
<item name="android:textSize">9dp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#fff</item>
<item name="android:background">@null</item>
</style>
</resources
Upvotes: 0
Views: 1529
Answers (4)
AlexejWagner.java
Reputation: 218
Option: Use margins to the left of right button and to the right of the left button.
<LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="60dip" android:layout_gravity="left" android:layout_marginLeft="20dp" > <Button android:id="@+id/btnMaterialIssue" style="@style/DashboardButton" android:drawableTop="@drawable/materialissue" android:text="Material Issue" android:onClick="onGol" layout_marginRight="20dp" android:layout_gravity="left" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/btnWorkCompletion" style="@style/DashboardButton" android:drawableTop="@drawable/workcompletion" android:text="Work Completion" android:onClick="onGol" layout_marginLeft="20dp" android:layout_gravity="right" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>Option: place something (another view (Linearlayout)) in the middle, between the buttons.
Option: Try to play with layout_weight
<Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="New Button" android:layout_weight="1"/> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> </LinearLayout> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="New Button" android:layout_weight="1"/> </LinearLayout>
Upvotes: 1
hash
Reputation: 5406
you have to use android:layout_weight
to use layout_weight you want to set layout_width as "0dp"
android:layout_width="0dp"
android:layout_weight="1"
<LinearLayout android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="60dip"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
>
<Button
android:id="@+id/btnMaterialIssue"
style="@style/DashboardButton"
android:drawableTop="@drawable/materialissue"
android:text="Material Issue"
android:onClick="onGol"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnWorkCompletion"
style="@style/DashboardButton"
android:drawableTop="@drawable/workcompletion"
android:text="Work Completion"
android:onClick="onGol"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
Upvotes: 1
Ibrahim Sušić
Reputation: 438
Add all linearlayout in relativelayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:orientation="horizontal" >
And in linearlayout or button add android:layout_alignParentRight="true"
<Button
android:id="@+id/btnAddExpense"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:background="@drawable/stitch_button"
android:text="@string/add" />
Upvotes: -1
Moubeen Farooq Khan
Reputation: 2883
what you can do is to use the relative layout and align them to left and right
below is the code
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dip"
android:layout_gravity="left"
android:layout_marginLeft="20dp">
<Button
android:id="@+id/btnMaterialIssue"
style="@style/DashboardButton"
android:drawableTop="@drawable/materialissue"
android:text="Material Issue"
android:onClick="onGol"
android:layout_alignParentRight="true"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnWorkCompletion"
android:layout_alignParentLeft="true"
style="@style/DashboardButton"
android:drawableTop="@drawable/workcompletion"
android:text="Work Completion"
android:onClick="onGol"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Upvotes: 1
Related Questions
- How to align views in linear layout?
- Align elements in Linear Layout
- Aligning controls to appear horizontally centered on screen
- Aligning Elements in a Linear Layout
- Align controls in the center of screen
- Android: Alignment of Elements inside LinearLayout
- Aligning in linearlayout
- How to align views in LinearLayout
- Horizontal Alignment of UI controls in android
- Android LinearLayout Alignment