I have a layout it has a frame layout which will show image and on that image I want to show two buttons on the top of screen. On the background of these two screen there is a transparent horizontal bar which I am setting as the background of the Relative or LinearLayout.
and then I want to put two buttons over it which has a good distance between them and I want the background of relative layout just get end after the right/left edge of buttons. In other case I do not want the bar to fill the whole width. What I want here , I am posting here in the image. check out the link for better understanding that what I want. I have done this but this is not so much flexible as on some devices It looks odd.
and If I use the weight and weight some then the width of button images stretch which looks very odd as my images stretch in width. I have images in square form.
Here is what I am trying :
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/transparent_image"
android:layout_gravity="center_horizontal">
<ImageButton
android:id="#+id/btn_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#drawable/btn_gallery"
/>
<TextView
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageButton
android:id="#+id/btn_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#drawable/btn_share" />
</LinearLayout>
set layout_width to match_parent.
and add android:gravity ="center" to both button.
Use this 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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal"
android:layout_height="60dp" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="0.1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="0.1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
try this to make a better alignment as per ur reference.
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#android:color/transparent"
android:layout_gravity="center_horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:gravity="center"
>
<ImageButton
android:id="#+id/btn_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_launcher"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:gravity="center"
>
<ImageButton
android:id="#+id/btn_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</LinearLayout>
Related
In some ListView's holder I got empty spaces even it has a small text in it.
TextView is set to wrap_content. My listview layout xml item has several buttons. I just set these buttons VISIBILITY.GONE.
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textView"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="photo"
android:id="#+id/photo"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:baselineAligned="false"
android:clickable="false"
android:focusable="false">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/left" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New Button"
android:id="#+id/right" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:baselineAligned="false"
android:clickable="false"
android:focusable="false" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_gravity="center_horizontal"
android:layout_weight="4"
android:gravity="center_horizontal"
android:hint="#string/answer"
android:maxLength="4" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/ok"
android:id="#+id/ok" />
</LinearLayout>
</LinearLayout>
Put the root as wrap_content instead of match_parent for the height.
What will happen in a vertically scrolling listview (read, infinite height available for children) if it's children say they want match_parent?
Can't see your image, but in a RecyclerView, each item's height would be the height of the RecyclerView.
Instead of using "match_parent" in the top use "wrap_content" for height
I'm inexperienced with Android and working on a layout that is supposed to have a bottom area with 3 buttons displayed this way:
I managed to almost get it like this, except that depending on the screen, the bottom buttons will be either overlapping each other or too far off. The buttons are supposed to be perfectly aligned below the "APPLY" button, but I can't seem to get it right.
Here's my current code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp">
<RelativeLayout
android:id="#+id/relapply"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/apply_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:width="320dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_below="#id/relapply">
<Button
android:id="#+id/discard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/discard_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_marginStart="30dp"
android:width="154dp"
android:layout_alignParentStart="true"/>
<RelativeLayout
android:layout_width="12dp"
android:layout_height="30dp"
android:layout_toLeftOf="#id/save">
</RelativeLayout>
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/save_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_marginEnd="30dp"
android:width="154dp"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</RelativeLayout>
This is my code for the layout in which the buttons are in. And then everything's inside a linear layout xml test file I made. Any tips on how to improve this?
Thanks!
first of all you have way to much relative layouts, much more than you need.
you can try this layout here (I removed the background and hardcoded the text for demonstration purposes)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<Button
android:id="#+id/apply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Top Button"
android:textColor="#android:color/white"
android:textSize="15sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/apply"
android:orientation="horizontal">
<Button
android:id="#+id/discard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Bottom Left Button"
android:textColor="#android:color/white"
android:textSize="15sp" />
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Bottom Right Button"
android:textColor="#android:color/white"
android:textSize="15sp" />
</LinearLayout>
</RelativeLayout>
you can set the layout margins on the outer relative layout (e.g. android:layout_margin="8dp"
the layout works like this:
in the top row there is just the top Button. Below it there is a horizontal linear layout containing two buttons with
android:layout_width="0dp"
android:layout_weight="1"
This ensures both buttons span equally horizontal (because they have the same width). If you want the whole layout have a specific width just set the android:layout_width="match_parent" from the relative layout to android:layout_width="320dp"
You can do as follow:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:background="#color/background_floating_material_dark">
<Button
android:id="#+id/apply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/apply_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_marginBottom="10dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/discard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/discard_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_weight="0.9" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"></LinearLayout>
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ripple_buttons_carousel"
android:text="#string/save_button"
android:textSize="15sp"
android:textColor="#android:color/white"
android:layout_weight="0.9" />
</LinearLayout>
</LinearLayout>
And the output is near about this:
You can also use following code.....
This is simple and easy.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Apply" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="Discard" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:text="Save" />
</LinearLayout>
</LinearLayout>
I'm trying to put some TextViews on black-transparent layer.
To make the layout blurry, I set alpha(0.3) inside layout
It works well. The layout became transparent.
But the problem is that the textview inside the layout also becomes blurry.
How can I fix it?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#E6000000"
android:alpha="0.3"
>
<TextView
android:id="#+id/text_feed_myPlant_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Error"
android:textSize="19dp"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<TextView
android:id="#+id/text_feed_myPlant_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14dp"
android:textColor="#FFFFFF"
android:gravity="right"
android:layout_gravity="center_vertical"
android:paddingRight="10dp"
android:layout_weight="1.5"/>
</LinearLayout>
What you can do is take a relative layout and take a view which covers all of it and set the aplha to that view.Then you can take your linear layout and set it as the second child of the relative layout.
<?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="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#E6000000"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
>
<TextView
android:id="#+id/text_feed_myPlant_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Error"
android:textSize="19dp"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<TextView
android:id="#+id/text_feed_myPlant_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14dp"
android:textColor="#FFFFFF"
android:gravity="right"
android:layout_gravity="center_vertical"
android:paddingRight="10dp"
android:layout_weight="1.5"/>
</LinearLayout>
</RelativeLayout>
I did this and it works fine.
I think this is Not really the best of doing it. But it will fix your problem
<FrameLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E6000000"
android:alpha="0.3"
>
<TextView
/>
<TextView
/>
</LinearLayout>
I'm currently working on an Android app and I would like to make a nice layout.
What I'm trying to achieve is the following layout:
The circles will be of equal size ofcourse. Besides that i need to be able to click them so they need to be buttons or imageviews.
What would be the best approach to achieve this kind of layout?
You could use a RelativeLayout, and say where each of the dots is supposed to be in relation to each of the others.
You could also use a LinearLayout, creating three 'rows' of buttons, the top and bottom rows containing two of the 'dots' and the middle one containing one in the center.
The layout would look something like this:
And the code would be something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot"
android:background="#android:color/transparent"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot2"
android:background="#android:color/transparent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot3"
android:background="#android:color/transparent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot4"
android:background="#android:color/transparent"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot5"
android:background="#android:color/transparent"/>
</LinearLayout>
</LinearLayout>
Try this..
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
/>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
/>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
</LinearLayout>
Use a nest of LinearLayout or RelativeLayout. To use the images as button, then use ImageView and indicate in the xml corresponding ID for each image so you can use it in your activity.
I have 3 imageviews but since they overlap i wont make them clickable, i want make buttons on top of each imageview(but smaller).
I know in RelativeLayout there is easy way out using align_baseline but it is very important that i use LinearLayout for these images because they use layout_weight
And its important that button is connected with imageview, not just appearing on top of it
And here is my code it might help
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/twitter"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:weightSum="3"
android:layout_marginBottom="25dp"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imgDis"
android:layout_weight="1"
android:layout_width="300dp"
android:layout_height="120dp"
android:layout_marginBottom="-20dp"
android:background="#drawable/img1" />
<ImageView
android:id="#+id/imgCal"
android:layout_weight="1"
android:layout_width="300dp"
android:layout_height="120dp"
android:layout_gravity="right"
android:layout_marginBottom="-25dp"
android:background="#drawable/img2"
android:paddingLeft="25dp" />
<ImageView
android:id="#+id/imgDe"
android:layout_weight="1"
android:layout_width="300dp"
android:layout_height="120dp"
android:background="#drawable/img3" />
</LinearLayout>
...
</RelativeLayout>
put the image in another linear layout vertical and place that layout inside your mainlayout and give the wieght to this linearlayout instead of the image
Here is your answer, while using weight you must define 0dp to height/width to view as per case.
You want Button on every Imageview something like below?
I tried, check below xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="25dp"
android:orientation="vertical"
android:weightSum="6" >
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="0.5"
android:text="button first" />
<ImageView
android:id="#+id/imgDis"
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="1.5"
android:background="#drawable/logo" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="0.5"
android:text="button first" />
<ImageView
android:id="#+id/imgCal"
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_gravity="right"
android:layout_marginTop="5dp"
android:layout_weight="1.5"
android:background="#drawable/logo"
android:paddingLeft="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="0.5"
android:text="button first" />
<ImageView
android:id="#+id/imgDe"
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="1.5"
android:background="#drawable/logo" />
</LinearLayout>
</RelativeLayout>