I'm new to android and I would like to achieve something like this, where all thins are centered in their own space.
representative image
I've this code... How can I change it, and why?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp"
tools:context="se.avatarcontrol.MainActivity">
<TextView
android:id="#+id/weather"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/light"
android:layout_marginTop="15dp"
android:text="RAINY" />
<Button
android:id="#+id/light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Light OFF" />
<TextView
android:id="#+id/frontText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/sideText"
android:text="FrontView"/>
<TextView
android:id="#+id/sideText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/light"
android:layout_marginTop="15dp"
android:layout_alignParentRight="true"
android:text="SideView" />
<ImageView
android:id="#+id/frontImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android: android:layout_below="#id/frontText"
android:src="**somesource**" />
<ImageView
android:id="#+id/sideImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sideText"
android:layout_alignParentRight="true"
android:src="**othersource**"/>
</RelativeLayout>
Another thing would be how can my ImageViews fill all the space whithout overlapping each other?
please use FrameLayout or LinearLayout because it's lighter than RelativeLayout.
To achieve what you want, you should do something like :
<?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">
<!-- Weather light Layout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:src="#mipmap/ic_launcher_round" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Light" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<!-- Front + Image Layout-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Front" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Image" />
</LinearLayout>
<!-- Side + Image Layout-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Side" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Image" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
This is the structure. Just adapt your padding / margin / ids and layout_height and width. For your case, i used layout_weight which is useful to specify a size ratio between multiple views.
Related
I need to add some buttons at the bottom of a RecyclerView but whatever i do it always takes up the whole space and the buttons wont show on screen.
I tried adding padding that's the same size as the height of the buttons but it doesn't work.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:gravity="top|center"
android:orientation="horizontal">
<ImageView
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/accueil"
app:tint="#color/orange" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/redressed"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#color/bleu"
android:textSize="30sp" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="60dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Generer horaire"
android:layout_gravity="start"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ajouter tache"
android:layout_gravity="end"
/>
</LinearLayout>
</LinearLayout>
I want to create a layout based on the following image,
as it is evidence I have a CardView that I show it with red lines and the card view is in a LinearLayout and I have an image in the card view in which I want to show a little bit of it in a linear layout.
I use the following code to create the layout,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="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:background="#color/grayBack"
android:orientation="vertical"
tools:context=".activities_v2.customer_steps.CustomerStepOne">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginEnd="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
android:textColor="#color/editText"
android:textSize="#dimen/_14ssp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginTop="#dimen/_100sdp"
android:layout_marginEnd="#dimen/_20sdp"
android:layout_marginRight="#dimen/_20sdp"
android:layout_marginBottom="#dimen/_10sdp"
android:minHeight="#dimen/_50sdp"
card_view:cardCornerRadius="#dimen/_10sdp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="236dp"
android:layout_height="#dimen/_150sdp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:src="#drawable/ic_illustration_02" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/_10sdp"
android:textColor="#color/editText"
android:textSize="#dimen/_14ssp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button_background_blue"
android:minWidth="#dimen/_150sdp"
android:textSize="#dimen/_14ssp" />
</LinearLayout>
i'm trying to make a layout_below the cardview in relative layout but it wont show up in my device where layout_above works. i dont know why it wont work. i think it should be work because it below the cardview. please help what did i miss or wrong.
this is my xml code
<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="#drawable/background_2"
tools:context=".ExchangeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/saldo"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/holder" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="Will Stitch"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>
<android.support.v7.widget.CardView
android:id="#+id/saldo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Saldo"
android:textColor="#color/colorPrimary"
android:textSize="20dp"
android:textStyle="bold" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/saldo"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="WillStitch#gmail.com"
android:textSize="10dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
please help why it like this
It is working but your ImageView take all the width and it don't have android:src attribute (so it show nothing) and you don't need the last LinearLayout :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/saldo"
android:orientation="vertical">
<!-- Useless Linear Layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="WillStitch#gmail.com"
android:textSize="10dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
I want to build the following screen which contains app logo, success/failure icon image, information message and ok button.
Here this the code. I am using linear layout to achieve this.
<LinearLayout
android:id="#+id/statusLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#android:color/white"
android:weightSum="2"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/statusTopRelativeLayout"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/client_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/no_image_description"
android:src="#drawable/client_logo"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/statusBottomRelativeLayout"
android:background="#android:color/holo_blue_light"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/statusText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/statusText"
android:textSize="50sp"/>
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/statusText"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:clickable="true"
android:focusable="true"
android:onClick="goToHomeScreen"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#string/ok"
android:textColor="#ffffff"
android:textSize="40sp"/>
</RelativeLayout>
How to place success/failure icon image on top of the two layouts?
You can use constraint to make it easy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:id="#+id/center"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/center"
android:background="#ffffff"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#00ffff"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff8801"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="#id/center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
Output:
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:orientation="vertical"
android:paddingBottom="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
<LinearLayout
android:id="#+id/nilu2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/nilu"
android:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
</RelativeLayout>
OUTPUT
Parent RelativeLayout
add child LinearLayout as fillParent and assign weightsum 2. add two
layouts with 1 weight each. (add individual implementation for each
layout according to your requirements.)
add second child in relative
layout as imageview/button for that good sign and set it center in
parent.
This will fix your problem
I'm trying to create item layout to RecyclerView with two main elements in ratios 20% and 80%. First element is ImageView, second is LinearLayout with some TextViews. Basically, it should look like this:
20% 80%
+-----+-------------------+
| Img | Author, Date |
+-----+ Title... |
| |
+-------------------------+
So, I create layout as below, but image is always bigger than 20%.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:src="#drawable/image" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/author"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
I'm trying every combination of layout_width but always is something wrong with the ratios.
Any help would be greatly appreciated.
Try:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_weight=".2"
android:layout_height="match_parent"
android:src="#drawable/image" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight=".8"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/author"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
First thing put android:weightSum="5" in parent linear layout .secondly it's not just the ratio but bitmap of image source also matters. You can use cut short your image(image resource) before setting it inside imageview.
let me know if weightsum works.
you are missing to give weightSum to parent Layout.
just add weightSum to main Layout in your case LinearLayout.
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5">
So far I have understood that you want to create a list row then you need to fix the height of layout and image view as shown below.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_weight="0.2"
android:scaleType="centerInside"
android:src="#drawable/image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.8"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/author"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>