GridLayout inside a LinearLayout not showing at all and am not sure why. trying to make a simple calculator but i can't get the buttons to display.
changed height, width background color but not sure why is not displaying.
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="horizontal"
>
<TextView
android:id="#+id/main_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="123456789"
android:gravity="end"
android:background="#color/mainDisplay" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:columnCount="4"
android:rowCount="5"
>
<Button
android:id="#+id/bc"
android:text="#string/bc"
/>
<Button
android:id="#+id/bparentesis"
android:text="#string/bparentesis"
/>
<Button
android:id="#+id/b7"
android:text="#string/b7"
/>
<Button
android:id="#+id/b8"
android:text="#string/b8"
/>
<Button
android:id="#+id/b9"
android:text="#string/b9"
/>
<Button
android:id="#+id/bmulti"
android:text="#string/bmulti"
/>
<Button
android:id="#+id/b4"
android:text="#string/b4"
/>
</GridLayout>
i trying to make a 4x5 grid of buttons for a calculator
I think you should use this :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
And I think for calculator if you use horizontal linearlayout instead of gridlayout its better too.
in the other hands for per row use horizontal linearlayout.
TextView's width is match_parent change it to wrap_content it will work and show your GridLayout or
chanage your orientation of LinearLayout to vertical
Related
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"
I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?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="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
I have three linear layouts in a sidebar. I want the first to fill whatever space remains and the other two will specify their height. The problem I'm having is that the first view is not stretching to fill the height at all. See my code below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#FF44807f"
android:id="#+id/musicSideBar">
<!-- I want this layout to fill whatever vertical space remains -->
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:background="#FF003938"
android:layout_weight="1">
</LinearLayout>
<!-- this has a list of ImageView, so I set it to wrap_content -->
<LinearLayout
android:layout_below="#id/sidebarHeader"
android:id="#+id/mediaControls"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
android:background="#FF095150"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/play_pause_btn"
android:src="#drawable/play_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/stop_btn"
android:src="#drawable/stop_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prev_btn"
android:src="#drawable/prev_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/next_btn"
android:src="#drawable/next_icon"
style="#style/media_button"
/>
</LinearLayout>
<!-- A custom view that I specify it's height in onMeasure using setMeasuredDimensions -->
<jaywhy13.gycweb.components.NowPlayingView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF44807f"
android:paddingTop="10dp"
/>
</LinearLayout>
It works like I think it should in Android Studio Preview
But it doesn't work when I run it through the emulator.
You can see that for the simulator, the linear layout doesn't stretch at all.
layout_weight wont work like this for this to work properly you need to set layout weight to all the layouts inside LinearLayout that will fix the height of all 3 layouts which you don't want.
You should just set height of first layout to match_parent and next layouts to wrap_content and set the gravity of the parent layout to bottom.
This will put bottom most layout first with height wrap_content then it will put 2nd layout with height wrap_content and last the top most layout with whatever height is left
example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#FF44807f"
android:gravity="bottom" <!--here-->
android:id="#+id/musicSideBar">
<!-- I want this layout to fill whatever vertical space remains -->
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:background="#FF003938"
>
</LinearLayout>
<!-- this has a list of ImageView, so I set it to wrap_content -->
<LinearLayout
android:layout_below="#id/sidebarHeader"
android:id="#+id/mediaControls"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
android:background="#FF095150"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/play_pause_btn"
android:src="#drawable/play_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/stop_btn"
android:src="#drawable/stop_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prev_btn"
android:src="#drawable/prev_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/next_btn"
android:src="#drawable/next_icon"
style="#style/media_button"
/>
</LinearLayout>
<!-- A custom view that I specify it's height in onMeasure using setMeasuredDimensions -->
<jaywhy13.gycweb.components.NowPlayingView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF44807f"
android:paddingTop="10dp"
/>
</LinearLayout>
Try to replace outer LinearLayout with RelativeLayout. Works for me with android:layout_height="0dp" and android:layout_weight="1" in inner view.
Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)
as you can see the image on the right is shifted upwards, how do i stop this?
Here's the layout file im using:
<?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="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
</LinearLayout>
I am going to be using more rows of images hence the extra LinearLayout
Use layout_weight to divide your layout equally. Try the following code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
</LinearLayout>
</LinearLayout>
Also, never use sp for specifying layout dimensions. Use dp instead.
You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them.
so,try this. It will work.
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
</LinearLayout>
To fix Vertical alignment :
Use android:layout_height="match_parent" in your ImageView
by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"
Now Question arises why the height will be same for both ImageViews ?
Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !
and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !
To Fix Horizontal alignment :
use android:layout_weight="equal weight value for btoh"
change your code to
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
I have a vertical LinearLayout containing an ImageView and a few other layouts and views.
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/main_search"
android:gravity="center"
android:textStyle="bold" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_city_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_city_prompt"
android:entries="#array/search_city_array" />
<Spinner
android:id="#+id/search_area_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_area_prompt"
android:entries="#array/search_area_array" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_rooms_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_rooms_prompt"
android:entries="#array/search_rooms_array" />
<Spinner
android:id="#+id/search_min_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_min_prompt"
android:entries="#array/search_min_array" />
<Spinner
android:id="#+id/search_max_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_max_prompt"
android:entries="#array/search_max_array" />
</LinearLayout>
<Button
android:id="#+id/saearch_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/search_button"
android:onClick="searchButton" />
</LinearLayout>
My problem is that when the activity is displayed, the ImageView has a padding at the top & bottom. I've confirmed it is the ImageView (by setting a background colour on the ImageView).
The image is 450x450px. Setting the height manually to 450px produces the desired effect (no padding), and setting it to 450dp produces the same effect as using wrap_content.
It seems that android is taking the height of the image (450px) and setting the height of the ImageView to the same value, but in dp.
Any ideas as to what I can do to fix this? I don't want to use absolute values as I'll be providing different images for different screen densities.
I had a simular issue and resolved it using android:adjustViewBounds="true" on the ImageView.
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />