i am learning android development, and i am kinda confused when it comes to designing the application, please advise on what is the best way to reach the layout in the image below?
------------------
| * |
| Icon * Icon |
| * |
| ************** |
| * |
| Icon * Icon |
| * |
------------------
The starts in the layout indicates a Photoshop line image.
I hope you get the picture since i`m not allowed to post images yet.
Thanks.
You can create the same kind of layout using below code. For creating this layout, you can use android:layout_weight="1" with android:layout_width="0dp" to have all views with equal layouts if they lies in same layout. In your case, you have 2 images in the same row, so mention these attributes while taking imageviews in layout.
For your case, you can use:
<LinearLayout
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
Related
I am making the layout for my activity and got puzzelled , I am thinking about making the flexible layout in which my views get width and height according to screen. Please read the case below
What I want:
This is the trickiest and hardest part for me.
I need to put the 37 buttons on the screen , such that the each row
gets the 3 button and then shift to new row. nevertheless the last row get the single button or two buttons. Well in the case of 3
button in each row yields only single button in last row but that's
okay
Each button in each row should have different id , having different
picture on background and opening different activity with different
intent extras.
Buttons in row must have same sizes so that it should look good.
So these three points are giving me tough time. Also the 2nd point in these point is much much more important.
Please tell me How Can I achieve this I have read about grid layout , Grid view , list view , table layout and also I have used them many time. but I do not know how to use them for this specific purpose.
Note: The buttons in the row should get the same width and height according to screen and the layout should get fit on all devices so we should avoid hard coded values.
Simply use grid view. Set Max column to 3 and
Use a custom adapter extending Base adapter to set backgrounds and return different ids on item click listener.
Set layout param for inflated item view dynamically using screen size.
I think you should see these links , link 1 and link2. The gridview is best option is for you as these layouts adjust the size and you can easily Handle them in their adapter.
Use a Linear layout instead..with Nested concept.that is like
<LinearLayout>
<LinearLayout>
.
.
And So on..
.
.
.
</LinearLayout>
</LinearLayout>
For example
----Outer (Horizontal) layout-----
| |
| ---Inner (Vertical) layout- |
| | [Textview] | |
| | [Button] | |
| | [Button] | |
| | [Button] | |
| --------------------------- |
----------------------------------
Also try the example below
<LinearLayout android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="One,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="One,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="One,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="One,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Two,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Two,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Two,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Two,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Three,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Three,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Three,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Three,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Four,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Four,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Four,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Four,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
</LinearLayout>
Output
Reference Links:
Nested Linear Layout,
Nested Example
Update 1
As you said, 37 buttons have to implement on the application with different id,intent extras etc.it is simple job i think. set each buttons with different id and write a onClickListener for the buttons.Use a switch/If case t\o distinguish each buttons.
Example:
public void buttonOnClick(View view)
{
switch(view.getId())
{
case R.id.button1:
// Code for button 1 click
break;
case R.id.button2:
// Code for button 2 click
break;
case R.id.button3:
// Code for button 3 click
break;
}
}
Refer this link for more info:
OnClickevent for buttons
Thanks
I'm quite new with Android programming in general, but I would like to know if there is a way to arrange my widgets in a particular way. Basically, I'm looking for the iOS equivalent of constraints, which will allow me to place to widgets centered horizontally and a specified distance from the bottom:
--------------------
| |
| |
| | <- android device
| |
| |
| | <- x is a button
| x x |
| |
--------------------
You can use a RelativeLayout with alignParentBottom="true"
Then you can add a padding in your relativelayout or a margin in your buttons a bit like this.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation:"horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</RelativeLayout>
I am creating an android application that adds an image/clipart on the picture. Everytime I drag the imageview on the right and bottom side of the layout, it automatically resize the image.
This is the sample scenario:
When I drag the clipart outide (TOP and Left Side of the layout), it doesnt resize the image but it cut the image (ClipArt1), but everytime I drag the image on the right and bottom side of the layout, it automatically resize, it does not exceed on the layout.
+-----------------------------+
| * ClipArt* |
| * 1 * |
| ********** |
| |
| ********* |
| *ClipArt* |
| * 2 * |
| ********* ****** |
| * CA3* |
| ****** |
+-----------------------------+
This is my XML layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.61"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/imgstage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="stage" >
<ImageView
android:id="#+id/imgView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/tap" />
</RelativeLayout>
</LinearLayout>
Forgive me if this is incorrect - I experienced this in the past. My solution was to switch the root element of my dynamic container to a fixed-size RelativeLayout... Does this work?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.61"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/imgstage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="stage" >
<ImageView
android:id="#+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/tap" />
</RelativeLayout>
</LinearLayout>
I want to make a part of a bitmap clickable and my layout looks like this:
________________________________
| ##### |
| ##### |
| ___________________ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| ___________________ |
________________________________
I thought the easiest way to this would be to place a button over the image with a relative layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?
Suggestions for other approaches are also welcome, I considered this:
http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
But it seems a bit of an overkill for my simple rectangle area.
Try this:
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
You can also use
<Button
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/image1"
android:drawableLeft="#drawable/image2t"
android:drawableRight="#drawable/image3"
android:drawableTop="#drawable/image4"
android:drawableTop="#drawable/image4"
android:textColor="#ffffff"
/>
Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/ImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
Is there a way to position a textview to be slightly above a centerd android button? I don't want to hardcode values for a particular screen obviously, but something that will dynamically scale. The button will always be centered, however...
Thanks in advance!
Yes if your parent layout is a RelativeLayout you can position Views in relation to each other or to the parent here is a simple example (Warning didn't type this into IDE, may contain typo):
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/mBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a Button!"
android:layout_centerInParent="true" />
<TextView
android:id="#+id/mTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text"Some Text"
android:layout_above="#+id/mBtn" />
</RelativeLayout>
That will make your layout look roughly like this:
________________________
| |
| |
| Some Text |
| [I am a Button!] |
| |
| |
|______________________|