How does it work to put dynamic content by making an Android app natively?

Asked

Viewed 298 times

0

Guys, I’m seeing a little bit of mobile development (Android), and I saw that the design is done using XML, and from what I saw, it seems to have no loop tag, to repeat similar structures, and generate some content dynamically.

How would you do something like that?

An example from React Navive:

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

To <FlatList> repeats the array that is passed in the attribute "data"

java android xml android-studio mobile

  • Put a concrete example of what you want to do.

  • @Ramaral, I don’t want to do anything yet, it’s just a question. Ionic has Angular *ngFor, React Native has Flatlist, I wanted to know how to do something similar natively in Android Studio.

  • 1

    On "native" Android you have to use Java or Kotlin to manipulate the views content.

  • So is there any way to design the interface using only java? Can you explain more? No need for code.

  • 1

    On Android you do this through the component RecyclerView together with a Adapter, research about these terms

  • 1

    "Then you can draw the interface using only java?" - Yes, but usually this is not the best approach. If you want to program "natively" you have to "forget" what you know about React Native.

  • In the native one has an XML for the parent view and an XML for the element that will compose its list of items. And in Java code these two XML are programmatically combined. I’m right or rusted too much? :)

Show 2 more comments

1 answer

1

Making a small modification to your component, the data from the Flatlist, can become dynamic.

Setting a variable in state of the component, it is possible to reference it in the method surrender(), so the list can change according to the contents of the variable data_list. Even if it is altered, the Flatlist will be updated.

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  constructor(props) {
    this.state = {
      data_list: [
        {key: 'Devin'}, {key: 'Jackson'},
        {key: 'James'}, {key: 'Joel'},
        {key: 'John'}, {key: 'Jillian'},
        {key: 'Jimmy'}, {key: 'Julie'},
      ]
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={ this.state.data_list }
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

Browser other questions tagged java android xml android-studio mobile

You are not signed in. Login or sign up in order to post.