4 images in one view using linear layout android - android-layout

I wish to make 2 by 2 image using LinearLayout with you equal weight. Can someone please assist me thanks. Your help will be appreciated thanks
I am trying to get my xml for my Android app working but I have some problems. I am trying to display to equal sized 2 images side by side in a linear layout. There has to be a margin between them, on both sides right and left, and on top.
MY code can only give me 3 images but I need 4 images.
I'd appreciate any help solving this problem
This is my code:
<LinearLayout 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="horiztontal"
android:weightSum="2">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="2">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView3"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>

use following layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:layout_margin="10dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
<ImageView
android:layout_margin="10dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:layout_margin="10dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
<ImageView
android:layout_margin="10dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
Note:further you can optimize this layout using Relative or ConstrainLayout.

Use the Code split 4 images equally
<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"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linear1"
android:orientation="horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageview"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageview1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linear2"
android:orientation="horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageview3"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageview14"/>
</LinearLayout>
Each Image View Set the Scaletype property to set as FitXY

Related

Linear Layout and children not visible

Hi sorry I am having difficulty in getting my layout to been seen when I run the application
I don't see anything when I run my application
here is my XML code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="409dp"
android:layout_height="729dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:layout_marginBottom="1dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/edtName"
android:layout_width="match_parent"
android:layout_height="44dp"
android:text="Name" />
<ScrollView
android:id="#+id/scrlText"
android:layout_width="match_parent"
android:fillViewport="true"
android:isScrollContainer="true"
android:layout_height="638dp">
<LinearLayout
android:id="#+id/lltext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<LinearLayout
android:id="#+id/hllsend"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="#+id/edtInput"
android:layout_width="159dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName" />
<Button
android:id="#+id/btnSend"
android:layout_width="10dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
How do I make my items visible when running the application?
In your simple layout code, there are many problems. For example:
1.
android:layout_width="409dp"
android:layout_height="729dp"
such android screen size is hard to get. And in Android layout principal, you'd better use relative layout rather than such hard code size. Here you can replace it with match_parent or wrap_content.
In the same way.
android:layout_height="638dp"
totally over screen height ,make no space for hllsend to show.
I suggest you learn some android layout principal before write android app.
It's not a good practice to add LinearLayout in ConstraintLayout and I think it's the issue with your code you just need to make you LinearLayout as a parent and remove your ConstraintLayout.
NOTE: please do necessary adjustment.
Please check quick example for your code I didn't run this.
<LinearLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="409dp"
android:layout_height="729dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:layout_marginBottom="1dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/edtName"
android:layout_width="match_parent"
android:layout_height="44dp"
android:text="Name" />
<ScrollView
android:id="#+id/scrlText"
android:layout_width="match_parent"
android:fillViewport="true"
android:isScrollContainer="true"
android:layout_height="638dp">
<LinearLayout
android:id="#+id/lltext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<LinearLayout
android:id="#+id/hllsend"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="#+id/edtInput"
android:layout_width="159dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName" />
<Button
android:id="#+id/btnSend"
android:layout_width="10dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
put all your xml codes in LinearLayout and remove ConstraintLayout . thats may helps.

how to put a picture between two textview?

The two textviews are both wrap_content. and they will show dynamic characters. how can I put the picture between them. and make the edge of picture have the same distance to both of them. I am a new of English and android developer. has anyone can understand me and do me a favor? thanks a lot.
To make the edge of picture have the same distance to two textviews, You can use the LinearLayout with layout_weight. Here is developer link for LinearLayout
Try below code:
<LinearLayout 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:background="#android:color/white"
tools:context=".MainActivity"
android:orientation="vertical"
android:padding="10dp"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<LinearLayout
android:layout_weight=".35"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end|right|center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text One"/>
</LinearLayout>
<LinearLayout
android:layout_weight=".3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_weight=".35"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Two"
android:gravity="center_vertical"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Output for above code like below:
I hope this helps you

Persistent bottom sheet peek covering last RecyclerView item

I have implemented a persistent bottom sheet in my layout - one that cannot be completely hidden but always peeks from the bottom.
But it covers the last RecyclerView item.
How can I set the layout in such a way the peek doesn't hide the last item?
Screenshot:-
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recylerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_weight="1" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<!-- Buttom Sheet -->
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="56dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="center_vertical"
android:background="#android:color/holo_green_dark"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="3">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_weight="2"
android:text="Submit Report"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="8/10"/>
</LinearLayout>
<!-- Other things to add -->
</android.support.v7.widget.LinearLayoutCompat>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
This is silly. I knew the solution by myself right after posting the problem. :)
Just needed to add android:paddingBottom attribute to the RecyclerView.
<android.support.v7.widget.RecyclerView
android:id="#+id/studentListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="56dp"/>

Android ScrollView Not Scrolling Correctly

I've been making my way through thenewboston's android tutorials and I'm stuck on number 35. There is supposed to be a scroll bar that takes up a weight of 30 at the top of the app. There are 6 textview/edittext field groups in the code, but I deleted 5 for simplicity. My problem is that all of the text and text boxes appear on the page and are not confined to the given weight (they all just show up on the page). Has anyone else had this problem or know how to fix it?
Please, I'm new to stackoverflow. If you think this is a stupid question, please explain to me why and how I can ask it better.
Here is what it looks like: http://imgur.com/gJmOgqk
<?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="wrap_content"
android:orientation="vertical"
android:weightSum="100" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="30" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
</EditText>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="30"
android:orientation="vertical" >
<AnalogClock
android:id="#+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Welcome to StackOverflow!
Couple of things,
TheNewBoston made a mistake. Whenever you use weights you need
to set the height (or width) of that element to 0dp. I've changed
that in your code.
You shouldn't rely on the xml tool that eclipse has, you should always try to launch your app to some type of a device (emulator or preferably hardware)
I think by ScrollBar, you mean ScrollView? Because you're not doing anything to control the appearance of the scroll bar right now.
The parent of your layout (in this case) should match_parent, not wrap. (this is your main issue)
Also, you don't really need weightSum, android will just sum all the weights anyway.
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
</EditText>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:orientation="vertical" >
<AnalogClock
android:id="#+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
You need to set the height of the views to 0dp if you are using weight. match_parent is causing problems. Also set the height of root view to match_parent. Try this, if I add many EditText's to the LinearLayout in the ScrollView it seems to give the effect you are after:
<?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"
android:weightSum="100">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"/>
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10">
</EditText>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:orientation="vertical">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:orientation="vertical">
<AnalogClock
android:id="#+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>

Android XML: Percentage Height and width to create unique layout

I've heard so much about weight etc. However most of the tutorials refer always to width percentage. I wish to do the following setups with layouts:
Anyone know how to do this? I'm stuck!
Edit :
Since the Percent Support Library now exists it's not necessary to use a LinearLayout with weights anymore.
Well ok, you're first layout should be pretty easy, check the following code:
<?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="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="5" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/darker_gray" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#android:color/white" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="9" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_red_light" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:background="#android:color/holo_orange_light" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="9" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:background="#android:color/holo_blue_dark" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_green_dark" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Output:
The second one seems not possible to do with weights. Furthere more I would recommend that you don't use too much nested Linear Layouts with weights since this is a huge performance issue according to the following Link
android:layout_weight=".YOURVALUE" is best way to implement in percentage
<?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" >
<TextView
android:id="#+id/logTextBox"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".20"
android:maxLines="500"
android:scrollbars="vertical"
android:singleLine="false"
android:text="#string/logText" >
</TextView>
</LinearLayout>

Resources