In android app development, with Linear Layout, I have two buttons side-by-side in a row. I made such an arrangement with TableRow and center aligned it. But the buttons dont fill completely the extra space. How do I make the buttons fill the extra space to the left and to the right?
Here the xml code:
<TableRow
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_margin="7dp"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Save"
android:textAlignment="center"
android:id="#+id/save"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:textAlignment="center"
android:id="#+id/cancel"
/>
</TableRow>
The LinearLayout has the following attributes:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context="com.appname.classname">
Here is the sample screen shot:
Instead of using the TableRow, use an horizontal LinearLayout inside the vertical LinearLayout. Note that the default orientation of LinearLayout is horizontal. So you can do soemthing like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/save"
android:text="#string/save"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content" />
<Button
android:id="#+id/cancel"
android:text="#string/cancel"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content" />
</LinearLayout>
The layout_weight attribute will make each item occupy the available space in that ration. In this case, the buttons will share the screen space in a 1:1 ratio.
Set the android:layout_marginRight of the first button to "-8dip" or even more. The sspace should be smaller or gone.
You can use RelativeLayout, there are no margins there.
Related
I want my buttons to look exactly like this but I cannot figure out how to do it. I have tried looking into different places on Google but none of the ways are like how I want it. I want to make my buttons have images and I was also wondering how I was going to resize these images on different screen sizes.
This is my layout_main.xml now.
<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.mudd.devin.drivenow.MainActivity"
android:weightSum="2">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_marginTop="199dp">
</Button>
<Button
android:layout_width="wrap_content"
android:id="#+id/button1"
android:layout_gravity="center"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_vertical_margin" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
You have 3 options, the easy ones first:
RelativeLayout with a View in its center.
Put a View in the center of the RelativeLayout and align all the other Views around it (toLeftOf, toRightOf, ...)
Use a nested LinearLayout with weights.
Use one LinearLayout horizontal and one vertical, give your views width and height of 0dp respectively and set all weight="1".
Write a custom layout / ViewGroup
Just write a simple layout, assigning your views equal width & height in onLayout. This needs some more knowledge, but is the most efficient solution if done correctly.
You can use the layout_weight propety for setting weight of precent from the screen to view.
For example :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="1" >
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="2" >
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="3" >
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="4" >
</Button>
</LinearLayout>
A bit late, but you could just use a RelativeLayout, put a dummy object centered, and set the rest of the elements around that central point.
I don't know if it works on previous versions, but in Android Studio 4.1, you can use constraintlayout and change these attributes of the button:
android:layout_width="0dp" // match constraint
android:layout_height="0dp" // match constraint
app:layout_constraintHeight_percent="0.5" // 50%
app:layout_constraintWidth_percent="0.5" // 50%
i developed one of application and now am facing problem that it show perfectly in my nexus7 but when i viewing other device screens the text view not fitting
i want all the screen as same as nexus7. its anyone can know the better solution for this please. unfortunately i don't have enough reputation so i cant post any screenshot here this my xml code
<?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:layout_gravity="center"
android:background="#color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="16dp" >
<ImageView
android:id="#+id/pointer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:src="#drawable/point" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="16dp" >
<TextView
android:id="#+id/name2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="97dp"
android:text="#string/numberusers"
android:textColor="#color/no_users"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp"
android:text="#string/number"
android:textColor="#color/no_users"
android:textSize="30sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="355dp" >
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:clickable="false" >
</ListView>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I m Not Sure But Remove Relative Layout And Use Linear Layout Its More Better Than Relative
The two textViews that you have in your layout use android:layout_width="wrap_content".
Use android:layout_width="match_parent" in the one you want to fill the screen.
every children relative layout in your xml has height and width as match_parent. Do you need it? Because if first layout have height as match_arent than it will not leave space for others. Try using "wrap_content" as height for inner relative layouts.
If I got your question, you have to set the width of the textview as
android:layout_width="match_parent"
But in my opinion, the hole screen is wrong. Use a LinearLayout (vertical or horizontal) and place there your first two textviews. And if you want more accuracy use the gravity feature in each text view and of course set a layout_weight for each TextView and weightSum in the LinearLayout.
I have two relative layout inside linear layout. I want the first relative layout left align and the second relative layout right align. I set the following line in the second relative layout but it is not working.
android:layout_alignParentRight="true"
and my full xml file goes here.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100">
<RelativeLayout
android:id="#+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="45"
android:background="#drawable/listview">
<ImageView
android:id="#+id/leftPanelImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="#drawable/sports"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="left panel"
android:layout_marginTop="5dp"
android:layout_below="#id/leftPanelImage"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="45"
android:background="#drawable/listview"
android:layout_alignParentRight="true"
>
<ImageView
android:id="#+id/rightPanelImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="#drawable/sports"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="right panel"
android:layout_marginTop="5dp"
android:layout_below="#id/rightPanelImage"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
My current code gives an output like this. Second layout start after first layout. I want it to start from the right from parent.
So my question is how can I set the second relative layout right align.
Thank you.
android:layout_alignParentRight is for children within relative layout. Since your relative layouts are children for linear layout, try using
android:layout_gravity="left"
and
android:layout_gravity="right"
Your layout seems to be very overkill, using LinearLayout weights and RelativeLayout for such a simple layout is not necesseary. Also both these methods requiere double measurement which is slower. I would suggest to always use as few elements as possible – for your layout try something like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="45"
android:layout_height="wrap_content"
android:drawableTop="#drawable/sports"
android:drawablePadding="5dp"
android:text="left panel"/>
<View
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="match_parent"/>
<TextView
android:layout_width="0dp"
android:layout_weight="45"
android:layout_height="wrap_content"
android:drawableTop="#drawable/listview"
android:drawablePadding="5dp"
android:text="right panel"/>
</LinearLayout>
android:layout_alignParentRight and android:layout_alignParentLeft are used to align a child right or left inside a relative layout. Of course, it won't work with LinearLayout as parent. You can change your parent layout to RelativeLayout.
android:layout_alignParentRight attribute is meant to work in children of Relative Layouts. You are using in in a child of a Linear Layout.
You can set it to the childs of the RelativeLayout OR use on the parent view android:gravity="right".
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="45"
android:background="#drawable/listview">
<ImageView
android:id="#+id/rightPanelImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="#drawable/sports"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right panel"
android:layout_marginTop="5dp"
android:layout_below="#id/rightPanelImage"/>
</RelativeLayout>
I have a view in which i'd like a button to be placed below a grid view and fill up the remaining space. The view is a relative layout, and no matter what attributes I give it, if I some how relate the button to the grid view, it disappears. It only appears if I place it in the relative view with it aligned parent bottom, but then it doesn't stretch. The solution I thought would be most likely, though it didn't work either, was to place the button in the relative view, alignParentBottom=True and then layout_below="id/gridview" (all that is psuedo code). This is my code right now:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/pin_fragment_background"
tools:context="com.lab125.viva_app.MainActivity$PlaceholderFragment" >
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/audioPIN_marquee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:paddingBottom="30dip"
android:gravity="center"
android:textSize="15sp"
android:textStyle="bold"
/>
<LinearLayout
android:id="#+id/keypad_wrapper"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_below="#id/audioPIN_marquee">
<GridView
android:id="#+id/keypad"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="5dip"
android:verticalSpacing="5dip"
android:numColumns="3"
android:stretchMode="columnWidth" />
<Button
android:id="#+id/start_ver_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:text="#string/Start_Ver_Button"
android:background="#drawable/button_style" />
</LinearLayout>
<Button
android:id="#+id/audio_playback_btn"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/keypad_wrapper"
android:text="play"
android:textSize="15sp">
</Button>
</RelativeLayout>
Again, with this code, the button does not show at all.
Edit: #Dave's suggestion was correct, and I could see the button after setting the orientation to vertical. However, the only reason I had placed the gridView in a linear layout in the first place was in attempt to just not have the button disappear when having its android:layout_below property to the gridView (by setting its android:layout_below to something else). The more accurate fix for what I wanted to do however, was to not have the gridView's width and height set to match_parent, which was the root cause behind why the button was disappearing. So, i set the gridView's height to wrap content, but that caused the grid to shrink to the point where each grid element's content was no longer visible. I found that the cause of that was => I was programmatically setting the width and height of the gridview to wrap its content, and then the width and height of the components inside by the width and height of the parent view. Realized that was quite cyclical which may be why the gridview was shrinking when I set it to wrap content. I then set the width and height of the grid Elements based on the dimensions of the screen, which fixed the size of the gridView. So everything pretty much works now.
Here is my new layout, if anyone is interested.
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/pin_fragment_background"
tools:context="com.lab125.viva_app.MainActivity$PlaceholderFragment" >
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/audioPIN_marquee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="20dp"
android:paddingTop="15dp"
android:gravity="center"
android:textSize="15sp"
android:textStyle="bold"
/>
<GridView
android:id="#+id/keypad"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/audioPIN_marquee"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="5dip"
android:verticalSpacing="5dip"
android:numColumns="3"
android:stretchMode="columnWidth" />
<Button
android:id="#+id/start_ver_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/keypad"
android:layout_alignParentBottom="true"
android:layout_marginTop="20dp"
android:textSize="15sp"
android:textStyle="bold"
android:text="#string/Start_Ver_Button"
android:background="#drawable/button_style" />
<!--
<Button
android:id="#+id/audio_playback_btn"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/keypad_wrapper"
android:text="play"
android:textSize="15sp">
</Button> -->
</RelativeLayout>
start_ver_btn won't show because the gridview has match_parent for both width and height, judging by your layout_width and heights, I think you want to set the LinearLayout's orientation to vertical.
I'd like to have two adjacent views, a first that is a fixed size and a second that adjacent to the first that uses the remaining space.
I could easily do this with LinearLayout and weights, but I would like to avoid the "nested weights are bad for performance" problem.
Is there another layout type that can accomplish the equivalent? Please provide an example if so.
A RelativeLayout could do what you want, for example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Button"
android:background="#99cc00" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Button"
android:background="#0077cc"/>
</RelativeLayout>
The first Button will be 200dp in width and the second will stretch to fill the rest of the parent's remaining width.
You could also use a RelativeLayout to split two views in equal sizes to avoid having double weights on some layouts.
I believe this could be done with a RelativeLayout. Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/button">
...
</LinearLayout>
</RelativeLayout>
You can try
<?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="horizontal" >
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="view with fixed size " />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="view with remaining space" />
</LinearLayout>
this is how weight works in LinearLayout:
At first, it will deduct the fixed dimension, then according to the weight, divide the available space, assign to the views which specify the weight attribute