How to nest LinearLayouts within a parent RelativeLayout in Android? - android

I am trying to make a sample Calculator application in which I need to nest multiple LinearLayouts within a parent RelativeLayout, each LinearLayout consists of 2 text boxes aligned horizontally and a radio button for the operation selected, so I have radio buttons for the operations of addition, subtraction, multiplication and division. and the UI should look something like the one in the image, wherein I have 2 text fields and a radio button aligned horizontally for every operation, but I am not able to come up with an effective way to nest the LinearLayouts effectively within the RelativeLayout, some help will be appreciated.
Here is the XML file that describes the UI of the application
<RelativeLayout 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" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText android:id="#+id/edit_number1"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<EditText android:id="#+id/edit_number2"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/addition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/addition"
android:checked="false" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_below="#+id/layout1">
<EditText android:id="#+id/edit_number3"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<EditText android:id="#+id/edit_number4"
android:inputType="number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/subtraction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/subtraction"
android:checked="false" />
</LinearLayout>
</RelativeLayout>

Change the layout_height on each LinearLayout to wrap_content.

Related

Android Grey Out LinearLayout

I have a linear layout which contains a set of child views (mixture of text, images and other layouts).
I want to grey out the linear layout and all the child views so they look disabled (similar to how a button works).
Is this possible to achieve? I know i can set a colour filter when painting on the canvas, is there something similar for layouts?
Another way is to call setEnabled() on each child (for example if you want to do some extra check on child before disabling), check out this answer:
https://stackoverflow.com/a/7069377/4840812
You can use Frame-layout
Using TEST ONE you can achieve above text view like disabled. You can set root layout clickable false for actually disable views inside layout.
TEST TWO is for understanding purpose. Like you need to manage order of view to show effect.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--THIS IS TEST ONE-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="150dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<!--THIS IS TEST TWO-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="300dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="400dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30dp" />
</FrameLayout>
To achieve your layout you can use the RelativeLayout. In RelativeLayout you can use the 2 different views or LinearLayout. In first layout you can add views according to your need, and In second layout you can set the alpha colorcode for disable the layout.
Please try below code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1"
android:layout_marginLeft="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/trans"/>
</RelativeLayout>
Here is output for code:

Linear Layout margin added by default. How to avoid that? Android

I have created 4 buttons in linear layout. This is my xml.
<?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="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button android:id="#+id/button1"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="Account"
/>
<Button android:id="#+id/button2"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="History"
/>
<Button
android:id="#+id/button3"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="Settings"
/>
</LinearLayout>
But above layout adding margins all sides for all 3 buttons. Why is that margins is added by default? How to avoid that?
Try this,it works like you want,
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button android:id="#+id/button1"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="Account"
android:background="#80ffdd10"
/>
<Button android:id="#+id/button2"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#800aad10"
android:text="History"
/>
<Button
android:id="#+id/button3"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="Settings"
android:background="#8c9eff"
/>
</LinearLayout>
These are the shadow by default of Android Button Widget. However If you want to attach one button with another forcefully then add the following properties to each buttons as per needed
android:layout_marginRight="-5dp"
android:layout_marginLeft="-5dp"
Note : Increase or decrease the value (Currently -5dp) of the properties as it suits.
In button, set android:layout_width="0dp" rather than wrap_content
It's because you have given weight attribute to buttons in horizontal LinearLayout, each Button will fill 1/3 of the root layout horizontally.
And if you are using a vertical Linear Layout, you should set android:layout_height="0dp"
Hope this will help you.
You can use custom background, it will solve your problem
android:background="#8c9eff"

Show 3 scrollable ListViews of equal height in Android Layout

I am trying to show three different vertical sections in my Android layout on one screen, each taking up one third of the screen, one on the top, one in the middle, and one on the bottom. Each section has a TextView and a ListView, and the ListViews can scroll so that you can see all items, but the overall page does not move. I have tried putting each TextView and ListView in a LinearLayout and setting the height of each LinearLayout to one third the total height of the screen, but the first ListView just shows all the items in it, taking up most of the screen, and the other sections are pushed down. I also tried using layout_weights, but for some reason it did not work. (EDIT: Setting layout_weight="1" ended up working, I'm not sure what I did wrong the first time) How can I make this work, or is there a better way to go about this?
<LinearLayout
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal" >
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#FF0000"/>
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#00FF00">
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#0000FF">
</LinearLayout>
This will give you three equally wide columns: to make it rows, change the orientation to vertical and swap the values of layout_height and layout_width for each listview. If you need to add the TextViews, you'll have to make each listview in this code either a RelativeLayout LinearLayout or FrameLayout, using same width/height/weight and arranging the ListView and TextView inside to taste. To do this most efficiently, use a Framelayout and use a margin on the listview to offset it from the TextView. You can place the TextView relative to the ListView inside the FrameLayout by using the layout_gravity in the TextView.
Ie (swapping the first "column"):
<FrameLayout android:orientation="vertical" android:layout_width="0dp"
android:layout_weight="1" android:layout_height="match_parent"
android:background="#FF0000">
<TextView android:text="Column!" android:background="#3Eff0000"
android:layout_height="40dp" android:layout_width="match_parent">
<ListView android:layout_marginTop="48dp" android:layout_height="match_parent"
android:layout_width="match_parent" android:background="#8Aff0000"/>
</FrameLayout>
Use this:
<?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"
android:weightSum="3">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff89ff91">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#1"
android:id="#+id/textView"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_below="#+id/textView" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffff8177">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#2"
android:id="#+id/textView2"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_below="#+id/textView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffe85d">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#3"
android:id="#+id/textView3"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView3"
android:layout_below="#+id/textView3" />
</RelativeLayout>
</LinearLayout>

One of two Android ListView filling too much space

I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>
It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.

Android how to arrange multiple rows in one HorizontalScrollView

I'm searching for a solution to set up multiple rows in a scrollview.
I have 15 buttons (3*5) and want to scroll to the right so there are another 15 buttons.
What I already got: all buttons are in one huge row ( at least, scrolling iself worked ).
Then I tried to set the HorizontalScrollView on the highest layer (line #1 in XML) and after that a LinearLayout that contains 3 further LinearLayouts so the tree looks like this:
<HorizontalScrollView
<LinearLayout
<LinearLayout
(buttonABCDEF)
</LinearLayout>
<LinearLayout
(button01234)
</LinearLayout>
<LinearLayout
(button56789)
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
What I get then is a (~80x80) rectangle (the linear layout in the ScrollView) that shows a text (the first view in my layout) and a button (buttonA - the first one) that is so stemmed (by whatever) that every character is written into a new line. (The amount of letters= amount of lines= button height). This isn't scrollable at all.
I'm trying to post only the code that is relevant. Note: that android:layout stuff is not important for you since it is not working in a linear layout:
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:screenOrientation="landscape"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/horizontalScrollView1"
tools:context=".MainActivity"
android:background="#android:color/black"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation='vertical' >
android:layout_width="9dp"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
android:layout_width="9dp"
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:textColor="#android:color/white"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/buttonB"
android:layout_toRightOf="#+id/textView1"
android:width="70dp"
android:text="A" />
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonD"
android:layout_alignBottom="#+id/buttonD"
android:layout_toRightOf="#+id/buttonD"
android:width="70dp"
android:text="B" />
<Button
android:id="#+id/buttonF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonE"
android:layout_alignBottom="#+id/buttonE"
android:layout_toRightOf="#+id/buttonE"
android:text="C" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#drawable/eins"
android:text="0" />
/LinearLayout>
/LinearLayout>
</HorizontalScrollView>
Thanks a lot for you help.
I fixed it making the layout completely new. Even that of course not the best way, it seemed faster than searching for errors

Categories

Resources