Right now, I have a RecyclerView and multiple CardView to show my items.
My CardView have a RelativeLayout where I add some ImageViews (in this case 3, but can be more).
Each of my items will have a list of images to show, lets suppose #item1 have Facebook, Twitter and Youtube, but #item2 just have Facebook and Youtube images.
How should I align the images? If I just remove Twitter image, I need to update layout_toLeftOf of my Facebook image to Youtube image.
I think I shouldn't do this kind of logic to all my items, it will be over power...
Example image:
https://i.stack.imgur.com/uJZTi.png
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/card_height"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/coverImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
/>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end|top">
<ImageView android:background="#null"
android:id="#+id/facebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/facebook_icon"
android:layout_toLeftOf="#+id/twitter"/>
<ImageView android:background="#null"
android:id="#+id/twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/twitter_icon"
android:layout_toLeftOf="#+id/youtube"/>
<ImageView android:background="#null"
android:id="#+id/youtube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/youtube_icon"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:background="#android:drawable/screen_background_dark_transparent"
android:orientation="vertical">
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:textSize="#dimen/text_size"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
You should use LinearLayout with Horizontal Orientation !
<LinearLayout
...
android:orientation="horizontal">
//ImageViews in priority order
</LinearLayout>
It's better to work with LinearLayout in this case and use layout_alignParentRight and layout_alignParentTop="true" instead of android:layout_gravity="end|top" like below :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true">
<ImageView android:background="#null"
android:id="#+id/facebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/facebook_icon"
android:layout_weight="1"/>
<ImageView android:background="#null"
android:id="#+id/twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/twitter_icon"
android:layout_weight="1"/>
<ImageView android:background="#null"
android:id="#+id/youtube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/youtube_icon"
android:layout_weight="1"/>
</LinearLayout>
Related
I have the following xml. Basically I want to display the movie overview below the Layout whose id is equals to layoutOne.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay">
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
<ImageView
android:id="#+id/movie_image"
android:layout_width="160dp"
android:layout_height="240dp"
android:scaleType="fitXY"
android:layout_gravity="center_vertical"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:padding="16dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content">
<TextView
android:id="#+id/movie_title"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
/>
<TextView
android:layout_below="#+id/movie_title"
android:layout_centerHorizontal="true"
android:id="#+id/movie_rating"
android:text="9/10"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_below="#+id/movie_rating"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_marginTop="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/ic_menu_my_calendar"/>
<TextView
android:layout_below="#+id/movie_rating"
android:layout_centerHorizontal="true"
android:id="#+id/movie_date"
android:text="2017-10-9"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
</LinearLayout>
</RelativeLayout>
<TextView
android:id="#+id/title_overview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Great movie" />
</LinearLayout>
</ScrollView>
Here is what I get.
I want the sample text Great movie to be below that light pink layout. The tricky part here is that Scrollbar view allow only one child view. Any ideas?
Thanks,
Theo.
The Constraint of the RelativeLayout should fit the whole page. If you want to use ScrollView you should add the RelativeLayout to the ScrollView too.
Hence it would be like this :
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
Later you can use the following to adjust the image:
<LinearLayout
android:layout_marginBottom="439dp"
android:layout_marginEnd="156dp"
android:layout_marginStart="156dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
Currently I am having 2 pictures per row (loaded via Picasso) with a checkbox at the top right corner of each of them. When I try to add a Scrollview, the position of the checkboxes get changed and there is an extra row that appears. how can I add it and keep the rest of the visualization in the correct order? here is my code so far (for a row):
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:fillViewport="true"
android:orientation="vertical">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLay"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/img1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp" />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text=""
android:background="#android:color/white"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/img2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1" />
<CheckBox
android:id="#+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text=""
android:background="#android:color/white"/>
</RelativeLayout>
</LinearLayout>
Set the properties of your UI Elements as Right and Left of parent UI element.
android:layout_below="#id/name"
android:layout_toRightOf="#id/description"
android:layout_toLeftOf="#id/description"
Edit:
I make this Example Code for you: This is not the Exact, you can take idea from this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:id="#+id/parentLayout"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="0dp"
android:layout_toRightOf="#+id/parentLayout"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/img1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp" />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text=""
android:background="#android:color/white"/>
</RelativeLayout>
Check this Link: Layout File - Positioning Item to Right of Another Item (Android)
I have two Linear Layouts one inside the other. In the second one I have a Switch button, a TextView and a FloatingActionButton. I want to put these 3 in the same line and I want to centralize the Switch and the TextView and I want to align the FloatingActionButton on the right side of the screen. I tried to use marginLeft to force them to go to the position I want but I believe this is not the correct way.
Here's my code (right now the 3 components are already in the same line):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:weightSum="1" >
<Switch
android:id="#+id/mySwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="140dp"
android:layout_marginTop="20dp"
android:theme="#style/SCBSwitch"
/>
<TextView
android:id="#+id/OpenClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Open"
android:textSize="20dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/action_find_location"
android:layout_width="277dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="75dp"
android:layout_marginRight="10dp"
android:src="#drawable/calendar_today"
fab:backgroundTint="#color/theme_color"
fab:borderWidth="0dp"
fab:elevation="9dp"
fab:rippleColor="#color/toolbar_title_color"
fab:fabSize="mini"/>
</LinearLayout>
</LinearLayout>
Just took your code and made some changes. Please check if it works fine
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:weightSum="3">
<Switch
android:id="#+id/mySwitch"
android:layout_width="50dp"
android:layout_height="50dp"
android:theme="#style/SCBSwitch"
android:layout_gravity="start"
android:gravity="center"
android:layout_weight="1"/>
<TextView
android:id="#+id/OpenClose"
android:layout_width="50dp"
android:layout_height="50dp"
android:text="Open"
android:textSize="20dp"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/action_find_location"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/calendar_today"
fab:backgroundTint="#color/theme_color"
fab:borderWidth="0dp"
fab:elevation="9dp"
fab:rippleColor="#color/toolbar_title_color"
fab:fabSize="mini"
android:layout_gravity="end"
android:gravity="center"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
delete android:weightSum="1" from the LinearLayout and do something like that:
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Switch
android:id="#+id/mySwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
same to the TextView, and with the FAB delete:
android:layout_gravity="end"
android:gravity="center"
android:layout_weight="1"
What I am trying to do is wrap the textview around the imageview so that way the text isn't just on the left or right side of the image. Is it possible to do this through XML? As it is a popup dialog with a picture, so doing it through code will be a pain as it is multiple images depending on what they click. See picture for example.
<?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:orientation="vertical"
android:background="#android:color/background_light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="1dp"
android:background="#android:color/darker_gray">
>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20dp">
<Button
android:id="#+id/dismiss"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Close" />
<ImageView
android:id="#+id/IV1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/IV1"
android:layout_below="#+id/dismiss"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/TV15"
android:id="#+id/TV15"
android:layout_below="#+id/dismiss"
android:layout_toRightOf="#+id/IV1"
android:layout_toEndOf="#+id/IV1"
android:paddingLeft="5dp"
android:paddingTop="5dp"/>
</RelativeLayout>
</ScrollView>
</LinearLayout>
Use FrameLayout. Change the order of ImageView and TextView to set what should come top of the other.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/menu_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:lines="1"
android:text="this is my sample" />
</FrameLayout>
I am currently working on a sample application using android studio. I need to design diamond shaped buttons and view them as follows (Screenshots attached). But I don't have an idea how to make this kind of thing with android.
There are be four diamond shaped buttons, and they are be aligned as according to the following screenshot.
Screenshot:
Here is sample code adjust margins according to devices you can use imageView instead buttons
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/firstRow"
android:rotation="-30"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 2"
android:id="#+id/button2" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 1"
android:id="#+id/button1"/>
</LinearLayout>
<LinearLayout
android:id="#+id/secondRow"
android:layout_below="#+id/firstRow"
android:rotation="-30"
android:layout_marginTop="24dp"
android:layout_marginLeft="68dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 4"
android:id="#+id/button4" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 3"
android:id="#+id/button3"/>
</LinearLayout>
</RelativeLayout>
The easiest way is use .png archives on ImageButtons and display them on a RelativeLayout. You can change positions and adjust them as you wish. If you set the android:background="#android:color/transparent" you can set your form, by playing with the margins (android:layout_marginRight="", android:layout_marginTop="", etc.)
With that I got this:
This is the code I used; it's only necessary .xml, without programmatic changes:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_purple"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="39dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton1"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/ImageButton03"
android:layout_below="#+id/imageButton1"
android:layout_marginRight="55dp"
android:layout_marginTop="47dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ImageButton03"
android:layout_alignRight="#+id/ImageButton04"
android:layout_marginBottom="66dp"
android:layout_marginRight="5dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" /></RelativeLayout>
Hope it helps.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/splash2"
tools:context="com.example.sv.myfoodapplication.view.SplashActivity">
<LinearLayout
android:id="#+id/sp_breakfast"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_above="#+id/sp_desert"
android:layout_alignStart="#+id/sp_vegetable"
android:layout_marginBottom="43dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
<LinearLayout
android:id="#+id/sp_meat"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_vegetable"
android:layout_alignStart="#+id/sp_desert"
android:layout_marginBottom="80dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_vegetable"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_desert"
android:layout_alignParentStart="true"
android:layout_marginBottom="83dp"
android:layout_marginStart="19dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_desert"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
</RelativeLayout>