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.
Related
I'm still beginner at different Android layouts. Here is simple linear layout:
<LinearLayout
android:layout_height="50dp"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:gravity="end"
android:padding="5dp">
<ImageButton
android:id="#+id/bt_template"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_template_button"
android:scaleType="fitCenter"
android:background="#ffffffff"
android:contentDescription="Choose template"/>
<ImageButton
android:id="#+id/bt_captureImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_camera_button"
android:scaleType="fitCenter"
android:background="#ffffffff"
android:contentDescription="Choose template"/>
<Button
style="#style/MyRedButton"
android:layout_margin="0dp"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:text="#string/str_new_mail_activity_button_send"
android:id="#+id/bt_send" />
</LinearLayout>
I want 2 buttons to go left and third button go right. How do I do that?
Blue buttons need to be on left side and red button on right side. How can I do that?
This is a possible option for using LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:layout_height="50dp"
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="5dp">
<ImageButton
android:background="#ffffffff"
android:contentDescription="Choose template"
android:id="#+id/bt_template"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/ic_template_button" />
<ImageButton
android:background="#ffffffff"
android:contentDescription="Choose template"
android:id="#+id/bt_captureImage"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/ic_camera_button" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
style="#style/MyRedButton"
android:id="#+id/bt_send"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:text="#string/str_new_mail_activity_button_send" />
</LinearLayout>
If you must use LinearLayout, give the red button a weight of 1 (so it will hog space) and make sure it has a gravity to the right if that's what you need.
android:layout_weight="1"
android:layout_gravity="right"
Check this out:
<RelativeLayout
android:layout_height="50dp"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:gravity="end"
android:padding="5dp">
<ImageButton
android:id="#+id/bt_template"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:scaleType="fitCenter"
android:background="#ffffffff"
android:layout_alignParentLeft="true"
android:contentDescription="Choose template"/>
<ImageButton
android:id="#+id/bt_captureImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_toRightOf="#id/bt_template"
android:background="#ffffffff"
android:contentDescription="Choose template"/>
<Button
android:layout_margin="0dp"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="send"
android:layout_alignParentRight="true"
android:id="#+id/bt_send" />
</RelativeLayout>
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>
I want to show three ImageViews at the bottom of the screen with equal weight. But the size of the images is not fixed. I want to show 2 images and one should be hidden, what should I do?
How to adjust the space in between three ImageViews which should be side by side of each other, and the 3rd ImageView should not overlap the two ImageViews which are visible on the screen?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/main_imge_1"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:layout_toLeftOf ="#+id/imageView6"
android:layout_alignParentBottom="true"
android:padding="15dp" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#54F71D"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"
android:padding="15dp"
android:layout_margin="10dp" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#1DF7AB"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/imageView6"
android:padding="15dp" />
</RelativeLayout>
Try this way
<?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:gravity="center|bottom" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#F9F939"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#54F71D"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#1DF7AB"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Output
From what I was able to decrypt, you're probably trying to achieve this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
</LinearLayout>
</RelativeLayout>
The result:
The key is to use an enclosing LinearLayout to hold your ImageViews and having that LinearLayout aligned to Bottom in your RelativeLayout.
Use android:layout_weight="1" for each ImageView. And replace your RelativeLayout to Linearlayout.
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>
I am have a ImageView and a ImageButton. I have them next to each other in a horizontal layout. I am trying to make it so that the image is left aligned on the screen, and the button is right aligned. I have tried setting gravity but it doesnt seem to make a difference. Where am I going wrong?
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:gravity="left"
android:src="#drawable/short_logo" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:background="#null"
android:src="#drawable/unregister_icon" />
</LinearLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
Use...
<?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="1.0" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginRight="80dp"
android:layout_weight="0.5"
android:gravity="left"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="right"
android:layout_marginLeft="80dp"
android:background="#null"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Use This example if you want to use LinearLayout without giving Weight
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="right"
/>
</LinearLayout>
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_alignParentLeft="true"
android:src="#drawable/short_logo" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#null"
android:src="#drawable/unregister_icon" />
</RelativeLayout >
Make imageview and imagebutton wrap_content and set layout_gravity to left and right accordingly.
a RelativeLayout would solve your problem with a snap, but if you still insist on using LinearLayout (just because we're badass and do things the hard way), you do it like this:
Your parent LinearLayout is fill-parent, left-aligned, and horizontally oriented,
and contains your ImageView, and another LinearLayout.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left"
Second LinearLayout is fill-parent, right-aligned, and horizontally oriented, and contains your ImageButton.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right"
Another approach for LinearLayout, using layout_weight and gravity:
<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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="BUTTON 1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="BUTTON 2" />
</LinearLayout>