I am trying to figure how I can properly layout an edit text in between two views so that It will take up the whole width nicely in all screen sizes.
Here is my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:src="#drawable/country_india"/>
<EditText
android:layout_width="250dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_gravity="bottom"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"/>
</LinearLayout>
Here is what it looks like:
Hope you guys can help!
Try this :-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:src="#drawable/country_india"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:contentDescription="#string/app_name" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Leave a comment" />
<ImageButton
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name" />
</LinearLayout>
Use this below code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_weight="3"
/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Add android:layout_weight="1" to editText
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:src="#drawable/country_india"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:contentDescription="#string/app_name" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Leave a comment" />
<ImageButton
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name" />
</LinearLayout>
you should be using android:layout_weight="1" instead of fixing the width if you'd like to fit the EditText to fit in.
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_width="50dp"
android:src="#drawable/country_india"/>
<EditText
android:hint="Leave a comment"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_width="0dp"/>
<ImageButton
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:src="#drawable/icon_pencil_2_small"/>
</LinearLayout>
I would do it this way if I were you. Populate the weight and you're good to go.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:weightSum="1.5">
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:src="#drawable/country_india"
android:layout_weight="0.25"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_gravity="bottom"
android:layout_weight="1"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="50dp"
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:layout_weight="0.25"/>
</LinearLayout>
Try to make your Edittext layout_weight="1"in the middle of 2 ImageView (or something):
<?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="72dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/address_item_image_view"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_margin="5dp"
android:src="#drawable/com_facebook_tooltip_black_background"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:hint="This is an edit text"
android:layout_weight="1"/>
<ImageView
android:id="#+id/address_item_arrow_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/messenger_bubble_large_blue"/>
</LinearLayout>
Related
In my app I'm having a RecyclerView item.xml here I'm trying to align all items with linear layout but here problem is that when I set width of TextView to wrap_content if the text being set is too large it pushes out the other items inside the layout and makes them sometimes too small or sometimes they're completely pushed out of the layout here is my XML code which I'm using any help will be appreciated.
<android.support.constraint.ConstraintLayout
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_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/songitemly"
android:weightSum="100"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imgscov"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="15dp"
android:scaleType="fitXY"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp" />
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgscov"
android:gravity="center"
android:singleLine="true"
android:textColor="#FCFAFA"
android:textSize="16dp" />
<TextView
android:id="#+id/sartist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:textColor="#D3D1D1"
tools:ignore="MissingConstraints" />
</LinearLayout>
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/playinganim"
android:layout_marginTop="5dp"
android:layout_width="25dp"
android:layout_weight="20"
android:visibility="invisible"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="playing.json"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/sname"
android:layout_height="25dp"
/>
<ImageView
android:id="#+id/imgmenu"
android:layout_marginTop="5dp"
android:layout_weight="10"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/playinganim"
android:src="#drawable/ic_dots_vertical_black_48dp"
android:layout_width="25dp"
android:layout_height="25dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Screenshot of recycler view
This is my code after setting width and height to 0dp:
<LinearLayout
android:id="#+id/songitemly"
android:weightSum="100"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:ignore="MissingConstraints">
<ImageView
android:id="#+id/imgscov"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="15dp"
android:scaleType="fitXY"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp">
<TextView
android:id="#+id/sname"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:singleLine="true"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#FCFAFA"
android:textSize="16dp" />
<TextView
android:id="#+id/sartist"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:textColor="#D3D1D1"
tools:ignore="MissingConstraints" />
</LinearLayout>
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/playinganim"
android:layout_marginTop="5dp"
android:layout_width="25dp"
android:layout_weight="20"
android:visibility="invisible"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="playing.json"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/sname"
android:layout_height="25dp"
/>
<ImageView
android:id="#+id/imgmenu"
android:layout_marginTop="5dp"
android:layout_weight="10"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/playinganim"
android:src="#drawable/ic_dots_vertical_black_48dp"
android:layout_width="25dp"
android:layout_height="25dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
You can set the height/width as 0dp (depending on LinearLayout's orientation vertical/horizontal respectively) along with setting it's weight to match it with the constraints, i.e,
android:layout_width = "0dp"
android:layout_weight = "1.0"
Also, you can use the following for showing ellipses when text is too long :
android:ellipsize="end"
android:maxLines="1"
Try this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimary">
<LinearLayout
android:id="#+id/songitemly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<ImageView
android:id="#+id/imgscov"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginStart="15dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/a" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="#id/buttons"
android:orientation="vertical">
<TextView
android:id="#+id/sname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textColor="#FCFAFA"
android:textSize="16sp"
tools:text="Test" />
<TextView
android:id="#+id/sartist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textColor="#D3D1D1"
tools:ignore="MissingConstraints"
tools:text="Test" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/playinganim"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:layout_weight="20"
android:visibility="invisible"
app:lottie_autoPlay="true"
app:lottie_fileName="playing.json"
app:lottie_loop="true" />
<ImageView
android:id="#+id/imgmenu"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:layout_weight="10"
app:srcCompat="#drawable/a" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I am building a simple row layout to add data dynamicly inside my recycle view, so i builded a a layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cfcfcf">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#ffffff"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#c7c7c7"
android:padding="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="20"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="15dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/emerald" />
<ImageView
android:id="#+id/starIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:padding="15dp"
android:src="#drawable/ic_star" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="15dp">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/cameraForbiden"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/base" />
<ImageView
android:id="#+id/cameraForbiden"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_no_photos" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:src="#drawable/ic_user" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/userIcon"
android:layout_alignBottom="#+id/userIcon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Filipe"
android:textColor="#color/base" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
the main problem on this approach is that when i check my solution on smaller devices the text at left orverlaps the text at right, one solution that i am searching is to decrease the content based on the device size, but didn't find that yet.
This is what i get on a Nexus 5 for example:
this is what i get on a smaller device:
any help with this guys?
Thank you very much
You can use Linear layout for this. You can assign weight to each item.
Try this code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cfcfcf">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#ffffff"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#c7c7c7"
android:padding="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="20"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/plantName"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="15dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/black" />
<ImageView
android:id="#+id/starIcon"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:padding="15dp"
android:src="#drawable/ic_art_track_black_24dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/cameraForbiden"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/ic_art_track_black_24dp" />
<TextView
android:id="#+id/data"
android:layout_width="0dp"
android:layout_weight="2.5"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/black" />
<TextView
android:id="#+id/password"
android:layout_width="0dp"
android:layout_weight="2"
android:textAlignment="viewEnd"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/userIcon"
android:layout_alignBottom="#+id/userIcon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Filipe"
android:textColor="#color/black" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:gravity="left"
android:src="#drawable/ic_art_track_black_24dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I made ImageButton menu design in the hopes that its size can adjust the screen:
but after I test using with smartphone 3-inch 320x480
, 4-inch 480x800, 5-inch 720x1280, view ImageButton is mess.
I've tried using TableLayout, LinearLayout, GridLayout,
and FrameLayout, but the result is the same.
Thank you in advance.This picture my trial results
This 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/bg"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linear1">
<ImageView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/title"
android:contentDescription="title"/>
</LinearLayout>
<ImageButton
android:id="#+id/imagebutton0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linear1"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="0"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_toLeftOf="#+id/imagebutton4"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="2"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="4"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_toRightOf="#+id/imagebutton4"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="3"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton4"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="1"
tools:ignore="contentDescription" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:id="#+id/linear2"
android:layout_below="#+id/imagebutton1">
<TextView
android:id="#+id/ib1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib1"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib2"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib3"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib4"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
</LinearLayout>
</RelativeLayout>
I created a scratch which will define layout with linear and weight
I hope it will help you out
Also attached code with screen shots
<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="0dp"
android:layout_weight="0.4"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context="com.MainActivity"
android:weightSum="4"
android:orientation="vertical"
android:background="#EDEDED">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#db4437"
android:weightSum="2"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imgHeader"
android:layout_height="80dp"
android:layout_width="200dp"
android:src="#drawable/cruise"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_weight="1"/>
<TextView
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Header"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white"
android:singleLine="true"
android:textAlignment="center"
android:layout_gravity="center_horizontal|center_vertical"
/>
</LinearLayout>
<LinearLayout android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_marginTop="-30dp"
android:background="#android:color/white"
android:orientation="vertical"
android:weightSum="3"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:elevation="30dp"
>
<EditText
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="#style/textbox"
android:textColor="#android:color/black"
android:drawableStart="#drawable/user_male"
android:drawableLeft="#drawable/user_male"
android:adjustViewBounds="true"
android:maxHeight="10dp"
android:maxWidth="10dp"
android:scaleType="fitCenter"
android:hint="Email..." />
<EditText
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="#style/textbox"
android:textColor="#android:color/black"
android:drawableStart="#drawable/user_male"
android:drawableLeft="#drawable/user_male"
android:adjustViewBounds="true"
android:maxHeight="20dp"
android:maxWidth="20dp"
android:hint="Password..." />
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:orientation="horizontal"
android:background="#EDEDED"
android:weightSum="2"
>
<Button android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#CCCCCC"
android:text="Forgot password?"
android:layout_marginLeft="20dp"
android:background="#android:color/transparent"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#EDEDED"
/>
<Button
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Login"
android:layout_marginRight="10dp"
android:background="#db4437"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:orientation="horizontal"
android:id="#id/bottom"
>
<ImageView
android:id="#+id/bus_ruta1"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center|bottom"
android:scaleType="fitEnd"
android:src="#drawable/vai_one"
/>
<ImageView
android:id="#+id/bus_ruta2"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center|bottom"
android:scaleType="fitEnd"
android:src="#drawable/vai_twi" />
<ImageView
android:id="#+id/bus_ruta3"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center|bottom"
android:scaleType="fitEnd"
android:src="#drawable/vai_three" />
</LinearLayout>
</LinearLayout>
Im using the following code The last linear layout contains three images and I want those images to be at the bottom of the screen but it is not being fixed at the bottom. How can I be able to sort this out?
try using a RelativeLayout instead to fill the whole screen and
the android:layout_alignParentBottom attribute
Possible dublicate of How to align views at the bottom of the screen?
try using RelativeLayout. Try this.
<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"
tools:context="com.MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EDEDED"
android:orientation="vertical"
android:weightSum="4"
tools:context="com.MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#db4437"
android:orientation="vertical"
android:weightSum="2" >
<ImageView
android:id="#+id/imgHeader"
android:layout_width="200dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:src="#drawable/cruise" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:singleLine="true"
android:text="Header"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="-30dp"
android:layout_weight="1"
android:background="#android:color/white"
android:elevation="30dp"
android:orientation="vertical"
android:weightSum="3" >
<EditText
style="#style/textbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:drawableLeft="#drawable/user_male"
android:drawableStart="#drawable/user_male"
android:hint="Email..."
android:maxHeight="10dp"
android:maxWidth="10dp"
android:scaleType="fitCenter"
android:textColor="#android:color/black" />
<EditText
style="#style/textbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:drawableLeft="#drawable/user_male"
android:drawableStart="#drawable/user_male"
android:hint="Password..."
android:maxHeight="20dp"
android:maxWidth="20dp"
android:textColor="#android:color/black" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#EDEDED"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:background="#android:color/transparent"
android:text="Forgot password?"
android:textColor="#CCCCCC" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#EDEDED" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="#db4437"
android:text="Login" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#id/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/bus_ruta1"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center|bottom"
android:scaleType="fitEnd"
android:src="#drawable/vai_one" />
<ImageView
android:id="#+id/bus_ruta2"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center|bottom"
android:scaleType="fitEnd"
android:src="#drawable/vai_twi" />
<ImageView
android:id="#+id/bus_ruta3"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center|bottom"
android:scaleType="fitEnd"
android:src="#drawable/vai_three" />
</LinearLayout>
</RelativeLayout>
Here android:layout_alignParentBottom="true" is key paramater.
Happy Coding.
I currently have 4 ImageButtons in a layout that takes only half of the screen height. I would like the ImageButtons to be placed evenly in the layout. Here is what I have:
<?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_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
This works, since here is the result:
The issue is, 1: I would like to add text under each button and I am not sure how that is going to work and 2: the white spots to the right and left of the ImageButtons are active, as if they were parts of the button. Is there a better way to do this?
You can do something like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/section1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 1"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 2"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 3"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 4"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
Result
and for second part of question you should set click listener on entire relative layout. for example for tap on first cell :-
xml
android:id="#+id/section1"
JAVA
findviewbyid(R.id.section1).setOnClickListener(...)
Another (and better) alternative is to work with TableLayout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn1"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn1"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn2"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn2"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 2"/>
</RelativeLayout>
</TableRow>
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn3"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn3"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 3"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn4"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn4"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 4"/>
</RelativeLayout>
</TableRow>
</TableLayout>