I would like to create a dialog to display a video title and tags. Below text I would like to add buttons View, Edit and Delete and make these elements same size. Does anyone know how to modify .xml layout file in order to make elements inside LinearView same size?
The current layout file looks like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtTitle" android:text="[Title]" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtTags"
android:text="[Tags]" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnPlay"
android:text="View">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnEdit"
android:text="Edit">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnDelete"
android:text="Delete">
</Button>
</LinearLayout>
</LinearLayout>
I would appreciate if anyone could show the solution by modifying the pasted file content.
Thanks!
Use android:layout_width="0px" and android:layout_weight="1" on the three Buttons. That says the buttons should take up no more than 0 pixels, but the three of them should split any extra space between them. That should give you the visual effect you wish.
Another way is to make android:layout_width="fill_parent" and android:layout_weight="1" this will also works fine!!!
Use LinearLayout with your desired weightSum and create elements with equal layout_weight. Here is an example ...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_share_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_search_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_event_note_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_brush_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_menu_white_36dp"/>
</LinearLayout>
So, the weight sum of all elements is 5. Here is the screenshot ...
Note that, Google Material Design icons are used. Hope this is helpful.
Related
I want to create a layout of the list item as shown in the image.I divided it into three parts taking whole layout as Linear(orientation-horizontal).Three parts are
1) Image
2) Paragraph
3) three edit text in a linear layout.
I have problem in the second part as the length of paragraph (Text View) it disturbs the next part.I also try by putting weight in relative layout but it does not work.What is the solution for this problem?
How to do something like this.
Code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/item_icon"
android:src="#drawable/hammer"
android:layout_weight="1"
android:layout_width="100dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/item_name"
android:layout_toRightOf="#id/item_icon"
android:layout_weight="1"
android:text="skvnksjdjbkjbkjb"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/item_detail"
android:layout_toRightOf="#id/item_name"
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detail1"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/detail2"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/detail3"
android:layout_weight="1"
android:text="fkvjbfvkjbv"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
if you use layout_weight, the layout_width (for horizontal LinearLayouts) should be set to 0dp
I have stuck in some xml code and i hope you can help me out.
So here is what I need/what I have done by now.
I have 3 images of 650px width and I need them one below another while keeping aspect ratio.
I did that with the following code and it looks as it should. No problem here.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_frankopan"
android:background="#drawable/frankopan2_vintage_sundown600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_turizam"
android:background="#drawable/krk_turizam_vintage"/>
The problem is. I need to put three textviews in a left bottom corner of each image. Imagine it like image menu with text description on each image.
So, I can not use relative or frame layout because images won't play nicely with each other :) There is always a gap between or not aspect ration etc. I need weightsum.
Second, I can't hardcode the text on each image in photoshop because the app will be translated and text needs to change for each language.
I can have different images for each language but I am trying to avoid that.
Ah yea, one more last thing.
I tried to put entire linearlayout in relative layout and put the text between but the text appears beneath the image and I can't bring it upfront.
Any suggestions?
Thanks a lot,
Xsonz
just copy 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="vertical">
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 1" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 2" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 3" />
</FrameLayout>
Take three FrameLayout inside your LinearLayout and inside FrameLayout keep the ImageView and TextView.
Or Else You can use RelativeLayout and give dependency to Views
You can use frame layout inside linear layout. create imageview inside the linear layout and create textview in another frame layout below it.
<FrameLayout
android:id="#+id/frameLayout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="string" />
</FrameLayout>
Something like this might work for you.
//your layout -> LinearLayout>
....
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image1"
android:layout_weight="1"
android:background="#drawable/A1" />
<TextView android:id="#+id/textview1"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Text"
android:layout_below="#id/image1"
android:layout_alignLeft="#id/image1" />
</RelativeLayout>
// end your LinearLayout
You can play with these parameters using Relative Layout Parameters android.com. The relative layout allows you to control the "relative" positioning between your elements.
You can lay your images out side by side, or in whatever fashion you wish.
Then you can adjust the text dynamically.
I was thinking it would be something like android:layout_startOf"centerHoriztonal" or something like that but I have searched and couldn't find anything. If it helps I am trying to make a soundboard app where all the buttons can be the same size across multiple device screens.
try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:text="Here is button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button2"
android:text="Here is button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
You can wrap the button(s) inside a horizontal LinearLayout and use layout_weight to divide the screen in half and then layout_alignParentLeft/layout_alignParentRight to align the buttons inside a RelativeLayout that takes up exactly half the screen width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button Text"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
Another way to do it is to create a dummy view object that is centered horizontally in the parent view, and align your buttons to the left or right of it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/dummyview"
android:layout_width="0px"
android:layout_height="0px"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dummyview"
android:text="Button Text"/>
</RelativeLayout>
Are you sure you want the same size of buttons in all devices? People try to avoid it and make make view elements flexible.
Anyways if you want to set same size just directly write in layout
android:layout_width = "#dimen/valueForButton"; //some absolute value
For starting at same point, just add all buttons inside LinearLayout and make some operations there, such as
android:layout_gravity = "center_horizontal";
Your layout must be something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
I'm struggling to come to grips with android layouts, firstly can anyone point me to a good basic tutorial on working with the layouts on screen. I understand the concepts when i read the google layout dev ref, but come to practice and I don't quite get it.
I have the below layout that I am trying to replicate in an Android screen, I believe I need to nest different layouts within others, but I can't quite get what I have to look like this:
http://screencast.com/t/GFw7OSzvbmX
Any suggestions on code out there similar and also the tutorials to get me going would be great thx
(Black - LinearLayout Vertical )
(Red - LinearLayout Horizontal )
(Green - ImageView )
(Yellow - TextView )
(Brown - Button )
Visualize like this first . Then write your xml .
Use TextView,Button,ImageView as child and use LinearLayout as parent with weight which handle area allocation child content :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.40">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.60"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="textview"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
I am new to android, currently designing a User Home Page. please let me know how to align UI controls like - Button , EditText, etc to left/right/center in Linear and List Layout. button code eg.
you can achieve this by using set gravity of layout . here i have one xml file in which i have two image button and one text view . Here i set text view in center . So its fits to all devices.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/back"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_marginTop="2dp"/>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:singleLine="true"
android:text="Top 100"/>
</LinearLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:id="#+id/Playing"
android:visibility="invisible"
android:src="#drawable/nowplaying"
android:layout_gravity="center_vertical"
android:paddingTop="3dp"/>
</LinearLayout>
</LinearLayout>
Checkout the android:layout* properties and the android:gravity properties and this example.