Create gallery with elements floating side by side or table cells - java

Friends I'm new to Android and I'm facing all those beginner's problems such as overload of information in the first steps of the learning proccess.
I want to develop an activity where its content resembles a picture gallery, with 2 pics per row. With HTML + CSS I would create divs with float:left and half of the parent element's width. Or maybe creating a table with two cells per row. Wouldnt do that in HTML for a photo gallery but I know it works.
I want to do this programmatically and Ive seen solutions with TableLayout and RelativeLayout. But i dont understand how to create a container such as DIV in HTML for the data (will be a title and an image) i want to place in the layout. And i dont understand how to make every two of them side by side.
How would you do that in terms of layout and programming?
I will update this thread with an image to a better understanding of my problem later.

Use below XML code as template to inflate in your activity and then add to ListView
In Main Activity inflate view by LayoutInflater:
LayoutInflater inflater = getActivity() .getLayoutInflater();
View view = inflater.inflate(R.layout.my_stats_layout, null);
Use Above view as item in ListView - Use this tutorial for custom ListView
http://androidexample.com/How_To_Create_A_Custom_Listview_-_Android_Example/index.php?view=article_discription&aid=67&aaid=92
XML Layout:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/img1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/img2" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Img1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Img2"
android:textColor="#000" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Related

Widget ListView loading view

I'm trying to display a dynamic list on a widget and so far i've been able to display my 3 headers (which are simply textview inside a linearlayout) but for my items (2 textview in one linearlayout inside another linear layout) the view displays Loading... instead of the content (a task label).
I've already bumped getViewTypeCount to 2 in my RemoteViewsFactory to match the number of views returned by the getViewAt.
I can't figure out what is wrong inside this layout that would cause a problem:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="3dp"
android:clickable="true"
android:focusable="true"
style="#style/SelectableItemBackground"
android:id="#+id/widget_item"
>
<LinearLayout
android:paddingLeft="22dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="•"
android:paddingRight="6dp"
android:textSize="17dp"
android:textColor="#color/colorText" />
<TextView
android:id="#+id/widget_item_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17dp"
android:textColor="#color/colorText" />
</LinearLayout>
Thank you for reading :)
To anyone reading this, i have been able to solve it by suppressing the style attribute

How can a title of an article by the side in android

I'm a begginer in Android and my teacher gave me the task to create this layout, I know how to create the layout that the subheading will be on the top but not on the side Image for the layout
here's the 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"
tools:context="com.example.lielhanohov.scrollingtext.MainActivity">
<TextView
android:id="#+id/article_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:padding="#dimen/padding_regular"
android:text="#string/article_title"
android:textAppearance="#android:style/TextAppearance.Large"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/article_heading">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/article_subheading"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:padding="#dimen/padding_regular"
android:text="#string/article_subheading"
android:textAppearance="#android:style/TextAppearance" />
<TextView
android:id="#+id/article"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:lineSpacingExtra="#dimen/line_spacing"
android:text="#string/Article_text" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
You could use a ConstraintLayout instead of the LinearLayout and constrain the left of the article to the right of the subheading.
I've also noticed you're using RelativeLayout as the root layout. It is recommended to use ConstraintLayout instead of RelativeLayout as it is helps with creating flatter more performant layouts. A LinearLayout as the root layout is perhaps a better option in this instance however.
For more information on ConstraintLayout see: https://developer.android.com/training/constraint-layout/ and https://developer.android.com/reference/android/support/constraint/ConstraintLayout It can be very powerful especially when creating more complex layouts.

Button at bottom of programmatically created layout

I made a linear layout where I have a view and a button. And inside that linear layout I am also adding some more elements but programmatically. Here is the code:
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<View android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/transparentBlack1"/>
<Button
android:layout_width="70dp"
android:layout_height="40dp"
android:shadowColor="#color/noColor"
android:background="#color/transparentBlack1"
android:text="#string/NewButton"
android:textSize="30sp"
android:gravity="center"
android:textColor="#color/background2"
android:onClick="addLine"/>
</LinearLayout>
With the addLine function I just add another element in the layout.
Is there any way to keep the button at the bottom of every element inside the layout, so other elements that I create with code will be above the button?
I guess you use linearLayout.addView(view); to add your views, correct? You can specify where the view should be added like the following:
linearLayout.addView(view, linearLayout.getChildCount() - 1);
This should add it between the view and the button.
See documentation for method explanations:
addView(View, int)
getChildCount()
Try make that button outside that layout, something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<View android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/transparentBlack1"/>
</LinearLayout>
<Button
android:layout_width="70dp"
android:layout_height="40dp"
android:shadowColor="#color/noColor"
android:background="#color/transparentBlack1"
android:text="#string/NewButton"
android:textSize="30sp"
android:gravity="center"
android:textColor="#color/background2"
android:onClick="addLine"/>
</LinearLayout>
Hope this helps

Splitting Android Layout Vertically Adding Gravity To Both Sides To Center Objects

I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.
Here's some code which should be self-explanotory:
<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="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:

How to layout a VideoView next to TextView with scrolling list underneath

I'm trying to have a VideoView fixed on the upper left with a TextView immediately to the right of it. Below both of those I want a scrollable list of checkboxes, and below that two buttons "prev" and "next". The VideoView and TextView should not scroll, just the checkboxes and buttons. I can't seem to make this work with Linear layouts so i tried RelativeLayout but it seem kinda clunky because I'm hard coding all the relative stuff. What's the best way of laying out this type of thing?
thanks,
Justin
Here is a basic layout that fits your description:
<?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="wrap_content"
android:orientation="horizontal" >
<VideoView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<CheckBox android:id="#+id/chk1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/chk1"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
</LinearLayout>
If the VideoView is to big maybe you'll want to limit the space available to it by using the 0dp value and layout_weight attribute on the enclosing LinearLayout.

Categories